Button with glyphicon pull-right - css

I have a simple button on which i am trying to add a glyphicon in order to get a fashion one.
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-8">
<div class="container-fluid">
<div class="form-group">
<button class="btn btn-primary form-control">
Test
<span class="pull-right">
<span class="glyphicon glyphicon-edit">
</span>
</span>
</button>
</div>
</div>
</div>
</div>
While it's working perfectly on chrome and safari, the glyphicon is badly positionned on mozilla. Is there a well known-issue or am I doing something wrong with the bootstrap css ?
Here is the plunker if you want to see exactly what I am trying to get ( on chrome ) , and what is wrong (on mozilla).

Please try below code you have to add one inline property white-space: inherit ! important; to button
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-8">
<div class="container-fluid">
<div class="form-group">
<button class="btn btn-primary form-control" style="white-space: inherit ! important;">
Test
<span class="pull-right">
<span class="glyphicon glyphicon-edit">
</span>
</span>
</button>
</div>
</div>
</div>
</div>

Related

Bootstrap searchbox pull-right

I want to have a searchbox on the right next to another container with pull-left:
<div>
<div class="pull-left"><span>SOME TEXT</span></div>
<div class="pull-right">
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" id="txtSearch">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
Bootply link:
LINK
It does not work the intended way.
If you are using the grid, you don't need the pull-right class.
As for your example, some text is given col-*-8 and your search bar is given col-*-4 it will place your search in the right.
<div class="container">
<div class="row">
<div class="col-*-8">
Some Text
</div>
<div class="col-*-4">
BUTTON
</div>
</div>
</div>
This Documentation and this video are really informative and you can anytime check the Bootstrap Official Grid Documentation.
Here is the Solution.

Bootstrap grid config

i cant find the correct config to this config in bootstrap 3 ...
i have this input field but i cant put the image in that position
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input size="16" class="form-control" type="text" name="nombre" required placeholder="Tu nombre completo">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input size="16" class="form-control" type="email" name="correo" required placeholder="Tu email">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="input-group-btn">
<button type="button" class="btn btn-success" id="agregar"><span class="glyphicon glyphicon-plus"></span> Agregar usuario sugerido</button>
</div>
</div>
</div>
Try this:
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="input-group-btn">
<button type="button" class="btn btn-success" id="agregar">
<span class="glyphicon glyphicon-plus"></span> Agregar usuario sugerido</button>
</div>
</div>
<div class="row">
<div class="input-group-btn">
<button type="button" class="btn btn-success" id="agregar">
<span class="glyphicon glyphicon-plus"></span> Agregar usuario sugerido</button>
</div>
</div>
</div>
<div class="col-sm-6">
Image here
</div>
</div>
</div>
</div>
You should have another look at the grid docu. Nesting is an solid option furthermore you do not need to use col-sm-6 combined with col-md-6 only use the smaller one if the values are the same.
You are making it a little too complicated, see my codepen. When working with Bootstrap think big to small. It helps you develop a layout and then work your way down to smaller things.
Hope this helps! :)
http://codepen.io/sequential/pen/egxbbK
<div class="row">
<div class="col-sm-6 tier1">
<div class="smBox"></div>
<div class="smBox"></div>
</div>
<div class="col-sm-6 tier1">
<div class="lgBox"></div>
</div>
</div>

Centering a div horizontally

I must be missing something really simple here:
<div class="row">
<div class="col-lg-12">
<a href="/add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add User
</a>
</div>
</div>
<div class="row">
<div class="col-lg-12" ng-show="users.busy">
<div class="spinner-loader center-block"></div>
</div>
</div>
I've used the bootstrap classes, including center-block. Yet it always looks like this:
Why isn't the spinner icon in the centre of the page?
There is a work around to your problem by changing some HTML as follows
<div class="row">
<div class="col-lg-12 text-center" ng-show="users.busy">
<span class="spinner-loader">Loading</span>
</div>
</div>
instead of <div> for spinner I took a <span> which will be centered horizontally because of text-center class to parent <div>.
You can try this:
<div class="row">
<div class="col-lg-12">
<a href="/add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add User
</a>
</div>
</div>
<center>
<div class="row">
<div class="col-lg-12" ng-show="users.busy">
<div class="spinner-loader"></div>
</div>
</div>
</center>
Instead of using center-block, add text-center class
I ve been using the bootstrap col-md-offset css to center my divs. For example:
<div class=container>
<div class=row>
<div class=form-horizontal>
<div class="col-md-offset-4 col-md-4">
<div class="your div">
</div>
</div>
</div>
</div>
Your div will be responsive, thus as you resize the window the div will remain in the center of the window.

