The following code displays differently in Chrome and Firefox:
#category-chooser {
width: 600px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="btn-group-vertical" id="category-chooser">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<div class="btn-group">
<button class="btn btn-default">
a lot of content... foo bar foo bar
</button>
</div>
<div class="btn-group" role="group" id="choose-furniture">
<button class="btn btn-default">
short
</button>
</div>
</div>
<div class="btn-group btn-group-justified" data-toggle="buttons">
<div class="btn-group">
<button class="btn btn-default">
short
</button>
</div>
<div class="btn-group">
<button class="btn btn-default">
a lot of content... foo bar foo bar
</button>
</div>
</div>
</div>
The bootstrap classes seem to do something strange here. However, on the bootstrap page, the example seems to work fine across browsers.
In Chrome, the "columns" are spaced out proportionally to the content. In Firefox, all columns have the same width.
btn-group-justified makes use of display: table, however that CSS is overridden by btn-group-vertical to display: block. I guess browsers handle btn-group (display: table-cell) differently when the parent container does not display as table.
Your codes look fine, the Bootstrap sample does not show mixed use of btn-group-vertical and btn-group-justified. I believe it is the limitation not described.
I would suggest removing btn-group-vertical and adjust the border-radius yourself.
Related
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>
For some reason, buttons don't work when they are inside specific HTML tags. They can't be clicked, even when:
a. the classes applied are exactly the same as the buttons that do work, and b. the tags that they are in are also exactly the same as the ones that do work. Commented examples below:
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3 class="text-left">The European What?</h3>
<h4 class="text-left">The European Union</p>
<p class="text-left">A bunch of important people from different countries gathered and thought it would be productive to work together. So now in Europe there are 28 countries that act like they’re one.</p>
<!-- This button works -->
<button class="btn lesson-toc" type="button" data-toggle="modal" data-target="#myModal"><i class="material-icons icon-align">list</i>Table of Contents</button>
</div>
</div>
</div>
</header>
<section id="lesson" style="position:relative;overflow-y:scroll" data-spy="scroll" data-target="#toc">
<div class="container">
<div class="row">
<!-- This button doesn't work -->
<button class="btn lesson-toc" type="button" data-toggle="modal" data-target="#myModal">
<i class="material-icons icon-align">list</i>
</button>
<div class="col-xs-12 text-center">
<h5>How was the EU Formed? This is very long.</h5>
</div>
</div>
</div>
<!-- This button works -->
<button class="btn lesson-toc" type="button" data-toggle="modal" data-target="#myModal">
<i class="material-icons icon-align">list</i>
</button>
I found out it was that the .lesson-toc class had a CSS property of position: absolute; and the z-index was pushing it below something else so it became unclickable. It was only broken in that specific div because in the other ones, there was nothing of higher z-index value to cover it.
Using bootstraps btn-group-justified layout I have a group of buttons that looks like this:
But I need it to look something like this:
Is it possible to change bootstraps justified layout to accommodate something like this?
I know I can do it without using bootstraps justified layout, but I do need the button groups to take up the whole width and be the same width as other button groups.
The btn-group-justified class has a fixed table-layout so the child elements with a btn-group class act like table cells. You just need to change their width.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
body {
margin-top: 10px;
}
.btn-group-justified > .btn-group:nth-of-type(odd) {
width: .25%;
}
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="btn-group btn-group-justified" role="group" aria-label="">
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus-sign"></span></button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default"><span class="badge">1</span> Bottle Mango</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus-sign"></span></button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default"><span class="badge">1</span> Bottle Junk</button>
</div>
</div>
</div>
</div>
</div>
I have created a tile using Bootstrap. Inside the tile, near to the bottom I want three buttons (start, middle and end) of the tile.
I made the start and end buttons but using two div tags with pull-left and pull-right classes. Now what I want is to place the middle button.
Here's a part of my code and a screenshot:
<div class="col-lg-12">
<div class="pull-left">
<button class="btn btn-primary btn-sx" type="button">Confirm</button>
</div>
<!-- I want another button here, center to the tile-->
<div class="pull-right">
<button class="btn btn-primary btn-xs pull-right" type="button">Decline</button>
</div>
</div>
Use this option:
<div class="text-center">
<button class="btn btn-primary btn-sx" type="button">
Confirm
</button>
</div>
One Bootstrap's most powerful features is nesting row elements. Every col-* container can have another row inside it, which then provides another full set of 12 col spaces:
<div class="col-lg-12">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-primary btn-sx" type="button">Confirm</button>
</div>
<div class="col-xs-4">
<button class="btn btn-primary btn-xs" type="button">Middle Button</button>
</div>
<div class="col-xs-4">
<button class="btn btn-primary btn-xs" type="button">Decline</button>
</div>
</div>
</div>
I'm not sure how your pull-* classes exactly work, but using Bootstrap's built-in grid system you should be able to get rid of those.
Don't miss the Bootstrap guide on nesting columns, as it provides way more information than this answer.
You're using bootstrap I presume, so your best bet and practice would be to take advantage of its' grid system.
Make a div with a class called row and divide the children inside of that parent div into the content you want.
The way this division works is that the number behind col-[size]- decides how much of the horizontal space it will take up. In the end it has to add up to 12, so in your case, we want three parts that are size 4 each.
For example :
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
Then simply put the buttons inside of the col-xs-4 div's and you're ready to go.
that worked for me
<div class="text-center">
<div class="text-center">
<button type="button" class="btn btn-fb btn-outline-primary waves-effect" (click)="doFacebookLogin()" mdbWavesEffect>
<i class="fa fa-facebook left"></i>Facebook</button>
<button type="button" class="btn btn-tw btn-outline-info waves-effect" (click)="doTwitterLogin()" mdbWavesEffect>
<i class="fa fa-twitter left"></i>Twitter</button>
<button type="button" class="btn btn-gplus btn-outline-danger waves-effect" (click)="doGoogleLogin()" mdbWavesEffect>
<i class="fa fa-google-plus left"></i>Google +</button>
</div>
divide the row div in to 3 column divs - col-md-4. Use text-center for the parent div(col-md-4) of each button to solve the issue.
<div class="row">
<div class="col-md-4 form-group text-center">
<button type="button" class="btn btn-primary">B1</button>
</div>
<div class="col-md-4 form-group text-center">
<button type="button" class="btn btn-primary">B2</button>
</div>
<div class="col-md-4 form-group text-center">
<button type="button" class="btn btn-primary">B3</button>
</div>
</div>
I want to have 3 buttons across a row in Bootstrap 3, but when it changes to the xs grid, stack them vertically. I'd like to introduce some spacing (margin) between the buttons - but only when the buttons are stacked vertically. Can I do this in LESS?
<div class="row">
<div class="col-sm-4 btn-vert-block">
<span>
<button type="button" class="btn btn-primary btn-block">Go Back</button>
</span>
</div>
<div class="col-sm-4 btn-vert-block">
<span>
<button type="button" class="btn btn-primary btn-block center-block">Preview</button>
</span>
</div>
<div class="col-sm-4 btn-vert-block">
<span class="">
<button type="button" class="btn btn-success pull-right btn-block">Go Next</button>
</span>
</div>
</div>
It is not neccessary to involve LESS.
You can use this code, for applying margins to .btn-vert-block below 767px width (or any other):
#media (max-width: 767px) {
.btn-vert-block + .btn-vert-block {
margin-top: 10px;
}
}
Demo Fiddle