Crawling Crawling - 6 months ago 10
HTML Question

BootStrap : Two Divs in a row are not getting aligned properly

Here is my code :

<div class="container">
<div class="row">
<div class="col-sm-3 col-md-2">
<h2><span class="label label-primary" id="notify">Notifications</span><h2>
</div>
<div class="col-sm-9 col-md-10">
<!-- Split button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh">
&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-refresh"></span>&nbsp;&nbsp;&nbsp;</button>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default">
Mark all as read
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
Delete
</button>
</div>
</div>
</div>
<hr>
</div>


And Here is the fiddle.

https://jsfiddle.net/SimplytheVinay/0g8fm8u6/

I tried multiple combination of classes. Even setting the height of Label manually doesn't work. Somehow label is occupying more height than its size. Tried setting margins as well. No Luck.

Pretty new to web development, So correct me If I am missing anything.

Answer

You can set the H2 also for the button https://jsfiddle.net/7n0t19hr/

  <div class="col-sm-9 col-md-10">
       <h2>


        <!-- Split button -->
        <button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh">
            &nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-refresh"></span>&nbsp;&nbsp;&nbsp;</button>
        <!-- Single button -->
        <div class="btn-group">
            <button type="button" class="btn btn-default">
                Mark all as read
            </button>
        </div>
  <div class="btn-group">
            <button type="button" class="btn btn-default">
                Delete
            </button>
        </div>           
    </h2>
    </div>
</div>
<hr>
</div>