Problem
I want to be able to use btn group for twitter bootstrap and have the buttons show to the left of some text. Not sure if this is already available in twitter bootstrap or if I need to add some css.
What I Have
I currently have a btn-group defined with two buttons. I then have after the buttons a string of text.
<p>
<div class="btn-group" data-toggle="buttons-checkbox">
<div class="btn btn-small">BTN Text 1</div>
<div class="btn btn-small">BTN Text 2</div>
</div>
String to display after buttons on same line
</p>
What I have tried
I have tried a few things here. I modified the <p> tag to be a <div class="row"> with two span divs one for the buttons and one for the text but this did not work. I also tried the following:
<div>
<div class="btn-group inline" data-toggle="buttons-checkbox">
<div class="btn btn-small">BTN Text 1</div>
<div class="btn btn-small">BTN Text 2</div>
</div>
<span class="inline">String to display after buttons on same line</span>
</div>
and defined in the css .inline {display:inline-block; zoom:1; *display: inline;} However this did not work either. This is what I am getting. As you can see the text is displaying below the button group. I want the text to the right of the button group.
Question
What can I do to get the button group to display to the right of the string? Is there something already built into twitter bootstrap for this, if so what? If not, was I on the right track of creating an inline class, if this is the case, why did it not work?
Update
Thank you RichardTowers for the suggestion on the pull-left class on the button group. However when adding more sets (which is needed) I get the following:
I assume that this is because of floating. Is this correct and how would I fix it?
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.
<p class="btn-toolbar">
<span class="btn-group">
Button 1
</span>
<span class="btn-group">
<a class="btn" href="#">Button 2</a>
<a class="btn" href="#">Button 3</a>
</span>
<span class="btn-group">Text here.</span>
</p>
This works:
<p>Hello <span class="btn-group">...</span></p>
I did as suggested in this SO answer, so basically I started off of .navbar .brand style and adapted a little bit.
If interested, here is my changed style:
/* See .navbar .brand style in bootstrap.css for a reference */
.btn-toolbar .title {
display: block;
float: left;
margin-top: -4px; /* Recover part of margin set in child Header nodes */
margin-left: 10px;
font-size: 20px;
font-weight: 200;
color: #777777;
text-shadow: 0 1px 0 #ffffff;
}
HTML usage:
<div class="btn-toolbar">
<div class="btn-group pull-left">
<a class="btn" href="#/search">Search...</a>
</div>
<div class="title">
<h4>View offers</h4>
</div>
<div class="btn-group pull-right">
<a class="btn" href="#/batchDelete">Delete ...</a>
<a class="btn" href="#/new">New</a>
</div>
</div>
and end result:
Related
I have this code:
<div class="panel-footer rounded" style="background-color: #B7B56E">
<button class="btn btn-xs rounded" (click)="refreshNow()" style="float: right"><span class="glyphicon glyphicon-refresh"></span><small>{{nextTick|date: 'mediumTime'}}</small></button>
</div>
and result appears as:
My question is: how do I align the button at the center of the panel?
PS: It should be inside the green panel.
First of all, remove float: right. Then text-align: center should do the job:
.panel-footer {
background-color: #B7B56E;
text-align: center;
}
<div class="panel-footer rounded">
<button class="btn btn-xs rounded" (click)="refreshNow()"><span class="glyphicon glyphicon-refresh"></span><small>12 Oct 2017</small></button>
</div>
Delete float from button and add text-align: center to div element.
Here you go. Full bootstraps' classes used with no tricks. Just adding align-items-center solves the problem. But do not use the float style itself. If you use the CSS framework, please be so kind to read the docs. There are a lot of features which are enough for not to manipulate the styles for layout.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row align-items-center bg-info">
<button class="col btn btn-outline-primary">Hello I'm centered</button>
</div>
</div>
you can do the following if you still want the button to be floated right, but centered vertically inside of your panel-footer div
.panel-footer {
background-color: #B7B56E;
overflow: auto;
}
.btnClass {
float: right;
}
<div class="panel-footer rounded">
<button class="btn btn-xs rounded btnClass" id="button" (click)="refreshNow()"><span class="glyphicon glyphicon-refresh"></span><small>12 Oct 2017</small></button>
</div>
This button-group just doesn't want to be aligned. I've tried to add pull-right, text-right, float-right bootstrap classes to btn-group div. I've tried to change text-align, padding, margin, float css properties for buttons class. Nothing helps. Only if I set padding-left value like padding-left: 28px. But that's not what I'm looking for. I need a solution for general case but not to experiment with how much pixels needed for padding-left value.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row issue">
<div class="title col-md-7">
Google
</div>
<div class="buttons btn-group col-md-5">
<button class="btn btn-success btn-sm">PR</button>
<button class="btn btn-danger btn-sm">DEL</button>
</div>
</div>
bootstrap 4
<div class="text-right">
<div class="buttons btn-group col-md-5">
<button class="btn btn-success btn-sm">PR</button>
<button class="btn btn-danger btn-sm">DEL</button>
</div>
</div>
Bootstrap by default applies float:left to buttons in a button group. But overwriting that with float:right works perfectly fine ... but than you will have the effect of the elements showing up in reverse order.
If you don’t want that, you can set float: none - and use text-align on the parent element to align the inline buttons.
.buttons { display: block; text-align: right; }
.buttons .btn { float: none; }
https://jsfiddle.net/Lhfhaa2a/1/
I added display:block for the parent element as well here, so that it takes the full width on smaller screen resolutions, too (it originally has display: inline-block set, but that would make it as wide as its content requires only - and if it is only as wide as the buttons make it, you can’t “align” them to either side any more.)
flex is the best way:
<div style="display:flex">
<div> <button>PR</button></div>
<div> <button>DEL</button></div>
</div>
This aligns the buttons. You can play around this. Do you want spaces? aligned right?
The flexbox method is superior to the float method, which might cause unwanted side-effects.
Bootstrap v5
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"/>
<div class='row g-0'>
<div class='col-md-5 w-auto ms-auto'>
<button class="btn btn-success btn-sm">PR</button>
<button class="btn btn-danger btn-sm">DEL</button>
</div>
</div>
Bootstrap v4.6.0:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"/>
<div class='row no-gutters'>
<div class='col-md-5 w-auto ml-auto'>
<button class="btn btn-success btn-sm">PR</button>
<button class="btn btn-danger btn-sm">DEL</button>
</div>
</div>
Issue screenshots:
I'm seeing this issue in a few of my divs. Everything looks fine on desktop until I test it out on an iPad. The div does not seem to wrap my content despite my attempt to use < span class="clearfix" ></span> before closing the div.
This is how the code looks like
<div class="span8">
<div class="box datepickerbox">
<span class="daterange_title span3">Activity summary for </span>
<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
<i class="icon-calendar icon-large"></i> <b class="caret" style="margin-top: 8px"></b>
</div>
<span class="clearfix"></span>
</div>
</div>
All you need to change is
<span class="clearfix"></span>
to
<div class="clearfix"></div>
and Bootstrap clearfix rules do not specify the elemnt to be displayed as a block element and that's what you are missing.
I am using twitter bootstrap. Here is my code:
<div class="control-label">
We
<div class="btn-group">
<a href="javascript:;" data-toggle="dropdown" class="btn dropdown-toggle">
<span>search</span> <span class="caret"></span>
</a>
</div>
Something
</div>
http://jsfiddle.net/3j7QP/
How can I make the texts and the button appear in one line aligned to the left using thw twitter bootstrap classes?
Classes only
Btn toolbar
If you want to stick strictly to classes, you can try .btn-toolbar but you won't have the vertical alignment.
Demo btn-toolbar
<div class="control-label btn-toolbar">
<!-- ... -->
</div>
Floating
Floating doesn't seem to be an appropriate solution because you loose the line continuity. So you shouldn't use .pull-left.
CSS
Otherwise there are several solutions :
No btn-group
First of all you could remove the div.btn-group since apparently you are not using it.
Demo no div
Inline blocks
Or you could use display: inline-block; on all elements (but you should enclose text in blocks).
Demo inline blocks
.myClass > div {
vertical-align: middle;
display: inline-block;
}
<div class="control-label myClass">
<div>We</div>
<div class="btn-group"><!-- ... --></div>
<div>Something</div>
</div>
I have a button generated by backbone.js and jQuery.tmpl() and width of the button is variant. I want to put it in a span6 div. Code is shown below:
<div class="row">
<div class="span6">
<button class="btn primary large">
BLABLABLA
</button>
</div>
<div class="span10">
...
</div>
</div>
I don't know how to make the button centered in the div.
Im no CSS guru but this does the trick for me (centers the button within the span6):
<div class="row">
<div class="span6" style="text-align:center">
<button class="btn primary large">
BLABLABLA
</button>
</div>
</div>
More info on centering can be found here.
A bit late but you can use the pagination-centered class from bootstrap
<div class="span6 pagination-centered">
<button class="btn primary large">
BLABLABLA
</button>
</div>
What about <a> tags?
If you have an <a> tag button, then the other approaches won't work, as a.btn has a float: left attribute in the bootstrap source.
<div style="text-align: center;">
Button text
</div>
This can be undone 2 ways.
Solution 1
Add a custom less file and import bootstrap.
bootstrap-custom.less
#import "bootstrap.less";
a.btn {
float: none !important;
}
And then compile your custom less file, or simply specify it in another CSS file:
styles.css
a.btn {
float: none !important;
}
Solution 2
Simply do it inline using style="float: none;":
<div style="text-align: center;">
Button text
</div>
Other Solution
<div class="row-fluid pagination-centered">
Button
</div>
<div class="clearfix"></div>
I had this same issue, I wrapped the in
<a class="btn btn-primary" href="#" role="button">Text Here</a>
Became
<div class="text-center">
<a class="btn btn-primary" href="#" role="button">Text Here</a>
</div>