Rectangle 27 1572

There are two approaches to centering a column <div> in Bootstrap 3:

The first approach uses Bootstrap's own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5, that's (12-2)/2.

.col-X-2
.col-X-4
col-X-6
col-X-8
col-X-10

You can center any column size by using the proven margin: 0 auto; technique, you just need to take care of the floating that is added by Bootstrap's grid system. I recommend defining a custom CSS class like the following:

.col-centered{
    float: none;
    margin: 0 auto;
}

Now you can add it to any column size at any screen size and it will work seamlessly with Bootstrap's responsive layout:

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

Note: With both techniques you could skip the .row element and have the column centered inside a .container but you would notice a minimal difference in the actual column size because of the padding in the container class.

Since v3.0.1 Bootstrap has a built-in class named center-block that uses margin: 0 auto but is missing float:none. You can add that to your CSS to make it work with the grid system.

i think that there is no float:none in the center-block rule because there is a clearfix independent rule that you can add to elements for clearing floats.

Thanks for the informative answer. Curious as how you could apply this if you had multiple odd-numbered colums within a row. For example: three div's with class col-md-3. How would you center those three divs?

@cheshireoctopus In that case what I would do is set up a .col-md-9.col-centered and then add a nested row and divide it equally in three columns with col-md-4 like this

@DiegoFernandoMurilloValenci .clearfix wouldn't work in this case because it doesn't remove the float property on the elements (which is needed to center using margin: 0 auto), it just makes a container wrap any floated elements inside

can't use this on a column, because no float:none;

If you want to center more then one column in a single line, see this answer stackoverflow.com/questions/28683329/

css - Center a column using Twitter Bootstrap 3 - Stack Overflow

css twitter-bootstrap twitter-bootstrap-3 centering
Rectangle 27 1570

There are two approaches to centering a column <div> in Bootstrap 3:

The first approach uses Bootstrap's own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5, that's (12-2)/2.

.col-X-2
.col-X-4
col-X-6
col-X-8
col-X-10

You can center any column size by using the proven margin: 0 auto; technique, you just need to take care of the floating that is added by Bootstrap's grid system. I recommend defining a custom CSS class like the following:

.col-centered{
    float: none;
    margin: 0 auto;
}

Now you can add it to any column size at any screen size and it will work seamlessly with Bootstrap's responsive layout:

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

Note: With both techniques you could skip the .row element and have the column centered inside a .container but you would notice a minimal difference in the actual column size because of the padding in the container class.

Since v3.0.1 Bootstrap has a built-in class named center-block that uses margin: 0 auto but is missing float:none. You can add that to your CSS to make it work with the grid system.

i think that there is no float:none in the center-block rule because there is a clearfix independent rule that you can add to elements for clearing floats.

@DiegoFernandoMurilloValenci .clearfix wouldn't work in this case because it doesn't remove the float property on the elements (which is needed to center using margin: 0 auto), it just makes a container wrap any floated elements inside

can't use this on a column, because no float:none;

If you want to center more then one column in a single line, see this answer stackoverflow.com/questions/28683329/

css - Center a column using Twitter Bootstrap 3 - Stack Overflow

css twitter-bootstrap twitter-bootstrap-3 centering
Rectangle 27 4

The best way for centering your element it is using .center-block helper class. But must your bootstrap version not less than 3.1.1

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" />
<div class="row">
  <div class="col-lg-3 center-block">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
             <button class="btn btn-default" type="button">Go!</button>
         </span>
    </div>
    <!-- /input-group -->
  </div>
  <!-- /.col-lg-6 -->
</div>
<!-- /.row -->

html - Centering Bootstrap input fields - Stack Overflow

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 198

col-md-offset-3

You can also use text-center to center text (and inline elements).

EDIT - As mentioned in the comments, center-block works on column contents and display:block elements, but won't work on the column itself (col-* divs) because Bootstrap uses float.

Now with Bootstrap 4, the centering methods have changed..

