How to Center 3 columns in Bootstrap

Question

User248267340 posted

I'd like to display three (3) squares on a page, centered, using bootstrap 4.3.1.

Wouldn't it be great if bootstrap allowed something like:

<div class="row">
   <div class="col-1.5"></div>
   <div class="col-3">Box 1</div>
   <div class="col-3">Box 2</div>
   <div class="col-3">Box 3</div>
   <div class="col-1.5">Box 1</div>
</div>

Should I just code the display outside of bootstrap, or is there a way to use bootstrap?

Maybe take time and learn offset? Or is there some other trick?

I'd be grateful for any tips!

Answer 1

User475983607 posted

Use CSS.

<div class="container">
    <div class="row" style="width:80%;margin:auto;">
        <div class="col col-lg-4" style="background-color:gainsboro">
            One of three columns
        </div>
        <div class="col col-lg-4" style="background-color:gainsboro">
            One of three columns
        </div>
        <div class="col col-lg-4" style="background-color:gainsboro">
            One of three columns
        </div>
    </div>
</div>

Or

<div class="container" style="width:80%;margin:auto;">
    <div class="row">
        <div class="col col-lg-4" style="background-color:gainsboro">
            One of three columns
        </div>
        <div class="col col-lg-4" style="background-color:gainsboro">
            One of three columns
        </div>
        <div class="col col-lg-4" style="background-color:gainsboro">
            One of three columns
        </div>
    </div>
</div>

Answer 2

User248267340 posted

mgebhard,

Thank you very much! The code you gave me works great.

How can I include margins so the columns look like separated boxes? I tried putting in margins but the 3rd box wrapped around.

Answer 3

User-474980206 posted

or use bootstrap 4 

  <div class="content">
     <div class="row justify-content-center">
        <div class="col-3 m-1">Box 1</div>
        <div class="col-3 m-1">Box 2</div>
        <div class="col-3 m-1">Box 3</div>
     </div>
  </div>

Answer 4

User248267340 posted

Bruce,

You are gold. I put in some code that mgebhard suggested, and got everything perfect.

Thank you, both of you!