0

I'm trying to align the .time div (left) and .saveIcon div (right) within the .card div I've created but they just seem to be stacking horizontally on the left of my .card div. I'm sure I'm missing something fairly obvious but any help would be appreciated.

<div class="jumbotron" style="background-color:white">

  <div class="card col-lg-12">
    <div class="time col-lg-2"></div>
    <div class="card-body col-lg-8">write tasks here</div>
    <button class="saveIcon col-lg-2">
      <i class="fa fa-lock"></i>
    </button>
  </div>

</div>
Shiny
  • 4,945
  • 3
  • 17
  • 33
MESellassie
  • 1

1 Answers1

0

So there are a few issues with the snippet you've supplied, and they come down to what Bootstrap expects when rendering the layout.

Here is the basic use of the col tag in Bootstrap and it's expected outer Grid Layout. 

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

As you can see, a container must wrap a row which then contains a col element.

As per Bootstrap Rows and Columns - Do I need to use row?:

Yes, you need to use row. Only columns may be immediate children of rows

Here is your amended code as a result of these required rules:

<div class="container">
  <div class="card">
    <div class="card-block">
      <div class="row">

        <div class="time col-2"></div>

        <div class="card-body col-8">write tasks here</div>

        <button class="saveIcon col-2">
          <i class="fa fa-lock"></i>
        </button>

      </div>
    </div>
  </div>
</div>

Also, please ensure you're correctly referencing Bootstrap in your head: Bootstrap Get Started

Here is the JSFiddle showing the working output with Bootstrap.

EGC
  • 1,719
  • 1
  • 9
  • 20