How to Center Div with Col-Md-6

How to center div with col-md-6?

Bootstrap 3

Add the col-md-offset-3 class that will offset by 3 columns, given that Bootstrap has a 12-column grid this will put a col-md-6 element right in the center.

Documentation reference on offsets.

Bootstrap 4

Use offset-3 or mx-auto to center a col-md-6 column

How to center content in a Bootstrap column?

Use:

<!-- unsupported by HTML5 -->
<div class="col-xs-1" align="center">

instead of

<div class="col-xs-1 center-block">

You can also use bootstrap 3 css:

<!-- recommended method -->
<div class="col-xs-1 text-center">

Bootstrap 4 now has flex classes that will center the content:

<div class="d-flex justify-content-center">
   <div>some content</div>
</div>

Note that by default it will be x-axis unless flex-direction is column

Bootstrap: How to correctly centre a 6 column DIV inside of a fluid container

1. If you have 7 columns you can't center it with pure Bootstrap, you can do it like this:

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

<div class="col-md-7 col-center">

2. Your code is correct, but you don't need to set col-xs-12 class (it will automaticaly set 12 columns on mobile without that class - div width = 100%.
3. You set col-md-6 and col-md-offset-3 for medium screen sizes, it means that it will be the same on large(lg) screens, if you want to reset it on large screen you have to do it like this (change column size and reset offset):

<h1 class="col-sm-10 col-md-6 col-sm-offset-1 col-md-offset-3 col-lg-12 col-lg-offset-0">Auto cargo</h1>

4. You shouldn't set this class on h1 element, this is better way:

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-6 col-sm-offset-1 col-md-offset-3"> 
      <h1>Auto cargo</h1>
    </div>
  </div>
</div>

I need to center align 5th column panel on col-sm-6 breakpoint

Hope this will help you.
Working Example

add text-center class to .dashboardPanelsGroup div and add following css.

.dashboardPanels {
    display: inline-block;
    float: none;
    width: 47%;
    margin:10px 10px;
}

How to center div within col-md-12 in bootstrap

<div class="col-md-12 text-center"> works for bootstrap, no need to add any style unless you have already some style for h1. even if that's the case, you can use .text-center for h1
seems you are using width in that parent div. don't do that ever if you need content to be 100% width. and as per background, if you need 100% area occupy the background, you can simply use it in the div if not, you better use it with some pseudo classes :before or :after

Bootstrap align elements inside col

<section class="concept-area">
    <div class="col-sm-10 offset-sm-1 text-center h-100 ">
    <div class="row h-100 justify-content-center align-items-center">
      <div class="col-md-6 concept-text">
        <p class="title">Des chèques cadeaux pour <br> des soirées privilèges</p>
      </div>
      <div class="col-md-6">
        <button type="button" class="btn btn-discover">DECOUVRIR</button>
      </div>
    </div>
  </div>
</section>

See if this fixes your issue. I didn't understand from your question if you are looking for title and button to be inline and centered or you want title and button to be on new lines and centered.

How to center a row in bootstrap(col xs-12 col-sm-6 col-md-2 col-lg-2), that has 4 imgs?

I think this is what you want. Note, you only need to specify the smaller size if the larger is the same. You don't need col-lg-2 since the col-md-2 cover the md side and up. All I added was col-md-offset-2 which moves that column 2 over. You had 8 columns (2x4) and there are 12 total. So 12-8 = 4. If you want it centered then you want to split that so 4/2 = 2.

<div class = "row center-block">
    <div class = "col xs-12 col-sm-6 col-md-2 col-md-offset-2">
        <a target="_blank" href="tea-003.jpg">
            <img src="tea-003.jpg" class="img-responsive" alt="tea">
        </a>
            <div class = "desc">1</div>
    </div>

    <div class = "col xs-12 col-sm-6 col-md-2">
        <a target="_blank" href="tea-003.jpg">
            <img src="tea-003.jpg" class="img-responsive"  alt="Посуда">
        </a>
            <div class = "desc">2</div>
    </div>

    <div class = "col xs-12 col-sm-6 col-md-2">
        <a target="_blank" href="tea-003.jpg">
            <img src="tea-003.jpg" class="img-responsive">
        </a>
        <div class = "desc">3</div>
            </div>

    <div class = "col xs-12 col-sm-6 col-md-2">
        <a target="_blank" href="tea-003.jpg">
            <img src="tea-003.jpg" class="img-responsive" alt=" ">
        </a>
            <div class = "desc">4</div>
    </div>
</div>

If you want them evenly spaced across the entire row at all screen sizes, you'll need to look into flexbox. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

---

Related Topics