text-center
display:inline
mx-auto
center-block
display:block
  • offset-* or mx-auto can be used to center grid columns

mx-auto (auto x-axis margins) will center display:block or display:flex elements that have a defined width, (%, vw, px, etc..). Flexbox is used by default on grid columns, so there are also various flexbox centering methods.

Unfortunately this helper class doesn't work with the column system as it doesn't take care of the float property. See this demo for example.

That only requires a center-block { float: none; }, and it works. bootply.com/122268

not sure about the OP, but I got here looking for the text-center detail - which none of the other answers provided. This one gets my vote.

can't use this on a column, because no float:none;

css - Center a column using Twitter Bootstrap 3 - Stack Overflow

css twitter-bootstrap twitter-bootstrap-3 centering
Rectangle 27 198

col-md-offset-3

You can also use text-center to center text (and inline elements).

EDIT - As mentioned in the comments, center-block works on column contents and display:block elements, but won't work on the column itself (col-* divs) because Bootstrap uses float.

Now with Bootstrap 4, the centering methods have changed..

text-center
display:inline
mx-auto
center-block
display:block
  • offset-* or mx-auto can be used to center grid columns

mx-auto (auto x-axis margins) will center display:block or display:flex elements that have a defined width, (%, vw, px, etc..). Flexbox is used by default on grid columns, so there are also various flexbox centering methods.

Unfortunately this helper class doesn't work with the column system as it doesn't take care of the float property. See this demo for example.

That only requires a center-block { float: none; }, and it works. bootply.com/122268

not sure about the OP, but I got here looking for the text-center detail - which none of the other answers provided. This one gets my vote.

can't use this on a column, because no float:none;

css - Center a column using Twitter Bootstrap 3 - Stack Overflow

css twitter-bootstrap twitter-bootstrap-3 centering
Rectangle 27 3

So I figure that your issue here is that your ul is not centered in container > row > text-left

A more simple solution (if flexbox is an option):

.container > .row > .text-left {
  display: flex;
  justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="well text-center maindiv">
  <h1 style="color: green" class="text-primary text-center">The Mighty Diamonds</h1>
  <h3 class="text-center">The band that brought joy to the hearts of millions</h3>
  <div id="div1" class="well text-center">
    <div id="div2">
      The Mighty Diamonds were a band from Jamaica</div>
  </div>
  <h3 class="text-center;">A Brief Biog</h3>
  <p class="text-left body-para">[Paragraph text]</p>
  <h3>Studio albums</h3>
  <div class="container">
    <div class="row">
      <div class="col-xs-4"></div>
      <div class="col-xs-4 text-left">
        <ul>
          <li><span>1964</span> - Album 1</li>
          <li><span>1966</span> - Album 2</li>
          <li><span>1967</span> - Authentic Album Vol. 2</li>
          <li><span>1996</span> - Greetings from Album 4</li>
          <li><span>1998</span> - Ball of Fire</li>
          <li><span>2009</span> - From Paris with Love</li>
          <li><span>2007</span> - On the Right Track</li>
          <li><span>2012</span> - Walk With Me Album</li>
          <li><span>2016</span> - Platinum Ska</li>
        </ul>
      </div>
      <div class="col-xs-4"></div>
    </div>
  </div>
</div>

I just wrote it down, didn't think about looking for a dupe... :)

Apologies guys I did check other answers (and general google) first. Didn't occur to me to check same code in a different tool to check. Mia culpa

html - Centering a list in Bootstrap CSS - Stack Overflow

html css twitter-bootstrap css3 flexbox
Rectangle 27 1

for navbar 1 add the following css to this div div class="navbar-collapse navbar-part2 collapse

max-width: 1350px;
margin-left: auto;
margin-right: auto;

max width will make sure the nav part wont go wider than 1350px margin-left:auto and margin-right:auto will center the nav.

I think this is what you're after? if not sorry!

css - Centering fixed top navbar for large screens in Twitter Bootstra...

css twitter-bootstrap centering
Rectangle 27 3

@media screen and (min-width:  1350px) {
   .navbar { text-align: center; }
   .navbar-header { display: inline-block; float: none !important; }
   .navbar-collapse.collapse { display: inline-block !important; }
}

Everytime when you want to center elements, you need to add text-align:center to the parent element, and display: inline-block to elements which you want to center horizontally. None of these can be floated (this is very important).

Well it seems like this works for big screens, navbar-header navbar-collapse.collapse breaks collapsing for small screens.

css - Centering fixed top navbar for large screens in Twitter Bootstra...

css twitter-bootstrap centering
Rectangle 27 11

Bootstrap 4 (currently in Alpha), includes flexbox, so the method of vertical centering is much easier and doesn't require extra CSS.

d-flex
align-items-center
<div class="jumbotron d-flex align-items-center">
  <div class="container">
    content
  </div>
</div>

html - How to center align vertically the container in bootstrap - Sta...

html css twitter-bootstrap twitter-bootstrap-3 vertical-alignment
Rectangle 27 3

I know it's a little late, but I found the solution to all the problems with centering the Bootstrap Modal with different heights than the standard's (one).

$("#yourModal").modal('show').css({
    'margin-top': function () { //vertical centering
        return -($(this).height() / 2);
    },
    'margin-left': function () { //Horizontal centering
        return -($(this).width() / 2);
    }
});

With the negative margins, it causes the modal window to be off screen. Dropping the negative sign causes it to be way to low.

Twitter Bootstrap - Center Modal Dialog - Stack Overflow

twitter-bootstrap modal-dialog
Rectangle 27 1

Although the below answer covered most of it, I noticed the menus are still not in one-line, here are the following change I've made:

1) Yes, it's the width that's creating the two-gaps but the major culprit is the .container. So remove the <div> with the class .container

