I'm looking for a way to have a text input and two buttons next two each other, with the buttons taking as much horizontal space as they need and the input taking the remaining space. I'd also like to have small margins between the elements and I' prefer to achieve this using Bootstrap 4 classes.
I hoped I could use three col-auto divs, but this way the input gets a fixed with of about 150px:
<!-- Input. This should be as wide as possible. -->
<div class='col-auto'>
<input class='form-control'
type='text'>
</div>
<!-- 1st button -->
<div class='col-auto'>
<button class='btn btn-primary'>
DO that
</button>
</div>
<!-- 2nd button -->
<div class='col-auto'>
<button class='btn btn-primary'>
Do that
</button>
</div>
Is there an elegant way to achieve what I want?
First, make sure you are using the lastest Bootstrap CSS CDN Link:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Next, here is the code, try this out:
<div class="container-fluid">
<!-- 1st button -->
<div class="row">
<div class='col-auto'>
<button class='btn btn-primary'>Do This</button>
</div>
<!-- 2nd button -->
<div class='col-auto'>
<button class='btn btn-primary'>Do This</button>
</div>
<!-- Input. This should be as wide as possible. -->
<div class='col w-100'>
<input class='form-control' type='text'>
</div>
</div>
</div>
In summary, use container-fluid, and then row, then use col-auto on the buttons, and col and w-100 on the input.
U can make a Bootstrap grid with a single row and 3 columns, two of the same size and one with a larger size.
I make this example code, try it out
<div class="row">
<div class="col-sm-6" >
<input class='form-control'
type='text' >
</div>
<div class="col-sm-3" >
<button class='btn btn-primary' style="width: 100%;">
DO that
</button>
</div>
<div class="col-sm-3">
<button class='btn btn-primary' style="width: 100%;">
DO that
</button>
</div>
</div>
Related
This question already has answers here:
Twitter Bootstrap - add top space between rows
(21 answers)
Closed 1 year ago.
I am new to css and bootstrap. I am working on a legacy code which needs to add two row. The first row is a dropdown and a little help button. The second row is another button.
I want to have margin between the two rows using a proper way, i.e. using CSS or Bootstrap related classes etc. I ended up using <p></p> between the two div.row but somehow I think it's not the proper way. Below are my code snippets and the screenshots for before and after adding <p></p>. Please help to suggest a way without using <p></p>.
<div class="row">
<div class="col-xs-4">
<select id="selected_id" class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
<option value="kitchen">Kitchen</option>
<option value="test01">test01</option>
<option value="test02">test02</option>
<option value="test03">test03</option>
</select>
</div>
<div class="col-xs-4">
<a id="manual_help">
<i class="fa fa-question-circle" aria-hidden="true"></i>
</a>
</div>
<div class="col-xs-4"></div>
</div>
<!-- This is the part used to create margin -->
<p></p>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<button id="add_id" class='btn btn-primary'>
<i class="fa fa-plus-circle"></i> <span class="add_text">
Add
</span>
</button>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<button id="edit_id" class='btn btn-primary'>
<i class="fa fa-pencil-alt"></i> <span class="edit_text">
Edit
</span>
</button>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<button id="delete_id" class='btn btn-danger' style="display:block">
<i class="fa fa-trash-alt"></i> <span class="delete_text">
Cancel
</span>
</button>
</div>
</div>
Before adding <p></p>:
After adding <p></p>:
Just add a margin to the div.row elements. This can be as simple as saying all rows - get a 15px margin bottom with .row {margin-bottom: 15px} - and (change the the desired margin), or you could do .row:not(:last-child){margin-bottom: 15px} to control the spacing at the bottom of the container - or even do it as .row + .row {margin-top: 15px} which gives margin-top to every direct sibling row and prevents the spacing issue at the bottom of the container.
As a general rule -try not to use html elements to control spacing - do it with CSS (and I also include <br/> and <hr/> tags in that advice - they can be resplace with CSS be better control.
I added a parent element with a specific class and then used that class to name-space these rows so as to prevent all rows in your aplication ferom being affected. You could make a utility class and apply the styling for that - for re-use - eg: ".rows-with-margin" or something that makes sense.
Note that I changed the col-xs-12 to col-xs-4 ... nothing to do with the row spacing - just so that it rendered correctly for the small snippet window.
/* alternative 1 - margin bottom on all rows */
.form-select-wrapper .row {
margin-bottom: 15px
}
/* alternative 2 - margin bottom on all rows within the parent container - except the last one */
.form-select-wrapper.row:not(:last-child){
margin-bottom: 15px;
}
/* alternative 3 - margin top on direct sibling rows */
.form-select-wrapper .row + .row{
margin-top: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<!-- 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">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="form-select-wrapper">
<div class="row">
<div class="col-xs-4">
<select id="selected_id" class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
<option value="kitchen">Kitchen</option>
<option value="test01">test01</option>
<option value="test02">test02</option>
<option value="test03">test03</option>
</select>
</div>
<div class="col-xs-4">
<a id="manual_help">
<i class="fa fa-question-circle" aria-hidden="true"></i>
</a>
</div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<button id="add_id" class='btn btn-primary'>
<i class="fa fa-plus-circle"></i> <span class="add_text">
Add
</span>
</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<button id="edit_id" class='btn btn-primary'>
<i class="fa fa-pencil-alt"></i> <span class="edit_text">
Edit
</span>
</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<button id="delete_id" class='btn btn-danger' style="display:block">
<i class="fa fa-trash-alt"></i> <span class="delete_text">
Cancel
</span>
</button>
</div>
</div>
</div>
I have implemented a container in such a way that on extra small screen they should have assigned width.
<div class="container w-60 border border-secondary">
<h1 class="text-black-50 text-center mb-5 bg bg-light">Warenkorb</h1>
<hr/>
<div class="row mt-5">
<div class="col-xs-1">
<span>1x</span>
</div>
<div class="col-xs-6">
<small class="text-muted description">Some description</small>
</div>
<div class="col-xs-2">
<div class="btn-group" role="group" aria-label="quantity">
<button type="button" class="btn btn-default border border-success btn-sm align-bottom float-right" (click)="decreaseTheQuantity(item)"><span class="vertical-align: baseline;">-</span></button>
<button type="button" class="btn btn-default border border-success btn-sm align-bottom float-right" (click)="increaseTheQuantity(item)"><span class="vertical-align: baseline;">+</span></button>
</div>
</div>
<div class="col-xs-1 float-right">
40€
</div>
<div class="col-xs-2">
<button type="button" class="btn btn-default btn-sm float-right" (click)="deleteTheItem(i)">
<span class="glyphicon glyphicon-trash border border-success btn-sm align-top float-right btntrash"></span>
</button>
</div>
</div>
It looks okay on most of the screens
but on s5 it looks bit distorted.
I want trash button to be in a same row like in first picture.
I am using bootstrap and using class="col-xs-X" to split the columns on small screens.
Why its not working for s5 device ?
Second problem is:
<div class="col-xs-1 float-right">
40€
</div>
my css
.glyphicon.glyphicon-trash{
font-size: 10px;
top: -6px;
}
.btntrash{
height:20px;
top: -6px;
}
for above column i am using float-right and expect a very little space between price and trash button. I am not able to achieve that either.
Could you please give me some pointers ?
https://getbootstrap.com/docs/4.0/layout/grid/
Bootstrap 4 do not have xs grid. You should change col-xs-6 to col-6, but if you want to have different grid on desktop or tablet versions, you can use lg and md size.
A little late to the party, but I would suggest is using col-auto and col to adjust your layout for the small screen. I find that there's some situations where specifying a total of 12 columns reacts in weird ways when the content of the column doesn't fit it's width (like you have done).
And also make use of the breakpoints available in bootstrap to change your column sizing for different screens.
<div class="row mt-5">
<div class="col-auto col-sm-1">
<!-- Quantity -->
</div>
<div class="col col-sm-6">
<!-- Description -->
</div>
<div class="col-auto col-sm-2">
<!-- Plus/Minus buttons -->
</div>
<div class="col-auto col-sm-1 float-right">
<!-- Price -->
</div>
<div class="col-auto col-sm-2">
<!-- Delete Button -->
</div>
</div>
col-auto is used to size the column based on it's content.
col is used to fill up any left over space in the row.
I have this modal header and wish to add the "download" button to the right of the text "Optimize data". Here is my code for the same but everytime it aligns to the below of the modal header text. I have also tried float and align properties but it didnt seem to work.
<div class="modal-header">
<h3 class="align:left" translate>{{Title}}</h3>
<div class=align:"right">
<button type="button" class="btn btn-info" id="downloadLog" translate>Download Log</button>
</div>
</div>
The modal-header in Bootstrap 4 is display:flex. Use ml-auto to push the button to the right...
<div class="modal-header">
<h3>Title</h3>
<div class="ml-auto">
<button type="button" class="btn btn-info" id="downloadLog" translate>Download Log</button>
</div>
</div>
https://www.codeply.com/go/qPMA41arJV
<h3> is an element that use the entire line so you should add an row, and two columns and then you will can do that
<div class="row">
<div class="col-8">
<h3>Text</h3>
</div>
<div class="col-4">
<button>Button here</button>
</div>
</div>
bootstrap it self has class "input-group"
You can use that as below.
<div class="input-group">
<span>
<a href="#" />
</span>
</div>
There are similar answers here, but people wanting to know how to stack their columns on XS display, I want them to STOP stacking.
I have two columns, and for some reason their contents are stacking at some displays. I'm using Bootstrap 4
320 px (XS) display :
480 px (XS) display, this is the only correct one :
800 px (MD) display :
Why are the contents stacking? I don't understand.
Code:
<div class="row justify-content-between">
<div class="input-group col-md-4 col-12 text-center">
<div class="input-group-prepend">
<button class="btn btn-primary" type="button">
<!-- Display none in smaller than sm -->
<span class="d-none d-md-block">Exportar</span>
<!-- Display none in md or larger -->
<i class="material-icons d-md-none">file_download</i>
</button>
</div><select class="custom-select text-center" id="tipo_exportar">
<option value="1">
Kml
</option>
<option value="2">
Csv
</option>
</select>
</div>
<div class="col-md-8 col-12 text-center">
<div class="btn btn-outline-primary">
<i class="material-icons">autorenew</i>
</div>
<!-- Boostrap Multiselect -->
<select id="hide_fields" multiple="multiple">
</select>
</div>
</div>
Another question, I'm using Bootstrap Multiselect, but it doesn't occupy all the space as the regular Boostrap custom select, how I can make them line up? And how can I add some extra vertical space between the two columns?
Most of the utility classes I'm using were try and error, I'm open to suggestions on how to better layout my buttons as I'm very new at Bootstrap
I would recommend re-structuring your code somewhat, to make use of input-group and Bootstrap's Grid correctly. These two should not be combined. Rather; you should wrap input-group in a col-*-* element.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-4 mb-4 md-md-2">
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-primary">
<span class="d-none d-md-block">Exportar</span>
<span class="material-icons d-block d-md-none">file_download</span>
</button>
</div>
<select class="custom-select text-center" id="tipo_exportar">
<option value="1">Kml</option>
<option value="2">Csv</option>
</select>
</div>
</div>
<div class="col-12 col-md-8">
<div class="input-group">
<div class="input-group-prepend">
<div class="btn btn-outline-primary">
<span class="material-icons">autorenew</span>
</div>
</div>
<select class="custom-select" id="hide_fields" multiple="multiple">
<option value=""></option>
</select>
</div>
</div>
</div>
</div>
A couple of notes on the above code:
(1) You will need to expand the snippet or view this same code on Bootply ( https://www.bootply.com/gCYqfuhpIe )
(2) You seem to be using additional CSS to modify the look/feel of Bootstrap. This answer shows you the default styles of Bootstrap 4, which are noticeably different in terms of border radius as well as how it handles a <select> with the multiple attribute. Depending on how extensively your CSS alters Bootstrap adopting this layout to that CSS might require additional work.
In this line
<div class="col-md-8 col-12 text-center">
add the col-xs-12class to allow the full horizontal space for its contents. So that's:
<div class="col-xs-12 col-md-8 col-12 text-center">
I'm new to bootstrap and CSS in general. I have some html which looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Site</title>
<link rel="stylesheet" href="/css/bootstrap-theme.css">
<link rel="stylesheet" href="/css/font-awesome.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1"><span class="fa fa-caret-down"></span></div>
<div class="col-md-1"><span id="cool-title">My Site</span></div>
<div class="col-md-1">
<input type="text" placeholder="Search" class="search-bar">
</div>
<div class="col-md-1">
<button class="btn btn-default"><i class="fa fa-search col-md-1"></i></button>
</div>
</div>
<div id="main">
</div>
</div>
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
</body>
</html>
I want all of those col- divs to be inlined, but they are all showing up on their own rows:
What's going on here?
You are using /css/bootstrap-theme.css. Use /css/bootstrap.css or /css/bootstrap.min.css instead. bootstrap-theme.css doesn't have "col- " properties.
Also, instead of using just one class="col-md-1" (for medium sized viewport/screen) you might want to use something like class="col-xs-12 col-sm-6 col-md-3 col-lg-3" that makes your columns responsive to different screens. ('xs' for extra small screen, 'lg' for large screen etc. Play around with these numbers. Bootstrap uses a 12 columns grid layout, so use factors of 12 as the numbers.)
If you are viewing it with small screen width then use following way:
<div class="row">
<div class="col-md-1 col-sm-1"><span class="fa fa-caret-down"></span></div>
<div class="col-md-1 col-sm-2 col-xs-2"><span id="cool-title">My Site</span></div>
<div class="col-md-1 col-sm-3 col-xs-4">
<input type="text" placeholder="Search" class="search-bar">
</div>
<div class="col-md-1 col-sm-1 col-xs-1">
<button class="btn btn-default"><i class="fa fa-search col-md-1"> button</i></button>
</div>
</div>
Experiment with changing col-md-#(column number) or others to achieve your desired result.
Liveweave : http://liveweave.com/9MGL33
Maybe your screen resolution is too small. If you don't want to add responsive behaviour, you should start with col-xs-*, so the columns will always be horizontal (or inline).
Remember that bootstrap uses 12 columns by default, so maybe col-xs-1 will be a little to small.
<div class="container">
<div class="row">
<div class="col-xs-1"><span class="fa fa-caret-down"></span></div>
<div class="col-xs-1"><span id="cool-title">My Site</span></div>
<div class="col-xs-1">
<input type="text" placeholder="Search" class="search-bar">
</div>
<div class="col-xs-1">
<button class="btn btn-default"><i class="fa fa-search col-md-1"></i></button>
</div>
</div>
</div>
In bootstrap 4 for extra small screens do not declare "col-xs-#" it's just "col-#". Took 2 hours of banging my head against the wall to figure it out.
So instead of
<div class="row">
<div class="col-xs-1">L</div>
<div class="col-xs-10">M</div>
<div class="col-xs-1">R</div>
</div>
It should be
<div class="row">
<div class="col-1">L</div>
<div class="col-10">M</div>
<div class="col-1">R</div>
</div>