I understand that bootstrap .form-horizontal is the standard, and causes .form-group to behave like a row.
This means that <div class="row"> is not needed, but what is the downside to building my layout like this:
<div class="row">
<div class="col-md-6">
<div class="form-group">
<!--Content-->
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<!--Content-->
</div>
</div>
</div>
<div class="row">
<!--More Content-->
</div>
In this case (without a .form-xx modifier class as an ancestor), .form-group does nothing but add space at the bottom. From BS's CSS:
.form-group {
margin-bottom: 15px;
}
You can simply add that class to the row instead to achieve the same result, like:
<div class="row form-group">
<div class="col-md-6">
<!--Content-->
</div>
<div class="col-md-6">
<!--Content-->
</div>
</div>
Related
I am using bootstrap 4. I have 3 columns in a single row. One of the columns contains a list and the other two do not. I want only the column with the list to be scrollable but not the entire container, which means that the scrollbar muss appear only within that column.
I would appreciate any help.
<div class="row">
<div class="col-sm-4">
<div class="card">...
<div class="col-sm-4">
<div class="card">...
<div class="col-sm-4">
<div class="card">...
</div>
You could do something like this:
<div class="row">
<div class="col-sm-4">
<div class="card">...</div>
</div>
<div class="col-sm-4 scroll">
<div class="card">...</div>
</div>
<div class="col-sm-4">
<div class="card">...</div>
</div>
</div>
then in your css:
.scroll {
max-height: 100px;
overflow-y: auto;
}
I am wanting to line two panels up alongside each other.
I currently have one panel (12 wide) which is above and I want two panels to sit below it next to each other to be 6 wide) however the second panel won't line alongside the first panel:
HTML
.panel-heading {
background: #666;
color: #FF7800;
font-family: sans-serif;
}
.panel-body {
background: #999;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
</div>
</div>
</div>
I have tried floating the panel left but this has no effect, any help would be great. Thanks
You need to use only one container
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
<div class="col-sm-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
</div>
</div>
You don't need to make new rows for every panel, and you don't need a new container either.
Also, if your goal was to have this be a two-column thing on all screen sizes, you need to use the col-xs-* classes.
.panel-heading {
background: #666;
color: #FF7800;
font-family: sans-serif;
}
.panel-body {
background: #999;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
<div class="col-xs-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
<div class="col-xs-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
</div>
</div>
Bootstrap by default makes a row go full width.
Try moving both 6's into the same row, that should let them sit next to each other.
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body"> Panel Conent </div>
</div>
<div class="col-sm-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body"> Panel Conent </div>
</div>
</div>
</div>
I'm using Bootstrap 3 and trying to solve this what's mocked on the image. I used one row with two cols, and they are next to each other like in the image, but when I resize to mobile I want the right side to fall beneath the left. Any help is appreciated, thank you.
Code sample:
<div className="container">
<div className="row">
<div className="col-xs-4 col-offset-xs-1">
<h1>1</h1>
</div>
<div className="col-xs-4">
<div className="row">
<h1>2</h1>
</div>
</div>
.black{background-color:#000; height:320px;}
.red{background-color:#F00; height:100px;margin-bottom:10px;}
<!-- 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">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12 black">
black
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12 red">
one
</div>
</div>
<div class="row">
<div class="col-xs-12 red">
two
</div>
</div>
<div class="row">
<div class="col-xs-12 red">
three
</div>
</div>
</div>
</div>
</div>
Bootstrap allows nesting your elements easily, here you go: https://jsfiddle.net/denea/DTcHh/25594/
<div className="container">
<div class="row">
<div class="col-sm-6 col-xs-12" id="first">
<h1>1</h1>
</div>
<div class="col-sm-6 col-xs-12" id="second">
<div class="row">
<h1>2</h1>
</div>
<div class="row">
<h1>3</h1>
</div>
<div class="row">
<h1>4</h1>
</div>
</div>
</div>
and read this: http://getbootstrap.com/css/#grid-nesting
Bootstrap allows for nesting which will provide what you need:
<div class="row">
<div class="col-sm-6">
Left column
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
Right column, row 1
</div>
</div>
<div class="row">
<div class="col-sm-12">
Right column, row 2
</div>
</div>
<div class="row">
<div class="col-sm-12">
Right column, row 3
</div>
</div>
</div>
</div>
More info here.
You can achieve this by using flexbox and media query
#media (max-width: 360px) {
.container > .row {
display:flex;
flex-flow: row-reverse wrap;
}
}
Demo: https://jsfiddle.net/xs3joev8/1/
<form class="container">
<div class="row">
<div class="col-md-1">
<label for="vol" class="control-label">Analysis Volume</label>
</div>
<div class="col-md-3">
<div id="volume">
<div class="control">
<span class="knob"></span>
</div>
</div>
</div>
<div class="col-md-1">
<label for="username" class="control-label vol-box">50% usage</label>
</div>
</div>
</form>
I have been trying to arrange these three items in a row like this in image, but i am not sure what class to apply and also in smaller devices i need to disable the column completely.
<!-- HTML --->
<div class="module-wrap">
<form class="container-fluid">
<div class="row hidden-xs">
<div class="col-md-3">
<label for="vol" class="control-label">Analysis Volume</label>
</div>
<div class="col-md-6">
<div id="volume">
<div class="control">
<span class="knob"></span>
</div>
</div>
</div>
<div class="col-md-3">
<label for="username" class="control-label vol-box">50% usage</label>
</div>
</div>
</form>
</div>
/** CSS **/
.module-wrap {
width: 200px;
margin: 0 auto;
}
I added the class "hidden-xs" to the row, this will hide the div and everything in it on small devices. Also the columns must add up to a total of twelve.
You will need to wrap everything in a div to limit the total width.
I hope this solves your problem.
It seems like a simple question, but I simply can't find an answer.
This fiddle should be fairly straightforward:
http://fiddle.jshell.net/52VtD/4040/
<div class="panel panel-default entete" >
<div class="row">
<div class="col-md-6">
<div class="title">
to be centered vertically
</div>
</div>
<div class="col-md-2">
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
<div class="col-md-2">
Text
</div>
<div class="col-md-2">
Text
</div>
</div>
</div>
I'm trying to align vertically the contents of the first column relatively to the others.
If the window is resized (and there is no column to its right), the first column should be as high as its content (cannot use a fixed height).
The correct way to do this using Bootstrap 4 Grid is by using one of then align-items-... classes on the .row element, or align-self-... on the .col elements.
In the case of the OP's original request, the best implementation would be
<div class="col-md-6 align-self-center">
<div class="title">
to be centered vertically
</div>
</div>
If you wanted to, for example, set all of the .col elements to be aligned to the bottom vertically, you would set align-items-end on the .row element like so:
<div class="row align-items-end">
Source: https://getbootstrap.com/docs/4.0/layout/grid/#vertical-alignment
Check out this http://fiddle.jshell.net/52VtD/4043/
<div class="panel panel-default entete" >
<div class="row" style="display:table">
<div class="col-md-6" >
<div class="title" style="display:cell;vertical-align:middle">
to be centered vertically
</div>
</div>
<div class="col-md-2">
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
<div class="col-md-2">
Text
</div>
<div class="col-md-2">
Text
</div>
</div>
</div>
http://fiddle.jshell.net/8uzn7fou/2/
HTML:
<div class="panel panel-default entete" >
<div class="row" >
<div class="col-md-6 title_div" >
<div class="title" >
to be centered vertically<br/> to be centered vertically
</div>
</div>
<div class="col-md-2">
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
<div class="col-md-2">
Text 2
</div>
<div class="col-md-2">
Text 3
</div>
</div>
</div>
CSS:
.title_div{
display: table;
}
.title{
height:100%; display: table-cell!important;
vertical-align: middle;
}
JQ:
function setHeight()
{
var max=0;
$('.entete .col-md-2').each(function(){
var h=$(this).height();
if(h>max) max=h;
})
$('.title_div').height(max);
}
setHeight()
Note: In function setHeight () should be added to check the width of the window in order not executed for smaller screens