Bootstrap: centralize row elements

Question

I have tried this and this answers. But I didn't succeed:

<div class="container">
     <div class="btn-group-vertical">
          <div class="row row-eq-height" style="overflow: hidden">
               <div class="col-sm-6" style="display: inline-block; vertical-align: middle; margin-bottom: -99999px;
  padding-bottom: 99999px;">
                    <button class="btn btn-default">hello</button>
               </div>
               <div class="col-sm-6" style="display: inline-block; vertical-align: middle; margin-bottom: -99999px;
  padding-bottom: 99999px;">
                    <span class="label label-success"
                                     style="font-size: small; vertical-align: iddle;">World</span>
                </div>
          </div>
     </div>
</div>

I want World be centralized by hello element. How could I make it happen?

try : flex css3 to display multiple alignments – kollein Aug 15 '16 at 14:25 — kollein, Aug 15 '16 at 14:25

score 1 · Answer 1 · edited Aug 20 '16 at 13:25

1

Here is a bootply:

 .row-eq-height{
  display: flex;
  align-items: center;
  justify-content: center;
}

edited Aug 20 '16 at 13:25

Carol Skelly

351,302
90
710
624

answered Aug 15 '16 at 14:34

Rachel S

3,780
3
24
37

the12 · Answer 2 · 2016-08-15T14:55:53.620

There were a couple mistakes in your code:

First, you surrounded the btn-group with the columns, hence it broke the columns, considering that if you drew a black line around "btn-group", it would only include the contours outside the button (not the entire width of the row). You will have to put btn-group just outside the button (not surround columns) in the future.

i.e.:

<div class = "btn-group"> <button class = "btn btn-default"> </button> <div>

I've altered your bootstrap classes to make each column worth 3 cols, and "pushed" the second two over to the right. This should center given a certain size (for larger sizes, you would have to add more column classes with push classes)

             <div class="row row-eq-height" style="overflow:hidden">
                  <div class="col-sm-3" style="display: inline-block; vertical-align: middle; margin-bottom: -99999px;
     padding-bottom: 99999px;">
                       <button class="btn btn-default">hello</button>
                  </div>
                  <div class="col-sm-3 col-sm-push-2" style="display: inline-block; vertical-align: middle; margin-bottom: -99999px;
     padding-bottom: 99999px;">
                       <span class="label label-success"
                                        style="font-size: small; vertical-align: iddle;">World</span>
                   </div>
             </div>
   </div>

score 1 · Accepted Answer · answered Aug 15 '16 at 14:44

Just use Bootstrap form-inline.. no extra CSS needed.

<div class="container">
     <div class="form-inline">
       <div class="form-group">
         <button class="btn btn-default">hello</button>
       </div>
       <div class="form-group">
         <span class="label label-success">World</span>
       </div>
     </div>
</div>

http://bootply.com/ZjjHreVVjA

P.S. - btn-group-vertical is for vertical button groups, not vertical alignment.

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

Check this link and search for offset classes. each row has 12 columns. If you give a div the class col-sm-6 that div takes 6 out of 12 columns, you have 6 remaining (empty) columns. To center this div you'd offset it by the remainder divided by 2: 3 (6 / 2 = 3). So if you'd add col-sm-offset-3 to said div it'll be in the center.

How this applies to your question: Put both buttons in one div and center it using the above method.

Edit

You asked how to center a row element, you shouldn't. Inside the .row element add a .container element and inside of that .container add your columns: col-device-size.

Bootstrap: centralize row elements

4 Answers4