I'm using Bootstrap 4 and I want to align two buttons inside a table column. The buttons are of the same size, but the second one is inside of a form.
I tried using the button group approach which almost solves the situation, but unfortunately there's a small gap between the buttons:
<td class="text-right">
<div class="btn-group" role="group">
<button type="button" class="btn btn-sm btn-secondary">Edit</button>
<form action="" method="POST">
<button type="button" class="btn btn-sm btn-danger">Delete</button>
</form>
</div>
</td>
What utility class can I use or any additional css in order to have the buttons aligned on the same level?
P.S. It doesn't have to be the button group, it can be any other technique as long as the buttons are on the same line.
Following the same strategy used to align columns in the bootstrap, its td can be of the row class, surrounded by items in the class col-md , col-lg, col-sm.
Try this:
HTML
<td class="text-right row">
<div class="btn-group" role="group">
<div class="col-md-6 custom">
<button type="button" class="btn btn-sm btn-secondary">Edit</button>
</div>
<div class="col-md-6 custom">
<form action="" method="POST">
<button type="button" class="btn btn-sm btn-danger">Delete</button>
</form>
</div>
</div>
</td>
Customize your column with a custom CSS
CSS
.custom {
padding-right: 5px;
padding-left: 5px;
}
https://jsfiddle.net/braulioti/aq9Laaew/160600/
I'm having trouble finding the right code to allign my div element to the right of the page.
Now I have this:
I want to have this:
Here is my code:
<h1 class="pb-2 mt-4 mb-2 border-bottom">Producten</h1>
<button type="button" name="button" class="btn btn-warning" *ngIf="!newProduct" (click)="newProductForm()">Nieuwe productvraag</button>
<button [disabled]="loading" type="button" name="button" class="btn btn-default" *ngIf="!newProduct" (click)="reload()"><i class="fas fa-sync-alt"></i> Reload</button>
<form name="searchForm" (submit)="search()" class="form-check-inline">
<div class="float-right">
<input type="text" name="title" class="form-control" placeholder="*Zoek product" aria-label="Search"/>
<button type="submit" style="display:none;">Hidden</button>
</div>
</form>
The 2 buttons (yellow and grey) don't have anything to do with the form. The form is a search function of my page. I use bootstrap for styling.
I have resolved your problem please check following code
<h1 class="pb-2 mt-4 mb-2 border-bottom">Producten</h1>
<div class="clearfix">
<button type="button" name="button" class="btn btn-warning" *ngIf="!newProduct" (click)="newProductForm()">Nieuwe productvraag</button>
<button [disabled]="loading" type="button" name="button" class="btn btn-default" *ngIf="!newProduct" (click)="reload()"><i class="fas fa-sync-alt"></i> Reload</button>
<form name="searchForm" (submit)="search()" class="form-check-inline float-right">
<input type="text" name="title" class="form-control" placeholder="*Zoek product" aria-label="Search"/>
<button type="submit" style="display:none;">Hidden</button>
</div>
</form>
</div>
add class to you input tag like search-input
then in your css file
.search-input {
float: right
}
If you are using bootstrap 4 then you can do something like this. wrap your buttons and form into one div and give him class d-flex and ml-auto class to form tag
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<h1 class="pb-2 mt-4 mb-2 border-bottom">Producten</h1>
<div class="d-flex">
<button type="button" name="button" class="btn btn-warning" *ngIf="!newProduct" (click)="newProductForm()">Nieuwe productvraag</button>
<button [disabled]="loading" type="button" name="button" class="btn btn-default" *ngIf="!newProduct" (click)="reload()"><i class="fas fa-sync-alt"></i> Reload</button>
<form name="searchForm" (submit)="search()" class="form-check-inline ml-auto">
<div>
<input type="text" name="title" class="form-control" placeholder="*Zoek product" aria-label="Search"/>
<button type="submit" style="display:none;">Hidden</button>
</div>
</form>
<div>
I want the input group to be aligned to left, as it is, and "Add new" button aligned to right of the row.
<div class="row">
<div class="input-group col-sm-6">
<input type="text" class="form-control" placeholder="Search by a substring in good's name.."></input>
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick="filter()">Search</button>
</span>
</div>
<div class="col-sm-6">
<button class="btn btn-default text-right" type="button" onclick="addNew()">Add new</button>
</div>
</div>
In action: Bootply
As you can see, input group and "Add new" button are stacked vertically, although they're in a single row.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search by a substring in good's name..">
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick="filter()">Search</button>
</span>
</div>
</div>
<div class="col-lg-6">
<button class="btn btn-default" type="button" onclick="addNew()">Add new</button>
</div>
</div>
Separete the col-lg-6 and input-group from the div
Bootply : http://www.bootply.com/W8ao9A0a4r
See below. I moved the add new button code right next to your search button. The input is to the left and the add new button is to the right of that. If you want the add new button to hug the right side of the browser, let me know.
<div class="actions row">
<div class="input-group col-sm-6">
<input type="text" class="form-control" placeholder="Search by a substring in good's name..">
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick="filter()">Search</button>
</span>
</div>
<div class="col-sm-6">
<button class="btn btn-default text-right" type="button" style="float:right; margin-right:-15px;" onclick="addNew()">Add new</button>
</div>
</div>
I am trying to put a search bar with three buttons on my site. The buttons represent 3 different searches (so they will be more like toggles).
I tried this code, but the output wasn't as expected:
<div class="row search-row">
<div class="col-lg-6">
<div class="input-group"><span class="input-group-btn"><button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span></button></span><span class="input-group-btn"><button class="btn btn-default" type="button">
<input id="file-button" src="text.png" type="image"></button></span><span class="input-group-btn"><button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-file"></span>
</button></span><input class="form-control" type="text"><span class="input-group-btn"><button class="btn btn-default" type="button" value="Go"></button></span>
</div>
</div>
</div>
Here is a screen shot, the top is unedited, the bottom is me trying to call attention to the issues:
How do I get the buttons and the text to all look like the same input (flush with no bumps)?
This code fixes it:
<div class="container">
<div class="row search-row">
<div class="container col-lg-6">
<div class="input-group"><span class="input-group-btn"><button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span></button><button class="btn btn-default" type="button">
<input id="file-button" src="text.png" type="image"></button><button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-file"></span>
</button></span><input class="form-control" type="text"><span class="input-group-btn"><a class="btn btn-default go-search" href="#">Go</a></span>
</div>
</div>
</div>
</div>
Screenshot:
Basically, there should be one button group span for all the buttons on the left. I changed the "go" button to be a link since thats what I really need it to be anyway.
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>