How to center div with col-md-6?

Question

I need to display in the center the div with class="col-md-6"

This is the code, that display me the timer at the left I nee to display time in the center

<div class="container">
  <div class="row">
    <div class="wpb_column vc_column_container col-md-6">
      <div class="vc_column-inner ">
        <div class="wpb_wrapper">
          <div class="event-wrapper featured-event  ">

            <!-- the loop -->
            <div class="upcoming-campaign">
              <img width="555" height="400" src="http://andrejceccoli.com/wp-content/uploads/2016/10/elezioni_sfondo.jpg" class="img-responsive wp-post-image" alt="Elezioni Politiche">
              <div class="campaign-scoop">
                <h3 class="title"><a href="http://trendytheme.net/demo2/wp/nominee/onepage/event/election-campaign/">Elezioni Politiche</a></h3>

                <span class="start-date">Inizia il: <span class="colored">20 Nov 2016</span></span>

                <div class="countdown-wrapper">
                  <ul class="countdown list-inline" data-countdown="2016-11-20">
                    <li><span class="days">38<span><p>Days</p></span></span>
                    </li>
                    <li><span class="hours">07<span><p>Hour</p></span></span>
                    </li>
                    <li><span class="minutes">48<span><p>Minutes</p></span></span>
                    </li>
                    <li><span class="second">12<span><p>Second</p></span></span>
                    </li>
                  </ul>
                </div>
                <address><i class="fa fa-map-marker"></i>San Marino</address>
                <span class="event-duration colored"><i class="fa fa-clock-o"></i>08:00 AM - 23:00 PM</span>
              </div>
              <!-- .campaign-scoop -->
            </div>
            <!-- .upcoming-campaign -->
            <!-- end of the loop -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Declare a css class like, `.col-aligncenter{float: none;margin: 0 auto;}` and place the `.col-aligncenter` after your `col-md-6` — David R, Oct 12 '16 at 15:16
It is already asked and answered, http://stackoverflow.com/questions/10088706/twitter-bootstrap-how-to-center-elements-horizontally-or-vertically — KnowGe, Oct 12 '16 at 15:20
@KnowGe the accepted answer there is bad practice and wrong. — Niels Keurentjes, Oct 12 '16 at 15:25

score 89 · Accepted Answer · edited Aug 24 '18 at 12:35

89

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

edited Aug 24 '18 at 12:35

Carol Skelly

351,302
90
710
624

answered Oct 12 '16 at 15:23

Niels Keurentjes

41,402
9
98
136

score 17 · Answer 2 · answered May 03 '19 at 15:24

17

Just add "float:none;margin:auto;" to your div style like this :

<div class="col-lg-6" style="float:none;margin:auto;">
   .....
</div>

Hope to be useful ;)

answered May 03 '19 at 15:24

Ali Mahmoodi

858
10
14

score 5 · Answer 3 · answered Oct 12 '16 at 17:07

As I see you are using wordpress. And the code you placed is not end properly. If I'm not wrong there is also other part of col-md-6 you have in the row. So easily you can set the time in center .upcoming-campaign { text-align: center; } adding this. If any Question ask me in comment.

.upcoming-campaign {
  text-align: center;
}

<head>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>

<body>
  <div class="container">
   <div class="row">
    <div class="wpb_column vc_column_container col-md-6">
      <div class="vc_column-inner ">
        <div class="wpb_wrapper">
          <div class="event-wrapper featured-event  ">

            <!-- the loop -->

            <div class="upcoming-campaign">
              <img width="555" height="400" src="http://andrejceccoli.com/wp-content/uploads/2016/10/elezioni_sfondo.jpg" class="img-responsive wp-post-image" alt="Elezioni Politiche">
              <div class="campaign-scoop">
                <h3 class="title"><a href="http://trendytheme.net/demo2/wp/nominee/onepage/event/election-campaign/">Elezioni Politiche</a></h3>

                <span class="start-date">Inizia il: <span class="colored">20 Nov 2016</span></span>

                <div class="countdown-wrapper">
                  <ul class="countdown list-inline" data-countdown="2016-11-20">
                    <li><span class="days">38<span><p>Days</p></span></span>
                    </li>
                    <li><span class="hours">07<span><p>Hour</p></span></span>
                    </li>
                    <li><span class="minutes">48<span><p>Minutes</p></span></span>
                    </li>
                    <li><span class="second">12<span><p>Second</p></span></span>
                    </li>
                  </ul>

                </div>

                <address>
              <i class="fa fa-map-marker"></i>San Marino                            
           </address>

           

 <span class="event-duration colored"><i class="fa fa-clock-o"></i>08:00 AM - 23:00 PM</span>
              </div>
              <!-- .campaign-scoop -->
            </div>
            <!-- .upcoming-campaign -->

            <!-- end of the loop -->


          </div>
          <!-- end of event-wrraper -->
        </div>
        <!-- end of wpb-wrapper -->
      </div>
      <!-- end of vc_colum-inner -->
    </div>
    <!-- end of col-md-6 [1] -->

    <div class="wpb_column vc_column_container col-md-6">
      <div class="vc_column-inner ">
        <div class="wpb_wrapper">


        </div>
        <!-- end of wpb-wrapper -->
      </div>
      <!-- end of vc_colum-inner -->
    </div>
    <!-- end of col-md-6 [2] -->

  </div>
  <!-- end of Row -->
</div>
<!-- end of the Container -->

</body>

score 1 · Answer 4 · answered Mar 01 '22 at 08:42

1

In case you are wondering the answer for Bootstrap 5, you need to add justify-content-md-center beside to the DIV containing the ROW class.

Documented example here.

answered Mar 01 '22 at 08:42

SamyCode

928
3
14
33

How to center div with col-md-6?

4 Answers4

Linked