Supose I had this code im one of my views of my spring project:
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
(without the subtext). How I could place a group of buttons like this one:
<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>
inside the page-header, aligned to the right?
Well make them float right by using bootstrap's pull-right class:
.header-btn-group{
top: 2px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<div class="page-header">
<div class="btn-group pull-right header-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>
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Related
I want to have the cancel button to the left of the footer and stay the close and save button always on right.
I have tried adding float:left property to cancel button but that didnt help. Any solution thats based on bootstrap classes are highly appreciated.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>
All you need to do is to add me-auto class to your cancel button.
me-auto means margin end auto and this has the same effect than adding margin-right: auto; to your cancel button.
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary me-auto" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
You can just wrap the Close and Save buttons in a div, and set a justify-content: space-between in your modal-footer class like this:
HTML File:
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<div>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
CSS File:
.modal-footer {
justify-content: space-between;
}
I've been working on finding a solution to this, and cannot seem to find anything that works. I am trying to make some general components for a system using Bootstrap 5, and have defined a button as:
<div class="col buttonDiv">
<button type="button" class="btn btn-primary">Foo Bar</button>
</div>
When users place this in their container in the system, it automatically generates an outer container:
<div class="divContainer">
//button
</div>
So, if the users try to place 2 buttons, the code will look like:
<div class="divContainer">
<div class="col buttonDiv">
<button type="button" class="btn btn-primary">Foo Bar</button>
</div>
</div>
<div class="divContainer">
<div class="col buttonDiv">
<button type="button" class="btn btn-primary">Foo Bar</button>
</div>
</div>
How do I inline these buttons and also be able to change the alignment on them? It is not possible for me to add classes to the outer container of the divContainers.
I hope someone can shed some light on this problem for me. Thanks.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap Example</title>
</head>
<body>
<!-- Example Code -->
<div class="d-flex">
<button type="button" class="btn btn-primary d-block">Foo Bar</button>
<button type="button" class="btn btn-primary d-block ms-2">Foo Bar</button>
</div>
<!-- End Example Code -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<div class="d-flex">
<button type="button" class="btn btn-primary d-block">Foo Bar</button>
<button type="button" class="btn btn-primary d-block ms-2">Foo Bar</button>
</div>
use Bootstrap 5 class d-inline to align them Docs here
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="divContainer d-inline">
<div class="col buttonDiv d-inline">
<button type="button" class="btn btn-primary">Foo Bar</button>
</div>
</div>
<div class="divContainer d-inline">
<div class="col buttonDiv d-inline">
<button type="button" class="btn btn-primary">Foo Bar</button>
</div>
</div>
<div class="divContainer d-inline">
<div class="divContainer d-inline">
<div class="col buttonDiv d-inline">
<button type="button" class="btn btn-primary">Foo Bar</button>
</div>
</div>
<div class="divContainer d-inline">
<div class="col buttonDiv d-inline">
<button type="button" class="btn btn-primary">Foo Bar</button>
</div>
</div>
I am very new to CSS responsive layouts and need help structuring my navbar. I am aware that there are many other similar SO Q&As, but none of them give me the desired output.
I tried using the suggestion from this SO question, but instead of the buttons resizing, a scrollable scrollbar appears upon window resize which is not what I want.
Here's what my HTML code looks like at the moment:
.nowrap{white-space: nowrap;}
.column2 {
float: left;
width: 33%;
text-align: center;
overflow:auto;
}
.column3 {
float: center;
width: 33%;
text-align: right;
}
.column4 {
float: right;
width: 33%;
text-align: right;
overflow:auto;
}
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.6.3/css/all.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel='stylesheet' href='https://bootswatch.com/4/united/bootstrap.min.css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="row">
<div class="container">
<div class="column2"><h4 >Welcome back <span>Example</span></h4></div>
<div class="column3">
<h1 style="font-size:2.5vw;" title='About'>Example<span class="text-primary">TEXT</span>Example</h1>
</div>
<div class="column4" >
<div class="col-md-6 col-md-offset-3 responsive nowrap">
<button type="button" class="btn btn-danger btn-responsive">Search</button>
<button type="button" class="btn btn-primary btn-responsive" id="logoutButton " >Logout</button>
<button type="button" class="btn btn-primary btn-responsive" data-toggle="modal" data-target="#loginModal" >Login</button>
</div>
</div>
</div>
</nav>
Summary of button requirements:
The three buttons in the same row
Buttons responsively get smaller without the need to scroll.
The content in the three <div> tags don't overlap
Please do take into consideration that I am very new to CSS styling and so would appreciate all the constructive feedback!
You can use bootstrap 3 classes. Is that close to what you try to achieve?
(Edit snippet per comments:)
.nowrap{white-space: nowrap;}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="col-xs-3 col-sm-4 text-left"><h4 >Welcome back <span>Example</span></h4></div>
<div class="col-xs-2 col-sm-4 text-center">
<h1 style="font-size:2.5vw;" onclick="about()" title='About'>Example<span class="text-primary">TEXT</span>Example</h1>
</div>
<div class="col-xs-7 col-sm-4 text-right">
<div>
<button type="button" class="btn btn-danger btn-responsive" onclick="search()" >Search</button>
<button type="button" class="btn btn-primary btn-responsive" id="logoutButton " >Logout</button>
<button type="button" class="btn btn-primary btn-responsive" data-toggle="modal" data-target="#loginModal" >Login</button>
</div>
</div>
</div>
</div>
</nav>
I have this .card-footer:
<div class="card-footer">
<button class="btn btn-theme pull-left" type="button" id="toleft"><</button>
<button class="btn btn-theme" type="button" id="more">+</button>
<button class="btn btn-theme pull-right" type="button" id="toright">></button>
</div>
The buttons .toleft and .toright are in the correct position, however the button #more should be exactly on the center of the footer, but it is still on the left.
Any ideas?
Bootstrap 3
You can use the following solution adding .text-center to the .card-footer container:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-footer text-center">
<button class="btn btn-theme pull-left" type="button" id="toleft"><</button>
<button class="btn btn-theme" type="button" id="more">+</button>
<button class="btn btn-theme pull-right" type="button" id="toright">></button>
</div>
Bootstrap 4.0+
On Bootstrap 4.0+ there is no class .pull-left or .pull-right anymore. You have to use .float-left and .float-right instead. You can also use .text-center to center the second button.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="card-footer text-center">
<button class="btn btn-dark float-left" type="button" id="toleft"><</button>
<button class="btn btn-dark" type="button" id="more">+</button>
<button class="btn btn-dark float-right" type="button" id="toright">></button>
</div>
Note: I don't recommend to use custom CSS rules. Bootstrap is a CSS Framework to provide solutions for many design problems. Overwriting CSS properties on components can cause problems.
If you're seeing this in 2018 or beyond, please note that some of these old answers will not work with Bootstrap 4...
However, there is no need to include additional CSS as a couple of the previous answers suggest.
The pull-left and pull-right classes no longer work in Bootstrap 4.
Instead, we now use float-left and float-right to float our left and right buttons.
The easiest way to achieve the desired effect would be to start by centering the footer contents by adding the text-center class to the footer.
Next, we can float the left button with the float-left class and float the right button with the float-right class.
Here's the final HTML:
<div class="card-footer text-center">
<button class="btn btn-theme float-left" type="button" id="toleft">left</button>
<button class="btn btn-theme" type="button" id="more">center</button>
<button class="btn btn-theme float-right" type="button" id="toright">right</button>
</div>
Which gives us the following result:
Just tried this with the latest alpha6 build of Bootstrap 4 (I'm assuming you're using BS4 as you mentioned the card component), and it looks as though the default behaviour is to align buttons in card footers to the middle anyway.
Note that I also had to introduce the .pull-left / .pull-right utility classes, as these no longer appear to be defined in the Bootstrap CSS.
See demo below:
.pull-left {
float: left;
}
.pull-right {
float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
<div class="card-footer text-muted">
<button class="btn btn-theme pull-left" type="button" id="toleft"><</button>
<button class="btn btn-theme" type="button" id="more">+</button>
<button class="btn btn-theme pull-right" type="button" id="toright">></button> </div>
</div>
Try This :
.card-footer{
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="card-footer">
<button class="btn btn-theme pull-left" type="button" id="toleft"><</button>
<button class="btn btn-theme" type="button" id="more">+</button>
<button class="btn btn-theme pull-right" type="button" id="toright">></button>
</div>
In the following example you can see that the buttons are barely indistinguishable from eachother and would therefor want to use some spacing between the buttons like btn-toolbar does. I cant use that however since the buttons will be very small and don't fill the entire div
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Yes</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">No</button>
</div>
</div>
I want the spacing to be like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="btn-toolbar" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Yes</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">No</button>
</div>
</div>
Here is one more solution. Since btn-group rounds only far left and right edges of group, you'd rather remove .btn-group from <div class=" btn-group btn-group-justified" role="group">, and then set paddings to inner divs of class .btn-group
As you wish you can define higher specificity for this .btn-group to prevent a spread of style outside.
.btn-group {
padding-left: 2px;
padding-right: 2px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Yes</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">No</button>
</div>
</div>
You can use bootstrap grid system.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class=" btn-group btn-group-justified" role="group">
<div class=" col-xs-5">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Yes</button>
</div>
</div>
<div class=" col-xs-5">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">No</button>
</div>
</div>
</div>
</div>
Are you looking for something like below?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-xs-6">
<button type="button" class="btn btn-primary btn-lg btn-block">Yes</button>
</div>
<div class="col-xs-6">
<button type="button" class="btn btn-default btn-lg btn-block">No</button>
</div>
</div>
Hope this helps.