Boostrap grid aligment

Question

I have three elements and I want to center two in the middle of the page and the last item completely to the left.

I still don't understand the col system.

Thanks in advance.

html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container w-100">
  <div class="row">
    <div class="col d-flex justify-content-start">
    item 1 // align this element to the left 
   </div>
    <div class="col">
    item 2 // center this element in the middle of the page
    </div>
    <div class="col">
    item 3 // center this element in the middle of the page
   </div>
  </div>
</div>

`justify-content-start` justifies the contents to the start, and you would put on the `.row`. — Gert B., Aug 27 '21 at 08:54
Please update the tags or the question to include the version of bootstrap you are using. — wazz, Aug 27 '21 at 08:58
You have a row with 3 `.col` so the 3 cols will each take 1/3 of the row. I'm not sure how you want it to be... — Gert B., Aug 27 '21 at 09:14

Gass · Accepted Answer · 2021-08-27T09:27:26.160

To accomplish what you are looking for we need to create a row that contains 3 columns with the same width and leave the third column empty. Then we use Bootstrap d-flex class to position the elements inside each column exactly where we want.

In this case I'm using justify-content-start to position the flex element at the start (left) of the container.

.m-1{border:1px solid black}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="row w-100">

  <div class="col">
    <div class="d-flex justify-content-start">
      <div class="m-1 p-1"> item one</div>
    </div>
  </div>
  
  <div class="col">
    <div class="d-flex justify-content-center">
      <div class="flex-fill m-1 p-1">item two</div>
      <div class="flex-fill m-1 p-1">item three</div>
    </div>
  </div>
  
  <div class="col">
  </div>
  
</div>

You can read more about this here and here

That would make them overlap in some cases. Also I would not use class `.float-right` when it uses a position absolute. thats confusing. — Gert B., Aug 27 '21 at 09:01

Boostrap grid aligment

1 Answers1