I use Bootstrap 3 and the grid system. I have following HTML to display a sort of navigation.
The problem is my button group cannot be centered. I already tried the built in class "center-block" and different CSS approaches, but failed.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="btn-group btn-group-lg">
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
</div>
</div>
</div>
</div>
<p class="text-center">Center aligned text.</p>
This will align contents in Bootstrap.
Taken directly from the bootstrap documentation.
You can center the button group div by applying
display:inline-block
Then applying to the parent div
text-align:center
Example here: http://jsfiddle.net/u7g3p/
You can assign text-akign: center; to the class .btn-group
DEMO http://jsfiddle.net/D2RLR/6159/
You can add a class 'text-center' which is bootstrap default class to define text-align:center,
But 'btn-group' class in bootstrap is defined as display:inline-block by default, so width of this div wont be 100% to make your inner links center align.
How to fix -
DOM changes, add class text-center to this div- <div class="btn-group btn-group-lg text-center">
CSS changes -
.btn-group{
width:100% (or) display:block;
}
Just add 'text-center' class to the 'btn-group' parent.
<div class="col-xs-12 text-center">
<div class="btn-group btn-group-lg">
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
</div>
</div>
Alternatively you can add tag before and after the div
<center>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="btn-group btn-group-lg">
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
</div>
</div>
</div>
</div>
</center>
Here's a modified link :http://jsfiddle.net/sunilkjt/4bq1f320/
Thanks
Related
I have 3 divs, I want to align "div2" to the center of the page and "div3" at the end while being in the same row.
I've been trying some things like the "d-flex justify-content-center" that I'm currently using or making "div1" a row and giving "div3" the class "ml-auto" but then I don't know how to align "div1" to the center.
I'm using Bootstrap 5.
My actual result
<div class="text-center mt-2" id="div1">
<div class="d-flex justify-content-center" id="div2">
<a class="btn btn-lg btn-success" href="#"> Link 1 </a>
</div>
<div class="d-flex justify-content-end" id="div3">
<a class="btn btn-lg btn-info" href="#"> Link 2 </a>
<a class="btn btn-lg btn-info" href="#"> Link 3 </a>
</div>
</div>
One way is to use nested flexbox items. For this you'll need an empty spacer for the left, and each child item needs flex: 1:
.flex1 {
flex: 1;
}
<div class="text-center mt-2 d-flex w-100" id="div1">
<div class="d-flex flex1"><!--spacer --></div>
<div class="d-flex flex1 justify-content-center" id="div2">
<a class="btn btn-lg btn-success" href="#"> Link 1 </a>
</div>
<div class="d-flex flex1 justify-content-end" id="div3">
<a class="btn btn-lg btn-info" href="#"> Link 2 </a>
<a class="btn btn-lg btn-info" href="#"> Link 3 </a>
</div>
</div>
dead center using flexbox nesting
Another way is to use absolute position:
<div class="text-center mt-2 d-flex justify-content-center" id="div1">
<div class="d-flex" id="div2">
<a class="btn btn-lg btn-success" href="#"> Link 1 </a>
</div>
<div class="ms-auto position-absolute end-0" id="div3">
<a class="btn btn-lg btn-info" href="#"> Link 2 </a>
<a class="btn btn-lg btn-info" href="#"> Link 3 </a>
</div>
</div>
dead center using absolute position
Read more: aligning flexbox items is explained here
This solution should help you:
div2 is in the center of the row
div3 is at the end of the row
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-end" id="div1">
<div id="div2" class="position-absolute" style="left:50%;width:100px;margin-left:-50px">
<a class="btn btn-lg btn-success" href="#"> Link 1 </a>
</div>
<div id="div3">
<a class="btn btn-lg btn-info" href="#"> Link 2 </a>
<a class="btn btn-lg btn-info" href="#"> Link 3 </a>
</div>
</div>
Here is my code :
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-2">
<h2><span class="label label-primary" id="notify">Notifications</span><h2>
</div>
<div class="col-sm-9 col-md-10">
<!-- Split button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh">
<span class="glyphicon glyphicon-refresh"></span> </button>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default">
Mark all as read
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
Delete
</button>
</div>
</div>
</div>
<hr>
</div>
And Here is the fiddle.
https://jsfiddle.net/SimplytheVinay/0g8fm8u6/
I tried multiple combination of classes. Even setting the height of Label manually doesn't work. Somehow label is occupying more height than its size. Tried setting margins as well. No Luck.
Pretty new to web development, So correct me If I am missing anything.
You can set the H2 also for the button https://jsfiddle.net/7n0t19hr/
<div class="col-sm-9 col-md-10">
<h2>
<!-- Split button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh">
<span class="glyphicon glyphicon-refresh"></span> </button>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default">
Mark all as read
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
Delete
</button>
</div>
</h2>
</div>
</div>
<hr>
</div>
The problem is that you are not closing the h2 tag.
<h2><span class="label label-primary" id="notify">Notifications</span><h2>
See. Fix that and you will be able to manipulate the height and padding or whatever.
I've read the docs on this subject and tried several solutions.
I am looking for a way to align 3 bootstrap buttons in a button group where the first 2 buttons only take the width needed for their content and the last button takes the full width of its parent container.
Plunker: http://plnkr.co/edit/fxpcJE018kW1d72tK9Nn?p=preview
<div class="col-md-12">
<div class="btn-group-justified">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-move"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span>
</button>
<div class="btn btn-default btn-block">Expand this div button to full width</div>
</div>
</div>
Using a little jQuery it is simple to get what you want:
HTML:
<div id="my-row" class="col-md-12 row">
<button type="button" id="btn1" class="btn btn-default">
<span class="glyphicon glyphicon-move"></span>
</button>
<button type="button" id="btn2" class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span>
</button>
<div class="btn btn-default stretch">Expand this div button to full width</div>
CSS:
#my-row{
padding: 0px;
margin: 0px;
}
jQuery:
var width = $('#my-row').width()-($('#btn1').width() + $('#btn2').width()+60);
$( "div.stretch" ).css( "width", width);
$( window ).resize(function() {
var width = $('#my-row').width()-($('#btn1').width() + $('#btn2').width()+60);
$( "div.stretch" ).css( "width", width);
});
JsFiddle:
JsFiddle
This solution can give solution
<div class="row">
<div class="col-md-12">
<div class="btn-group-justified"id="b">
<button type="button" class="btn btn-default"id="a">
<span class="glyphicon glyphicon-move"></span>
</button>
<button type="button" class="btn btn-default"id="aa" >
<span class="glyphicon glyphicon-plus"></span>
</button>
<div class="btn btn-default btn-block"id="aaa">Expand this div button to full width</div>
</div>
</div>
</div>
</body>
css
#aaa{
width:100%;
clear:right;
}
#a{
float:left;
}
#aa{
float:left;
}
jsfiddle
I am trying to use Bootstrap to quickly whip up a small internal site and I'm having some issues with a specific layout on it's home page.
I have two rows and the first row is filled with link anchors dressed up as buttons. I want them all to be the same width and height, word wrap their contents and have a strong 'title' text with summary text, all text vertically aligned to the middle of the button.
I've achieved fixed width buttons and word wrap but I can't work out where to go from here to get them all the same height and then, of course, vertically align that text to the middle. I'm sure that line break element isn't helping things either.
HTML
<div class="container">
<div class="row">
<div class="col-md-2">
<a href="#" class="btn btn-default btn-lg btn-fill" role="button">
<strong>Button A</strong><br/>
<span>Long Summary That's Annoyingly Long</span>
</a>
</div>
<div class="col-md-2">
<a href="#" class="btn btn-default btn-lg btn-fill" role="button">
<strong>Button B</strong><br>
<span>Very Long Summary</span>
</a>
</div>
</div>
</div>
CSS
.btn-fill {
width: 100%;
white-space: normal;
}
I have a Bootply example here
You could use .btn-toolbar with .btn-group-justified to make it easily (the rendering differs a little bit) :
<div class="container">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
<a href="#" class="btn btn-default" role="button">
<strong>Part A</strong><br>
<span>Summary</span>
</a>
<a href="#" class="btn btn-default" role="button">
<strong>Part B</strong><br>
<span>Very Long Summary</span>
</a>
<a href="#" class="btn btn-default" role="button">
<strong>Part D</strong><br>
<span>Summary</span>
</a>
<a href="#" class="btn btn-default" role="button">
<strong>Part E</strong><br>
<span>Long Summary That's Annoyingly Long</span>
</a>
<a href="#" class="btn btn-default" role="button">
<strong>Part F</strong><br>
<span>Summary</span>
</a>
<a href="#" class="btn btn-default" role="button">
<strong>Part G</strong><br>
<span>Very Long Summary</span>
</a>
</div>
</div>
</div>
.btn-group-fill-height .btn {
white-space: normal;
}
Bootply
Why not add "text-center" to the anchor class and do something like:
.btn {
height: 170px;
}
For the height problem you're running into. That's an arbitrary number I picked but it worked when I punched it into your example.
Hope that helps.
I'm trying to learn some bootstrap 3, and i'm trying to add a group of two buttons to a panel heading for those Collapse-Accordion's.
I want to be able to line the title of the panel to the left, and the btn-group lined to the right.
I have tried to add pull-left for the title, and pull-right for the button group, but this will not result in something pretty...
Adding for example: style="margin-left:200px;" to the <span>, will work, but when i add more panels, with different names, there will be another number of px for that margin...
Here is a link to my JSfiddle.
Where i go wrong is probably somewhere here: Not sure if i can use the <span> within the <h4>, and for this purpose of mine?
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Click me...
</a>
<span class="btn-group">
<button class="btn btn-default">ON</button>
<button class="btn btn-primary active">OFF</button>
</span>
</h4>
</div>
pls try the below code, and here is the fiddle
<div class="panel-heading">
<h4 class="panel-title">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Click me...
</a>
</div>
<div class="col-md-6 text-right">
<span class="btn-group">
<button class="btn btn-default">ON</button>
<button class="btn btn-primary active">OFF</button>
</span>
</div>
</div>
</div>
</h4>
</div>
if you change some of the css rules for the panel-head and btn-group it work.
.btn-group{
position: absolute;
right: 8px;
top: 8px;
}
.panel-heading{
position: relative;
}
http://jsfiddle.net/q8qCW/1/
I would suggest, not to add these rules to every panel-head and btn-group ^^. I also change the size of the btn-group to.
btn-group-xs
It is not a very dynamic way if doing it, but gets the job done.
Other sizes of btn-groups are possible, but require different top and right css rules.
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Click me...
</a>
<span class="btn-group col-md-offset-9">
<button class="btn btn-default">ON</button>
<button class="btn btn-primary active">OFF</button>
</span>
Hi i have forked your code to js fiddle and added some class and media queries(for idea), please try to improve media queries as well.
you can find it here
How about using a list-inline..
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<ul class="list-inline">
<li class="col-xs-12">
<span class="btn-group pull-right">
<button class="btn btn-default">ON</button>
<button class="btn btn-primary active">OFF</button>
</span>
<h4>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Click me...
</a>
</h4>
</li>
</ul>
</div>
</div>
</div>
Demo: http://bootply.com/92157