How to make <h4> element on the same line with 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 <h4> element on the same row with the buttons on the right side?

Answer 1

You have to add the following CSS for the heading <h4>:

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>

The default value of the display property is block so the heading (<h4>) takes the full width of the parent container. With display: inline-block the heading takes only the space needed.

---

Bootstrap 3.3

You can set the class .pull-left to the <h4> element. So you don't 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>

---

Bootstrap 4.0+

Since Bootstrap 4.0 you have to use .float-left instead of .pull-left:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<h4 class="float-left"><span class="label label-default">1546 - some text</span></h4>
<div class="float-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>