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
Related
i want to prevent the elements inside my main div from stacking on top of each other when window is resized.
regular view
window resized
<body>
<div class="calbody">
<div class="top-body">
<h1 class="body_name">CALCULATOR</h1>
<div><input class="screen" type="text" /></div>
</div>
<div class="mainbody">
<div class="container">
<div class="row">
<div class="col-sm">
<button type="button" class="b1 btn btn-danger">+</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-danger">-</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-danger" \>x</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-danger">/</button>
</div>
</div>
</body>
yes, i am using bootstrap-5. It worked after changing col-sm to col.Thank You.
How can I group buttons with Bootstrap (specifically with Bootstrap 4), so that if I have several lines/rows of buttons, one of the buttons would occupy two rows at once? Pretty much like on a calculator or a keyboard's num pad, where Enter occupies two rows like:
[1] [2] [3] [E]
[ 0 ] [.] [n]
I am pretty sure there is a simple way to do it, but I can't find it.
upd. After seeing the previous attempt of answer I better add a pic
Try this:
<div class="row">
<div class="col-9">
<div class="row">
<div class="col-4">
<button class="btn btn-primary btn-block">1</button>
</div>
<div class="col-4">
<button class="btn btn-primary btn-block">2</button>
</div>
<div class="col-4">
<button class="btn btn-primary btn-block">3</button>
</div>
</div>
<div class="row mt-2">
<div class="col-8">
<button class="btn btn-primary btn-block">0</button>
</div>
<div class="col-4">
<button class="btn btn-primary btn-block">.</button>
</div>
</div>
</div>
<div class="col-3">
<button class="btn btn-primary btn-block">Enter</button>
</div>
</div>
updated
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.
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 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>