Menu
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> 
503
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.
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
Use d-flex justify-content-center on your column div. This will center everything inside that column. If you have text and image inside the column, you need to use d-flex justify-content-center and text-center .
The first approach uses bootstrap offset class. 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.
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
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
