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
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.
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>
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.
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>
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