I need to align the B1 button on the left side and the remaining elements on the right side.
Here is my code (I'm using Bootstrap 4.1):
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="modal-footer">
<div class="clearfix">
<button type="button" id="b1" class="btn btn-primary float-left">B1 ACTION</button>
<div class="float-right">
<button type="button" id="b2" class="btn btn-primary">B2 ACTION faltas</button>
B3 ACTION
<button type="button" id="b4" class="btn btn-primary btn-danger">B4 ATION</button>
</div>
</div>
</div>
Unfortunately, the code is not working. Any idea how to do it?
Since the buttons inside .modal-footer which is using flex-box you can add the class justify-content-between beside modal-footer.
Now you don't have to use clearfix and float.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="modal-footer justify-content-between">
<button type="button" id="b1" class="btn btn-primary float-left">B1 ACTION</button>
<div>
<button type="button" id="b2" class="btn btn-primary">B2 ACTION faltas</button>
B3 ACTION
<button type="button" id="b4" class="btn btn-primary btn-danger">B4 ATION</button>
</div>
</div>
I have this HTML:
<h4><span class="label label-default">1546 - some text</span></h4>
<div class="pull-left">
<button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
<button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
<button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>
How can I make <h4> element on the same row with the buttons on the right side?
You have to add the following CSS for the heading <h4>:
h4 {
display:inline-block;
float:left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h4><span class="label label-default">1546 - some text</span></h4>
<div class="pull-left">
<button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
<button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
<button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>
The default value of the display property is block so the heading (<h4>) takes the full width of the parent container. With display: inline-block the heading takes only the space needed.
Bootstrap 3.3
You can set the class .pull-left to the <h4> element. So you don't need additional CSS rules:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h4 class="pull-left"><span class="label label-default">1546 - some text</span></h4>
<div class="pull-left">
<button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
<button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
<button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>
Bootstrap 4.0+
Since Bootstrap 4.0 you have to use .float-left instead of .pull-left:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<h4 class="float-left"><span class="label label-default">1546 - some text</span></h4>
<div class="float-left">
<button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
<button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
<button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>
You have to add some CSS for h4 and pull-left-class:
h4{
display: inline-block;
}
.pull-left{
display: inline-block;
}
example:
https://jsfiddle.net/y6f0ddLg/
How do I make sure that there is spacing between the buttons when i use the following piece of code
<div class="container">
<div class="jumbotron">
<button ng-repeat="char in alphabet" ng-click="filterByAlphabet(char)">{{char}}</button>
<br><br>
<span ng-repeat="genre in genres">
<button class="btn btn-xs" ng-click="filterByGenre(genre)">{{genre}}</button>
</span>
</div>
'btn-toolbar' does the trick in one fell swoop. No manual css'ing required
<div class="btn-toolbar">
<button id="button1" class="btn btn-primary">Button 1</button>
<button id="button2" class="btn btn-primary">Button 2</button>
<button id="button3" class="btn btn-primary">Button 3</button>
</div>
You can use Bootstrap spacing, docs here --> https://getbootstrap.com/docs/4.0/utilities/spacing/
This example uses the class 'mr-2' to add right margins to buttons
<button id="button1" class="btn btn-primary mr-2">Button 1</button>
<button id="button2" class="btn btn-primary mr-2">Button 2</button>
<button id="button3" class="btn btn-primary">Button 3</button>
Use css property margin
button { margin: 5px 5px 5px 5px } //change the value to see the effect and choose for yourself which value to keep
margin: margin-top margin-right margin-bottom margin-left ;
Set right margin on buttons:
<div class="container">
<div class="jumbotron">
<button ng-repeat="char in alphabet" ng-click="filterByAlphabet(char)" style="margin-right: 10px;">{{char}}</button>
<br><br>
<span ng-repeat="genre in genres">
<button class="btn btn-xs" ng-click="filterByGenre(genre)" style="margin-right: 10px;">{{genre}}</button>
</span>
</div>
Hope, this is what you're looking for.
.capsule{
padding: 0 30px;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<div class="container">
<div class="jumbotron">
<span class="col-xs-4"> </span>
<span class="capsule col-xs-2">
<button ng-repeat="char in alphabet" ng-click="filterByAlphabet(char)">{{char}}</button>
</span>
<span class="capsule col-xs-2" ng-repeat="genre in genres">
<button class="btn btn-xs" ng-click="filterByGenre(genre)">{{genre}}</button>
</span>
</div>
i added one empty span to center the jumbo in the screen, also added "capsule" span to get space between the buttons.
Hope it helps!
Using bootstrap3 I would like to set the width of the input type="text" in the input-Group.
I found these two solutions, but in this way I set the total width of all elements and not only the input text width.
.paginator {
width: 300px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="paginator">
<div class="input-group input-group-sm">
<div class="input-group-btn input-group-sm">
<button type="button" class="btn btn-default"> << </button>
<button type="button" class="btn btn-default"> < </button>
<button type="button" class="btn btn-default">Pag</button>
</div>
<input class="form-control" type="text">
<div class="input-group-btn input-group-sm">
<button type="button" class="btn btn-default">of 44</button>
<button type="button" class="btn btn-default"> > </button>
<button type="button" class="btn btn-default"> >> </button>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-3">
<div class="input-group input-group-sm">
<div class="input-group-btn input-group-sm">
<button type="button" class="btn btn-default"> << </button>
<button type="button" class="btn btn-default"> < </button>
<button type="button" class="btn btn-default">Pag</button>
</div>
<input class="form-control" type="text">
<div class="input-group-btn input-group-sm">
<button type="button" class="btn btn-default">of 44</button>
<button type="button" class="btn btn-default"> > </button>
<button type="button" class="btn btn-default"> >> </button>
</div>
</div>
</div>
</div>
bootply
How do I set only the width of the text input with bootstrap?
Thank you
-- EDIT --
I tried to set an inline class for text input as suggested, but this is the result.
bootply edit
Nobody can help me?
Thanks
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>