Display twitter bootstrap btn-group inline with text
Put pull-left
on the buttons div: http://jsfiddle.net/dbTqC/653/
I think this just sets float: left
, so you'll need to clear things below it. There's a clearfix
class for this.
It's worth having a look at some CSS resources so that you understand what's happening here.
How can i make my buttons apear inline, next to text?
Just add display:inline-block;
to h1
#temperature{
display:inline-block;
}
and take off the class pull-right
from the div parent of the buttons:
<div>
<h1 id="temperature" class="text-center inline">temperature</h1>
<div class="btn-group inline" data-toggle="buttons-checkbox">
<div class="btn btn-primary unitButton">C</div>
<div class="btn btn-primary unitButton">F</div>
</div>
</div>
Demo
Make Bootstrap btn-group display right to left
I gave it some more trials, and eventually got it with the trick of rotating the btn-group
and then rotating back the text (keeping each cell's content in its own span element):
.rotate{ transform: rotateY(180deg);}.rotate-back{ transform: rotateY(180deg); display: inline-block; direction: rtl;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class="btn-group pull-right rotate" role="group"> <button id="first" type="button" class="btn btn-default "> <span class="glyphicon glyphicon-hdd"></span><span class="rotate-back"> אחת</span> </button> <button id="second" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus-sign"></span><span class="rotate-back"> שתיים</span> </button> <button id="third" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-minus-sign"></span><span class="rotate-back"> שלוש</span> </button></div>
Get twitter bootstrap btn-group to operate like grouped navigation bar with drop down menus
I've created a class btn-toolbar2 to avoid conflict and overide btn-toolbar default behavior.
Dropdowns must be in their own btn-group.
<div class="btn-toolbar btn-toolbar2">
<div class="btn-group">
<button class="btn">Dashboard</button>
</div>
<div class="btn-group">
<button class="btn">Button 1</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li><li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn">Item 3</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
with the css
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.btn-toolbar2 >.btn-group + .btn-group {
margin-left: -5px;
}
.btn-toolbar2 > .btn-group > .btn, .btn-toolbar2 > .btn-group > .dropdown-toggle
{
-webkit-border-radius: 0px;
border-radius: 0px;
-moz-border-radius: 0px;
}
.btn-toolbar2 > .btn-group:first-child > .btn, .btn-toolbar2 > .btn-group:first-child > .dropdown-toggle{
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-topleft: 4px;
}
.btn-toolbar2 > .btn-group:last-child > .btn:last-child, .btn-toolbar2 > .btn-group:last-child > .dropdown-toggle:nth-last-child(2){
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-topright: 4px;
}
http://jsfiddle.net/baptme/x2BGB/4/
twitter bootstrap 2.1 button inline with text
There has been a bunch of changes between 2.0 and 2.1, and a lot of those concerns font sizes and line heights. Here is what I came up with : Demo (jsfiddle)
h1 small { vertical-align: middle; }
h1 small .btn-group {
display: inline-block;
vertical-align: text-top;
}
I doubt this is really centered, but it should be close enough. If it doesn't work in real-life conditions (different button size, etc.) you should try margins.
Tested on Firefox 15, Google Chrome 24 and IE 9.
How to center .btn-group from twitter-bootstrap?
Edited: This has changed as of Bootstrap 3. See solution for Bootstrap 3 below.
Is adding a wrapping div out of the question?
Look at this example: http://jsfiddle.net/EVmwe/4/
Important part of the code:
/* a wrapper for the paginatior */
.btn-group-wrap {
text-align: center;
}
div.btn-group {
margin: 0 auto;
text-align: center;
width: inherit;
display: inline-block;
}
a {
float: left;
}
Wrapping the button group within a division, and setting the div to text-align center. The button group must also be overwritten to have display inline-block and inherited width.
Overwriting the anchors display to inline-block, and float: none, would also probably work, as @Andres Ilich said.
Update for Bootstrap 3
As of Bootstrap 3, you have alignment classes (as seen in the documentation). You now simply have to add the text-center
class to a parent. Like so:
<div class="text-center">
<ul class="pagination">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
See working example here: http://jsfiddle.net/EVmwe/409/
Related Topics
Chrome Columns Bug When Number of Columns Is Less Then Column-Count
How to Use CSS Text-Overflow on Text That's Wrapping
CSS Selector: First Paragraph's First Letter Inside a Div
Make Hexagon Shape with Border, Rounded Corners and Transparent Background
Less Importing CSS and Relative Paths
Zooming on a Point with CSS3 Transform Scale
Maintain Perfectly Circular Corners on Variable-Height Element
Is There an App That Removes Unused Classes from Frameworks
Google Chrome Developer Tools - CSS File Showing as an Image Resource
CSS Wild Card for Complex Id'S
How to Update and Include Twitter Bootstrap 3 on Webapp or Yo Angular
Which Is Superior, CSS Transparency or Png Transparency
CSS Resize Property - Change Resize Icon Properties
Angular Mat-Select Text Color Doesn't Change