CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
TimHorton
TimHorton

Reputation: 885

Bootstrap form-group align

I'm currently working on an UI using Bootstrap 3. I have a form-group where I want to align a span on the left to a h3.

My HTML:

<div class="row">
   <nav class="col-sm-3">
      <div class="form-group">
         <span class="status" aria-hidden="true"></span>
         <h3>Project Title</h3>
      </div>
   </nav>
   <div class="col-sm-9">
      ...
   </div>
</div>

My CSS:

.status {
    width:20px;
    height:20px;
    border-radius:50%;
    background-color: yellow;
}

Somehow, the span never appears on the screen. The desired layout should be:

Do you know how to solve this?

Thanks :)

Upvotes: 0

Views: 49

Answers (1)

Jainam
Jainam

Reputation: 2660

You can add just float:left in .status class:

.status {
    width:20px;
    height:20px;
    border-radius:50%;
    background-color: yellow;
    float: left;
    margin-right: 10px;
}
<div class="row">
   <nav class="col-sm-3">
      <div class="form-group">
         <span class="status" aria-hidden="true"></span>
         <h3>Project Title</h3>
      </div>
   </nav>
   <div class="col-sm-9">
      ...
   </div>
</div>

Upvotes: 2

Related Questions