If I put several Bootstrap 3 buttons in a row:
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
<button class="btn btn-default">Button 3</button>
there is a small space between them. Where does it come from and how to remove it without using float? According to the Firebug and Chrome Inspector the buttons haven't any margin applied to them.
The newline between the buttons actually causes the space. Observe:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-default">Button 1</button><button class="btn btn-default">Button 2</button><button class="btn btn-default">Button 3</button>
There is a button-group rule you can use if you want the buttons visually grouped: http://getbootstrap.com/components/#btn-groups
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
I believe you style your buttons display:inline-block; or inline. By default they create spaces if you have newline character.
So to remove it, put those markups next to each other without newline char.
It would get messy, but will get what you want without having a style float
So do it like this :
<button class="btn btn-default">Button 1</button><button class="btn btn-default">Button 2</button><button class="btn btn-default">Button 3</button>
Related
This question already has answers here:
Two inline-block elements, each 50% wide, do not fit side by side in a single row
(9 answers)
Closed 5 years ago.
I have tried to inspect a "Buttons" example from Bootstrap 4. They have a nice-looking row of buttons, like this:
http://getbootstrap.com/docs/4.0/components/buttons/
But I don't understand, where does the space between buttons is coming from.
This is not margin, not flex-box aligning, not a transparent border.
So, how it works? Actually, I disabled all the styles in dev-tools, but that space did not disappear.
The space is there because there's whitespace between the HTML elements. If you remove the whitespace, the buttons will be positioned next to each other.
Note that whitespace (newline) between the elements is condensed to a single space by the browser.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
Now if we remove the whitespace:
<button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button>
If you check with firefox the space coming from here please check screenshot:
You can remove the space by adding your own css rule like merging or padding.
Thanks
The space is coming because buttons are inline elements by default...it is not a bug..its just the way inline elements align in browsers...
So remove all the space from your coding is a solution, which I don't think I will do, because if you are coding your code should look good...right..
As you are using bootstrap4 you can use bootstrap d-flex class
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="parent d-flex">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
</div>
Another solution is you can set the font-size of the parent of buttons to 0 and then set the font-size of buttons to the default one
Stack Snippet
.parent {
font-size: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="parent">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
</div>
You can solve it using simple parent element to flex
<div class="button">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
</div>
<style>
.button{
display: flex;
}
.button > button{
display: inline-block;
}
</style>
How can I adjust the length of bootstrap buttons without adjusting its width/height? Whenever I adjust the width, It gives me wrong output.
<button type="button" class="btn btn-primary">Primary</button>
It's not clear what you mean by "length" but Bootstrap has set sizes for it's buttons
"extra-small", "small", "default" and "large"
as defined by btn-xs btn-sm, btn-default and bth-lg
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-xs btn-primary">Primary</button>
<button type="button" class="btn btn-sm btn-primary">Primary</button>
<button type="button" class="btn btn-default btn-primary">Primary</button>
<button type="button" class="btn btn-lg btn-primary">Primary</button>
However, there is noting to stop you adding your own customer widths by adjusting the left/right padding.
EG.
.btn-wide {
padding-left: 3em;
padding-right: 3em;
}
JSfiddle Demo
I have a button group containing 10 buttons. Under certain screen widths (responsive) I hide some of these buttons with media queries.
The problem is that if I hide the last button the new last button's edges do not become rounded.
It's a difficult problem to describe, but very easy to show in a Fiddle.
My question: how can I add the rounded corners to the last visible button in the button group, rather than simply the last button, as it currently is.
Code from Fiddle below, as per SO's rules:
<div class="btn-group" id="sortBtns" role="group">
<button type="button" class="btn btn-default">First</button>
<button type="button" class="btn btn-default">Second</button>
<button type="button" class="btn btn-default">Third</button>
<button type="button" class="btn btn-default">Fourth</button>
<button type="button" class="btn btn-default">Fifth</button>
<button type="button" class="btn btn-default">Sixth</button>
</div>
<div class="btn-group" id="sortBtns" role="group">
<button type="button" class="btn btn-default">First</button>
<button type="button" class="btn btn-default">Second</button>
<button type="button" class="btn btn-default">Third</button>
<button type="button" class="btn btn-default">Fourth</button>
<button type="button" class="btn btn-default">Fifth</button>
<button type="button" class="btn btn-default" style="display:none;">Sixth</button>
</div>
Note the lack of rounded corners on 'fifth' in the second button group.
I can do this using JavaScript by adding a new class to the last visible element, but I'd rather not. Is there a cleaner CSS-only solution?
If you don't mind adding a dependency, I recommend AngularJS' ng-if. It comes in handy when using css selectors that rely on an element's position within the DOM, such as the :first-child or :last-child pseudo-classes. It will remove the element from the DOM and allow you to achieve your goal.
Here's a solution using jQuery:
$('.btn-group').has('.btn:hidden').find('.btn').css('border-radius', 0);
$('.btn-group').has('.btn:hidden').find('.btn:visible:first').css({
'border-top-left-radius': '3px',
'border-bottom-left-radius': '3px',
});
$('.btn-group').has('.btn:hidden').find('.btn:visible:last').css({
'border-top-right-radius': '3px',
'border-bottom-right-radius': '3px',
});
For each button group with hidden buttons, this will remove the border radii for all buttons within, and then add back border radii for the first and last visible buttons.
OP's Fiddle with solution
One option is to simply duplicate the code and add an hidden-xs class the first code block and visible-xs to the other code block.
Like this:
<div class="btn-group hidden-xs" id="sortBtns" role="group">
<button type="button" class="btn btn-default">First</button>
<button type="button" class="btn btn-default">Second</button>
<button type="button" class="btn btn-default">Third</button>
<button type="button" class="btn btn-default">Fourth</button>
<button type="button" class="btn btn-default">Fifth</button>
<button type="button" class="btn btn-default">Sixth</button>
</div>
<div class="btn-group visible-xs" id="sortBtns2" role="group">
<button type="button" class="btn btn-default">First</button>
<button type="button" class="btn btn-default">Fifth</button>
<button type="button" class="btn btn-default">Sixth</button>
</div>
Another option is to apply the css rule to the edgy element:
.edgy-right-element {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
I'm using Bootstrap 2.3.2 and I can't seem to get radio buttons to work. I'm using the code from Bootstrap's website:
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
What do I need to do from here? With this I get 3 buttons, but clicking them doesn't change them to active and they don't look like they've been clicked.
EDIT:
If I initialize the buttons in JS like so:
$('.btn-group').button();
This markup is generated for the group:
<div class="btn-group ui-button ui-widget ui-state-default ui-corner-all
ui-button-text-only" data-toggle="buttons-checkbox"
role="button" aria-disabled="false">
<span class="ui-button-text">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</span>
</div>
Compared to this on the bootstrap website:
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary active">Right</button>
</div>
Not sure why it's working different here.
Looking in Bootstrap 2.3.2 doc (see Usage section), you need to initialize your buttons :
$('.btn-group').button();
Working example based on your code
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
Make sure to incluse the right class names and attach the stylesheet in the header
I want a button to take up the full width of the column, but having difficulties...
<div class="span9 btn-block">
<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div>
How do I make the button as wide as the column?
Bootstrap v3 & v4
Use btn-block class on your button/element
Bootstrap v2
Use input-block-level class on your button/element
Why not use the Bootstrap predefined class input-block-level that does the job?
Full-Width Button <!-- BS2 -->
Full-Width Button <!-- BS3 -->
<!-- And let's join both for BS# :) -->
Full-Width Button
Learn more here in the Control Sizing^ section.
Bootstrap / CSS
Use col-12, btn-block, w-100, form-control or width:100%
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-success col-12">
class="col-12"
</button>
<button class="btn btn-primary w-100">
class="w-100"
</button>
<button class="btn btn-secondary btn-block">
class="btn-block"
</button>
<button class="btn btn-success form-control">
class="form-control"
</button>
<button class="btn btn-danger" style="width:100%">
style="width:100%"
</button>
In case some are noticing btn-block not working anymore in bootstrap 5.1+:
It was dropped in bootstrap 5.1 (changelog):
Breaking Dropped .btn-block for utilities. Instead of using .btn-block
on the .btn, wrap your buttons with .d-grid and a .gap-* utility to
space them as needed. Switch to responsive classes for even more
control over them. Read the docs for some examples.
You can now make a button full width by adding the class w-100, as the authors do in their official Pricing example page:
<button type="button" class="w-100 btn btn-lg btn-outline-primary">
Sign up for free
</button>
Source: https://getbootstrap.com/docs/5.1/examples/pricing/
If you want to make a stack of block buttons, the official docs recommend the following :
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
Source: https://getbootstrap.com/docs/5.1/components/buttons/#block-buttons
I simply used this:
<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</button>
</div>
use
<div class="btn-group btn-group-justified">
...
</div>
but it only works for <a> elements and not <button> elements.
see: http://getbootstrap.com/components/#btn-groups-justified
You should add these styles to a CSS sheet
div .no-padding {
padding:0;
}
button .full-width{
width:100%;
//display:block; //only if you're having issues
}
Then change add the classes to your code
<div class="span9 btn-block no-padding">
<button class="btn btn-large btn-block btn-primary full-width" type="button">Block level button</button>
</div>
I haven't tested this and I'm not 100% sure what you want, but I think this will get you close.
In Bootstrap 5, the class btn-block doesn't work anymore. But instead, you can add the class w-100 to the button to make it as wide as its container.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row"><div class=" col-5 ">
<a class="btn btn-outline-primary w-100 " href="# "><span>Button 1</span></a>
</div><div class="col-5 ">
<a class=" btn btn-primary w-100 weiss " href="# "><span>Button 2</span></a>
</div></div>
I would have thought this would be the most bootstrap-esque way of doing things:
<button type='button' class='btn btn-success col-xs-12'> First buttton baby </button>
All I'm doing is adding the class col-xs-12 to the button.
<div class="col-md-9">
<button class="btn btn-block btn-primary" type="button">Block level button</button>
</div>
In Bootstrap 3, this should be all you need. I believe btn-large was overriding the width of btn-block.
Update 2022:
You have multiple ways to make button full width.
You can add the w-100 to the class.
You can add d-grid and gap-2to a container above the button:
<div class="d-grid gap-2"> <!-- Here -->
<button class="btn btn-primary" type="button">Button</button>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-success col-12">
class="col-12"
</button>
<button class="btn btn-primary w-100">
class="w-100"
</button>
<button class="btn btn-secondary btn-block">
class="btn-block"
</button>
<button class="btn btn-success form-control">
class="form-control"
</button>
<button class="btn btn-danger" style="width:100%">
style="width:100%"
</button>
We can Use a Block Level Full-Width Button
Create block level buttons—those that span the full width of a parent—by adding .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">
Block level button
</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">
Block level button
</button>