.navbar-inner { text-align: center; }
.collapse.navbar-collapse.in{ display: inline-block !important; }

Binds the two <ul> elements together.

If you want the heading 'Navbar' to be centered too, you can do:

.navbar-header { float: none; }

And it's effect on a resolution > 1350px.

@trante Understood what you meant, the css selector was targeting the navbar collapse both on open and close, made the change and this is how it looks.

Well, I don't prefer to "Navbar" text to be centered. Because in that case a new line appears, and it makes navbar height bigger :)

css - Centering fixed top navbar for large screens in Twitter Bootstra...

css twitter-bootstrap centering
Rectangle 27 1

This fix wil affect all styles on your page. But I guess it is what you are asking for, there was not enough space to put in on one line. http://jsfiddle.net/mcqHE/58/

* {
    font-size:10px;
}

css - Centering fixed top navbar for large screens in Twitter Bootstra...

css twitter-bootstrap centering
Rectangle 27 2

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <ul class="navbar-nav mx-auto">
    <li class="nav-item active text-center">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item text-center">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item text-center">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item dropdown text-center">
      <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown link
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </li>
  </ul>
</nav>

If you need to center only specific elements, such as the Brand or Links, see this answer

css - Centering the navbar content in Bootstrap 4 (alpha 5) - Stack Ov...

css twitter-bootstrap bootstrap-4 twitter-bootstrap-4
Rectangle 27 115

You could create a new CSS class such as:

.img-center {margin:0 auto;}
<img src="images/2.png" class="img-responsive img-center">

OR, just override the .img-responsive if you're going to center all images..

.img-responsive {margin:0 auto;}

EDIT - With the release of Bootstrap 3.0.1, the center-block class can now be used without any additional CSS..

<img src="images/2.png" class="img-responsive center-block">

In Bootstrap 4 alpha 6, the mx-auto class (auto x-axis margins) can be used to center images.

css - Centering the image in Bootstrap - Stack Overflow

css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 59

.navbar {
    position: relative;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}

Centering your logo by 50% and minus half of your logo width so that it won't have problem when zooming in and out.

