How to make the <h4> tag on the same line as the buttons?

Question

I have this html:

<h4><span class="label label-default">1546 - some text</span></h4>
<div class="pull-left">  
    <button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
    <button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
    <button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>

How can I make an item on the same line with buttons on the right side?

Answer 1

You need to add the following CSS:

h4 {
    display:inline-block;
    float:left;
}

Demo: https://jsfiddle.net/omc6oyra/1/

By default, the property displaymatters block, so the header takes the full width of the parent container. C display:inline-blockonly the required space is required.

---

Another solution using only Bootstrap

You can set the class pull-leftin <h4>to. Therefore, you do not need additional CSS rules:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h4 class="pull-left"><span class="label label-default">1546 - some text</span></h4>
<div class="pull-left">  
    <button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
    <button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
    <button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>

Run code

Answer 2

CSS h4 pull-left -class:

h4{
  display: inline-block;
}
.pull-left{
  display: inline-block;
}

:

https://jsfiddle.net/y6f0ddLg/