Bootstrap alignment is not working

Question

So I am new to bootstrap and I have just tried one of the examples in there docs and it doesn't show up as expected.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
    crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>
<div class="container">
    <div class="row">
        <div class="col align-self-start">
            One of three columns
        </div>
        <div class="col align-self-center">
            One of three columns
        </div>
        <div class="col align-self-end">
            One of three columns
        </div>
    </div>
</div>

The output should be something like below.(If you cant see the image it is three divs with 'One of the three columns' aligned to the top-left, center and bottom right)

But all I am getting are three divs side by side.

Is there something I am missing?

Welcome to Stack Overflow, I've answered your question, in case it works for you, you can mark the answer as correct by clicking the tickmark on the left of the answer. Thanks. — Sujit Agarwal, Aug 10 '18 at 09:17

score 1 · Accepted Answer · answered Aug 10 '18 at 09:16

1

You need to provide height to your row -

<div class="row" style="height:500px;">

answered Aug 10 '18 at 09:16

Sujit Agarwal

12,348
11
48
79

score -1 · Answer 2 · answered Aug 10 '18 at 09:20

Check this out

<div class="container">
    <div class="row">
        <div class="col-md-4 align-self-start">
            One of three columns
        </div>
    </div>
    <div class="row">
      <div class="col-md-4 align-self-center">
      </div>
        <div class="col-md-4 align-self-center">
            One of three columns
        </div>
    </div>
    <div class="row">
      <div class="col-md-4 align-self-center">
      </div>
      <div class="col-md-4 align-self-center">
      </div>
        <div class="col-4 align-self-end">
            One of three columns
        </div>
      </div>
    </div>
</div>

Let me know if this does work?

score -1 · Answer 3 · answered Aug 10 '18 at 09:40

.align-self-* is used to align flexboxes

Try this;

<div class="container">

  <div class="d-flex bg-light" style="height:150px;">
    <div class=" align-self-start">Flex item 1</div>
    <div class=" align-self-center">Flex item 2</div>
    <div class=" align-self-end">Flex item 3</div>
  </div>

</div>

Bootstrap alignment is not working

3 Answers3