Bootstrap css float right on some divs are not working - html

Question

I was attempting to float right a few items in a row
I want layout to look like this, even with reducing the browser size
Essentially this image layout is a bit different, but it shows a Create new User and Actions, so Action is like my "Manage bulk users"
I just want the items to align or float to the right, so that if the browser size is reduced it is not easily stacking on top of each other
<div class="container">
<div class="row">
<div class="col-md-4">
Choose your preferred criteria values and click Search
</div>
<div class="col-md-8 margin-top-bottom-8">
<div class="col-md-6 float-right">
<img src="assets/images/addIcon.svg" (click)="createNewUser()" />
<span (click)="createNewUser()">Create New User</span>
</div>
<div class="col-md-6 float-right">
<img src="assets/images/bulkUploadIcon.svg" (click)="openEditPopup(role)" />
<span (click)="openEditPopup(role)">Manage Bulk Users</span>
</div>
</div>
</div>
</div>
Here is a fiddle of my code pasted below
https://jsfiddle.net/03vxqed9/

Answer 1

you need to use pull-left and pull-right instead of float. See snippet bellow.
use a clearfix class to reset the floated elements.
Hope this will work for you!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 pull-left">
Choose your preferred criteria values and click Search
</div>
<div class="col-md-8 margin-top-bottom-8 pull-right">
<div class="col-md-6 pull-right">
<img src="assets/images/addIcon.svg" (click)="createNewUser()" />
<span (click)="createNewUser()">Create New User</span>
</div>
<div class="col-md-6 pull-right">
<img src="assets/images/bulkUploadIcon.svg" (click)="openEditPopup(role)" />
<span (click)="openEditPopup(role)">Manage Bulk Users</span>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>

Answer 2

Try This:
HTML Code
<div class="container">
<div class="row top-bar">
<div class="col-md-6 panel-left">
Choose your preferred criteria values and click Search
</div>
<div class="col-md-6 panel-right">
<div class="col-md-8 pull-right">
<img class="iconx" src="assets/images/addIcon.svg" onClick="createNewUser()" />
<span onClick="createNewUser()">Create New User</span>
</div>
<div class="col-md-6 pull-right">
<img class="iconx" src="assets/images/bulkUploadIcon.svg" onClick="openEditPopup(role)" />
<span onClick="openEditPopup(role)">Manage Bulk Users</span>
</div>
</div>
</div>
</div>
STYLES
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.top-bar {
display:flex;width:100%;
}
.panel-right { display:flex;}
.iconx { clear:right;}

Answer 3

Use col-xs-6 that mean all sizes(from smallest to biggest)
and use pull-right/ pull-left instead float
float does NOT work with flex(row is flexable)
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-4 pull-left">
Choose your preferred criteria values and click Search
</div>
<div class="col-xs-8 margin-top-bottom-8 pull-right">
<div class="col-xs-6 pull-right">
<img src="assets/images/addIcon.svg" (click)="createNewUser()" />
<span (click)="createNewUser()">Create New User</span>
</div>
<div class="col-xs-6 pull-right">
<img src="assets/images/bulkUploadIcon.svg" (click)="openEditPopup(role)" />
<span (click)="openEditPopup(role)">Manage Bulk Users</span>
</div>
</div>
</div>
</div>

Answer 4

I hope this is what you want.
<div class="container">
<div class="row">
<div class="col-md-6 pull-left">
Choose your preferred criteria values and click Search
</div>
<div class="col-md-6 pull-right">
<div class="row">
<div class="col-md-6 pull-right">
<img src="assets/images/addIcon.svg" (click)="createNewUser()" />
<span (click)="createNewUser()">Create New User</span>
</div>
<div class="col-md-6 pull-right">
<img src="assets/images/bulkUploadIcon.svg" (click)="openEditPopup(role)" />
<span (click)="openEditPopup(role)">Manage Bulk Users</span>
</div>
</div>
</div>
</div>
</div>