I've managed to place a button group at the far side of a header (H1/H2/H3). However, I don't know how to make the button float vertically in the middle. It just stays at the top. I tried using margin-top but since it's a fixed value it won't be dynamically placed in the middle.
Here's the screenshot:
Here's the code:
<div class="container">
<section>
<div class="page-header">
<h1 class="pull-left">
The header
</h1>
<div class="pull-right">
<div class="btn-group">
<button class="btn btn-primary">
Actions
</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li>
Action
</li>
<li>
Another Action
</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
Contents
</section>
</div>
jsFiddle: http://jsfiddle.net/aurorius/PKrUC/
This how to get a button lined up with the header in Bootstrap 3.2, 3.3 without any additional CSS in case anyone is coming here from Google.
Option 1
http://jsfiddle.net/ypaL5nko/
<div class='page-header'>
<div class='btn-toolbar pull-right'>
<div class='btn-group'>
<button type='button' class='btn btn-primary'>Button Text</button>
</div>
</div>
<h2>Header Text</h2>
</div>
The button group is optional if you're only using a single button.
Option 2
http://jsfiddle.net/sLdnae3q/
<h1>
<span>Header Text</span>
<button class='btn btn-primary pull-right'>Button Text</button>
</h1>
<hr/>
Try this css code
.btn-group.my-class{
bottom: 15px;
position: relative;
top: 15px;
}
Dynamic header on H1/H2/H3 and may be H4
Demo: http://jsfiddle.net/PKrUC/2/
Using a float disables te display:inline-block; property, making it float to the top.
Just add the bootstrap class text-right to the container to keep the vertical align intact.
Related
I have this modal header and wish to add the "download" button to the right of the text "Optimize data". Here is my code for the same but everytime it aligns to the below of the modal header text. I have also tried float and align properties but it didnt seem to work.
<div class="modal-header">
<h3 class="align:left" translate>{{Title}}</h3>
<div class=align:"right">
<button type="button" class="btn btn-info" id="downloadLog" translate>Download Log</button>
</div>
</div>
The modal-header in Bootstrap 4 is display:flex. Use ml-auto to push the button to the right...
<div class="modal-header">
<h3>Title</h3>
<div class="ml-auto">
<button type="button" class="btn btn-info" id="downloadLog" translate>Download Log</button>
</div>
</div>
https://www.codeply.com/go/qPMA41arJV
<h3> is an element that use the entire line so you should add an row, and two columns and then you will can do that
<div class="row">
<div class="col-8">
<h3>Text</h3>
</div>
<div class="col-4">
<button>Button here</button>
</div>
</div>
bootstrap it self has class "input-group"
You can use that as below.
<div class="input-group">
<span>
<a href="#" />
</span>
</div>
This is my website html:
<div class="row">
<a href="#" class="btn btn-danger btn-lg">Text
</a>
</div>
Do I have to change my html? or add a class in my css?
Little changes in your html structure are required
<div class="row">
<div class="col">
<a href="#" class="btn btn-danger btn-lg">Text
</a>
</div>
</div>
I'm facing this problem with a Bootstrap-select (https://github.com/silviomoreto/bootstrap-select) dropdown list:
As you can see the dropdown is displayed behind the second element (the second div with green background).
This second div is created with this simple code:
<div class="col-md-7" style="height:100%">
<div id="prt-form-container" class="prt-vertical-align">
[...]
</div>
</div>
col-md-7 is a standard Bootstrap class.
The dropdown list code is:
<div class="btn-group bootstrap-select form-control prt-form-control open">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Indica la professione" aria-expanded="true"><span class="filter-option pull-left">Indica la professione</span> <span class="bs-caret"><span class="caret"></span></span></button>
<div class="dropdown-menu open" style="max-height: 178px; overflow: hidden;">
<div class="bs-searchbox"><input type="text" class="form-control" autocomplete="off"></div>
<ul class="dropdown-menu inner" role="menu" style="max-height: 130px; overflow-y: auto;">
[...]
</ul>
</div>
</div>
How can I correctly show the dropdown list?
Have styled a twitter bootstrap button to be centered in a thumbnail, and when the CSS is Inline (header or body) it works perfectly, but after moving the styles to an External stylesheet the button is left-aligned..
All the other styles that were inline and moved to an external sheet work perfectly..
Here's a bootply showing a centered-aligned button via an inline style:
http://bootply.com/65903
If you move the style to an external stylesheet, the button will not be centered..
Please advise!
Here's the CSS Style:
<style> #centered {text-align: center;} </style>
Here's the HTML:
<div class="full span8" id="centered">
<div class="row-fluid">
<ul class="thumbnails">
<li class="span3" id="thumbnail-width">
<div class="thumbnail">
<div id="image"></div>
<div class="caption" id="caption-color">
<div id="header">
<h1>
Header
</h1>
</div><br>
</div>
<p>
<div class="btn-group">
<button class="btn btn">Button</button>
<button class="btn btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
</ul>
</div><!--/View-->
</p>
</div>
</li>
</ul>
</div><!--/row-->
</div><!--/span-->
Try this:
<div class="full span8 text-center" id="centered">
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>