Using this code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<label class="col-2 col-form-label">Email</label>
<div class="col-8">
<input type="text" class="form-control">
</div>
<div class="col-2">
text
</div>
</div>
</div>
If you resize the window to the smallest size, the grid breaks.
Here is the Bootply link.
Just open the preview and resize your window to the smallest size, and the grid will break.
3 columns must stay in the same row, but in the smallest size, the last column shifts to the bottom row.
This happens in both versions (4 & 3.7 (col-xs-2))
how can this be fixed?
The columns can't shrink in width less than 30px (due to padding) so, as screen width narrows, eventually the columns wrap (stack vertically). To prevent this, adjust the padding on the columns inside the row. Bootstrap 4 has a no-gutters class for this purpose...
https://codeply.com/go/XaBsD5AhJG
<div class="container">
<div class="row no-gutters">
<label class="col-2 col-form-label">Email</label>
<div class="col-8">
<input type="text" class="form-control">
</div>
<div class="col-2 pl-1">
text
</div>
</div>
</div>
Bootstrap 4 also has padding utility classes classes that can be used to adjust padding on individual elements. For example, I used pl-1(padding-left) on the last column to give a little space between the input and "text". Another Bootstrap 4 option is to use flex-nowrap on the row which will prevent wrapping and creating horizontal scrolling when there is overflow.
In Bootstrap 3, you need to add CSS to adjust the padding.
.no-gutters {
margin-right: 0;
margin-left: 0;
}
.no-gutters>[class*=col-] {
padding-right: 0;
padding-left: 0;
}
Related
Bootstrap col-xs wrapping
Bootstrap xs columns wrap
You have wronged close the <div> tag
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<label class="col-2 col-form-label">Email</label>
<div class="col-8">
<input type="text" class="form-control">
</div>
<div class="col-2">
text
</div>
</div>
</div>
Related
I have a bootstrap column that I want to shrink to the height of its contents so another column can fill the space below it. Here is an image of what I am referring to:
I would like for the first column – holding both col-1 boxes – to shrink to the height of its contents so the "last" box can fill the space.
Codepen link
.box {
background-color: green;
margin: 5px;
padding: 25px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-12 col-md-8 col-lg-9">
<div class="box">col-1</div>
<div class="box">col-1</div>
</div>
<div class="col-12 col-md-4 col-lg-3">
<div class="box">col-2</div>
<div class="box">col-2</div>
<div class="box">col-2</div>
</div>
<div class="col-12 col-md-8 col-lg-9">
<div class="box">last</div>
</div>
</div>
</div>
Note: I originally just put the 3rd bootstrap column as a child of the first column, but had to move away from that because of how the tabbing on the page worked. I need it to tab from col-1 to col-2 to col-3, the last one.
You can't "shrink" the size of one column in a grid layout without affecting the others, so we need to break down what you want to achieve. You are trying to work with 3 different orders:
Visual order on larger screens: col-1, last, col-2
Visual order on mobile: col-1, col-2, last
Tab order on all screens: col-1, col-2, last
The mobile order and tab order are the same (and also we can't change tab order responsively without JS), so we start with this as the basis of our display.
Then we want last to be positioned before the 3rd element of col-2 on large screens, but after it on mobile, so we need to make those 2 elements work relative to each other instead of being part of the other cols.
Working Example - I've added inputs to see the tab order. (Run in Full Page to see the cols)
.box {
background-color: green;
margin: 5px 5px 0;
padding: 25px;
}
input { width: 30px; } /* For demo only */
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-12 col-md-8 col-lg-9">
<div class="box"><input placeholder="1"> col-1</div>
<div class="box"><input placeholder="2"> col-1 </div>
</div>
<div class="col-12 col-md-4 col-lg-3">
<div class="box"><input placeholder="3"> col-2</div>
<div class="box"><input placeholder="4"> col-2</div>
</div>
<div class="col-12 col-md-4 col-lg-3 order-md-last">
<div class="box order-1"><input placeholder="5"> col-3</div>
</div>
<div class="col-12 col-md-8 col-lg-9">
<div class="box"><input placeholder="6"> last</div>
</div>
</div>
</div>
How this works:
1. Put the 3rd element from col-2 in its own column col-3 which has the same classes as col-2 so its looks exactly the same as when it was in col-2. It also displays exactly as it was on mobile screens. But now it can also be moved independently of col-2.
2. Move the placement of the on larger screens. The step above makes it appear before the last column, so we can use Bootstrap's order classes. Simply adding order-md-last to col-3 makes it appear last on screens above the md breakpoint:
<div class="col-12 col-md-4 col-lg-3 order-md-last">
<div class="box order-1"><input placeholder="5"> col-3</div>
</div>
I am pretty new to bootstrap and have been beating my head up with the following problem. Whenever I use the following code, the padding between the columns is getting lost.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col"></div>
<div class="col-sm-4 col"></div>
<div class="col-sm-4 col"></div>
</div>
</div>
</body><!--end body-->
But whenever I move the class col inside the column, then the code works exactly as expected.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="col"></div>
</div>
<div class="col-sm-4">
<div class="col"></div>
</div>
<div class="col-sm-4">
<div class="col"></div>
</div>
</div>
</div>
</body><!--end body-->
Following is the CSS class that I am using
<style>
.col{
min-height: 500px;
background-color: gray;
}
</style>
Bootstrap does not add space between the columns, it adds space inside each column. So if you put another div inside each column that will give the space you want.
The way I look at it is the columns only act as containers for the actual content, which goes inside them.
jsfiddle of the kind of thing I think you should do instead: https://jsfiddle.net/bqadptzL/
CSS:
.col {
/* just to demonstrate */
background-color: red;
}
.box {
background-color:gray;
min-height: 500px;
}
HTML:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
</div>
</div>
</body><!--end body-->
If you look at the grid system examples, you will see there is no space between the columns, only inside them. http://getbootstrap.com/css/#grid
Hope that helps.
Sidenote: you should not put columns inside columns, you should only put columns inside rows. But you can put rows inside columns. So you can alternate row - column - row - column, not row - column - column. This is how Bootstrap system is meant to work.
When you use the second version you get a margin created by the div you added,
if you add a margin to the .col css class you should see the difference.
You can take a look here for a more detailed answer about how to work with the columns in bootstrap with a similar issue
The padding is not getting lost. In Bootstrap, col-sm-* has 15px padding. Remember, the background color fills entire the width of the cell, padding included.
You're putting the bg color on the column with padding, and in the other case it's on the inner column that doesn't have padding.
Put the background-color and a border, only on the col-sm-4. and you'll see the difference. The padding is there, and the same in both cases...
http://www.codeply.com/go/lf2V9vlIsr
I'm attempting to use Bootstrap 3's col layout in order to have 3 columns of drop-downs that stack sensibly on small screens. However, I'm getting odd results when I attempt this.
What I need to have happen is for all 3 dropdowns (and their labels) to stack under one another in a sensible fashion when the viewport is narrowed.
Here's how I want it to look:
However, as you can see from this fiddle, it doesn't work that way at all:
Either they overlap due to the float:left, or the dropdown and the label break up and wind up on seperate lines.
http://jsfiddle.net/g8u45rmz/1/
The code is very straight-forward:
<div class="col-xs-4">
<span class='select-subfolder-label'>Subfolder:</span>
<select id='test2' class='folder-sel'>
<option>All</option>
</select>
</div>
In addition, I need the glyph icon on the right side to always be floated right, even when the columns are stacked the way I want.
How can I achieve these two objectives? Help is appreciated.
The 'col-xs-4' class basically says, 'even on extra small screens, this takes up 4 of the 12 columns.
Try using col-md-4 or col-sm-4, when the screen enters xs range, it'll switch to full width and stack as expected.
simply adding a form-control class on select will get the desired result.
For stacked select menu on smaller window, adding class col-xs-12 to parent div will work. This will make the div use up all the width available to it on small devices. Also for small and medium sized window I have used col-sm-4 and col-md-4, this will change it so that all divs appear inline.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class='row subnav'>
<div class="col-xs-12 col-sm-4 col-md-4"> <span class='select-folder-label'>Folder:</span>
<select class="form-control" id='test1' class='folder-sel'>
<option>All</option>
</select>
</div>
<div class="col-xs-12 col-sm-4 col-md-4"> <span class='select-subfolder-label'>Subfolder:</span>
<select class="form-control" id='test2' class='folder-sel'>
<option>All</option>
</select>
</div>
<div class="col-xs-12 col-sm-4 col-md-4"> <span class='select-other-label'>Other:</span>
<select class="form-control" id='test2' class='folder-sel'>
<option>All</option>
</select>
</div>
<div id="subnav_gear" class='dropdown nav navbar navbar-nav navbar-right'> <span class='glyphicon glyphicon-cog'></span>
</div>
</div>
How do I make a simple row with a form-control without getting a horizontal scrollbar?
It seems that whatever I do with bootstrap 3, any "fluid" row that should be 100% is actually going beyond its container which introduces a horizontal scrollbar. How do I stop this and make it fit into its container?
Example:
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<input type="text" required="" class="form-control" placeholder="Enter something" id="foo" name="foo">
</div>
</div>
</div>
jsfiddle: http://jsfiddle.net/qnb3q40g
Your code is working fine with bootstrap 3.2.0
DEMO
.container-fluid .row {
margin-left: 0;
margin-right: 0;
}
For some reason when using container-fluid bootstrap doesn't take into account that it is using a negative margin on rows. So by adding the css above it will fix your issue.
Demo -http://jsfiddle.net/MeycD/537/
You can do it in this way also if you want.
<div class="container">
<div class="row">
<div class="col-xs-5 col-lg-1">
<input type="text" class="form-control input-normal" />
</div>
</div>
</div>
I have a situation where i have six columns getting generated dynamically in the row.
<div class ="row">
<div class="col-sm-2">
<!-- content -->
</div>
</div>
I want to add an icon to the end of the row, but it breaks down because there are six columns as the icon is 7th one. Is there anyway we can add/append the icon to the end of the row without breaking it into next row.
You can do this by using absolute positioning for icon. You need to do some setup before that by adding position relative to the row it contains.
HTML below.
<div class="container">
<div class ="row columns-parent">
<div class="col-sm-2 columns">1
</div>
<div class="col-sm-2 columns">2
</div>
<div class="col-sm-2 columns">3
</div>
<div class="col-sm-2 columns">4
</div>
<div class="col-sm-2 columns">5
</div>
<div class="col-sm-2 columns">6
</div>
<div class="icon">icon here </div>
</div>
</div>
And the CSS
.icon{
position : absolute;
right : 0;
}
.columns-parent{
position:relative;
padding-right:60px;
}
Set the right and top as per your requirements. Also adjust the padding right of the row(60 px here) depending on number of pixels your icon is gonna take so that icon doesnt overlap the content.
JS Fiddle http://jsfiddle.net/YJcLS/1/