I only wanted to center the logo on mobile (screen-sm) devices so I wrote a media query, set the position as absolute, offset the margin-left by 1/2 the width of the logo image, and set the left value to 50%. Works like a charm.

My headache was solved by this answer. Thanks man.

You can now use transform:translateX(-50%) isntead of margin-left for this to work with any logo width.

css - Centering brand logo in Bootstrap 3 Navbar - Stack Overflow

css twitter-bootstrap-3
Rectangle 27 58

.navbar {
    position: relative;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}

Centering your logo by 50% and minus half of your logo width so that it won't have problem when zooming in and out.

I only wanted to center the logo on mobile (screen-sm) devices so I wrote a media query, set the position as absolute, offset the margin-left by 1/2 the width of the logo image, and set the left value to 50%. Works like a charm.

My headache was solved by this answer. Thanks man.

You can now use transform:translateX(-50%) isntead of margin-left for this to work with any logo width.

css - Centering brand logo in Bootstrap 3 Navbar - Stack Overflow

css twitter-bootstrap-3
Rectangle 27 30

.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}

This way also works with dynamically sized background images for the logo and allows us to utilize the text-hide class:

.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
  width: 200px; /* no height needed ... image will resize automagically */
}
<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text
        </a>

We can also use flexbox though. However, using this method we'd have to move navbar-brand outside of navbar-header. This way is great though because we can now have image and text side by side:

.brand-centered {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
.navbar-brand {
  display: flex;
  align-items: center;
}

To only achieve these results on mobile simply wrap the above css inside a media query:

@media (max-width: 768px) {

}

Actually, this might not work when the nav is collapsed! Unable to click the button to drop down the menu!

@Hardycore didn't notice that. Easy fix though. I updated the codepen. Just need to add .navbar-toggle { z-index: 1; }

css - Centering brand logo in Bootstrap 3 Navbar - Stack Overflow

css twitter-bootstrap-3
Rectangle 27 28

.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}

This way also works with dynamically sized background images for the logo and allows us to utilize the text-hide class:

.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
  width: 200px; /* no height needed ... image will resize automagically */
}
<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text
        </a>

We can also use flexbox though. However, using this method we'd have to move navbar-brand outside of navbar-header. This way is great though because we can now have image and text side by side:

.brand-centered {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
.navbar-brand {
  display: flex;
  align-items: center;
}

To only achieve these results on mobile simply wrap the above css inside a media query:

@media (max-width: 768px) {

}

Actually, this might not work when the nav is collapsed! Unable to click the button to drop down the menu!

@Hardycore didn't notice that. Easy fix though. I updated the codepen. Just need to add .navbar-toggle { z-index: 1; }

css - Centering brand logo in Bootstrap 3 Navbar - Stack Overflow

css twitter-bootstrap-3
Rectangle 27 18

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
}

Your markup is for Bootstrap 2, not 3. There is no longer a navbar-inner.

transform: translateX(-50%);
.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}

In Bootstrap 4, mx-auto or flexbox can be used to center the brand and other elements. See How to position navbar contents in Bootstrap 4 for an explanation.

Cowardly downvote with no explanation?

The "edit" solution is perfect. I had to use this approach vs the more simple absolute centering one because it was messing with my site's google analytics and extending across the page.

css - Centering brand logo in Bootstrap 3 Navbar - Stack Overflow

css twitter-bootstrap-3
Rectangle 27 18

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
}

Your markup is for Bootstrap 2, not 3. There is no longer a navbar-inner.

transform: translateX(-50%);
.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}

In Bootstrap 4, mx-auto or flexbox can be used to center the brand and other elements. See How to position navbar contents in Bootstrap 4 for an explanation.

Cowardly downvote with no explanation?

The "edit" solution is perfect. I had to use this approach vs the more simple absolute centering one because it was messing with my site's google analytics and extending across the page.

css - Centering brand logo in Bootstrap 3 Navbar - Stack Overflow

css twitter-bootstrap-3