Bootstrap horizontal form has additional margins

The button that's next to a column containing a select element appears to have some extra margins on it. On my actual site it seems to be extra positive margin, while on CodePen it appears to be negative.
I suspect they are the same problem though with the markup though. Here's the CodePen demo: http://codepen.io/anon/pen/gabZMo?editors=100
<div class="row">
<div class="form-horizontal col-md-6">
<div class="form-group">
<div class="col-sm-8">
<select class="form-control">...</select>
</div>
<button class="btn btn-default col-sm-4">New Event</button>
</div>
<button class="btn btn-primary btn-block">Free Quote</button>
</div>
</div>
I've looked through the Bootstrap docs and this should be the correct markup. I've also tried wrapping the button in its own column, but that didn't change anything.
You have 3 options to resolve the problem,
Put the <button class="btn btn-primary btn-block">Free Quote</button> inside <div class="form-group"></div>
Reason the button is pushing left of right because col-sm-4 selector has left and right padding 15px which is getting overwritten by btn-default selector padding: 6px 12px;
So add custom selector custom-margin and define custom CSS
1 HTML
<div class="row">
<div class="form-horizontal col-md-6">
<div class="form-group">
<div class="col-sm-8">
<select class="form-control">...</select>
</div>
<button class="btn btn-default col-sm-4 custom-margin">New Event</button>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block">Free Quote</button>
</div>
</div>
</div>
Fiddle 1
2 HTML
<div class="row">
<div class="form-horizontal col-md-6">
<div class="form-group">
<div class="col-sm-8">
<select class="form-control">...</select>
</div>
<button class="btn btn-default col-sm-4 custom-margin">New Event</button>
<button class="btn btn-primary btn-block">Free Quote</button>
</div>
</div>
</div>
Fiddle 2
Or Do it right way
3 HTML
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<select class="form-control">...</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<button class="btn btn-default btn-block">New Event</button>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<button class="btn btn-primary btn-block">Free Quote</button>
</div>
</div>
</div>
</div>
</div>
</div>
Fiddle 3
You don't want to use col-sm-4 directly on the button. Put btn-block on the button and stick it in a col-sm-4 div, like so:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="form-horizontal col-md-6">
<div class="form-group">
<div class="col-xs-8">
<select class="form-control">
<option value="1">Test Event</option>
<option value="7">Test Event 2: The Re-testening</option>
</select>
</div>
<div class="col-xs-4">
<button class="btn btn-default btn-block">New Event</button>
</div>
</div>
<button class="btn btn-primary btn-block">Free Quote</button>
</div>
</div>

Bootstrap 3 Horizontal Center Button Group In A Row

I am trying to horizontally center two radio buttons (in a group) on my page. This is what I have so far. It is not exactly center. It is a bit to the left. Pull right makes it go too far to the right. I added center-block and text-center but they did not help at all.
Can anyone help?
<div class="row">
<div class="col-sm-5"> </div>
<div class="col-sm-2">
<div class="btn-group center-block text-center" data-toggle="buttons">
<label class="btn btn-default center-block"><input type="radio">All</label>
<label class="btn btn-default active center-block"><input type="radio">Filtered</label>
</div>
</div>
<div class="col-sm-5"> </div>
</div>
You need to have text-center in the parent div, not the div being centered.
<div class="row">
<div class="col-sm-offset-5 col-sm-2 text-center">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default center-block"><input type="radio">All</label>
<label class="btn btn-default active center-block"><input type="radio">Filtered</label>
</div>
</div>
</div>
Also, you should use col-sm-offset-5 instead of <div class="col-sm-5"> </div>.
Bootply Demo

Resources