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;
}
Related
I cannot center my five two columns inside of a ten column inside of a twelve column. http://jsfiddle.net/p8znkgv2/. I have tried the following "solutions" without any luck:
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-1"> </div>
<div class="col-sm-10 col-centered">
<div class="col-sm-2">Coontent</div>
<div class="col-sm-2">Coontent</div>
<div class="col-sm-2">Coontent</div>
<div class="col-sm-2">Coontent</div>
<div class="col-sm-2">Coontent</div>
</div>
</div>
<div class="col-sm-1"> </div>
</div>
.col-centered{ margin: auto; float: none; }
Make the container a table and each column a table cell item ( failed )
Make the container (10 column) float none with an auto margin. ( failed on large displays )
So how can I center each two column inside the ten column with the ten column centered inside the twelve column?
So how can I center each two column inside the ten column with the ten column centered inside the twelve column?
By using .col-sm-offset-* class. Examples can be found here. http://getbootstrap.com/css/#grid-offsetting. Here's a fiddle as well. http://jsfiddle.net/yongchuc/m12cysv1/
Something like this? http://jsfiddle.net/p8znkgv2/2/
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-10 col-sm-offset-1">
<div class="col-sm-2 col-sm-offset-1">Coontent</div>
<div class="col-sm-2">Coontent</div>
<div class="col-sm-2">Coontent</div>
<div class="col-sm-2">Coontent</div>
<div class="col-sm-2">Coontent</div>
</div>
</div>
<div class="col-sm-1"> </div>
</div>
</div>
A lot of problems with your structure.
One is you create child div elements with those grid classes e.g. col-sm-* without adding and element with .row class first.
Html should be:
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-1"> </div>
<div class="col-sm-10 col-centered">
<div class="row">
<div class="col-sm-2">Coontent</div>
<div class="col-sm-2">Coontent</div>
<div class="col-sm-2">Coontent</div>
<div class="col-sm-2">Coontent</div>
<div class="col-sm-2">Coontent</div>
</div>
</div>
<div class="col-sm-1"> </div>
</div>
</div>
</div>
</div>
And regarding to center those 5 cols, since there's no specific class for 5 cols since it's a 12 grid system, add a custom style for those elements.
e.g.
.col-centered .row .col-sm-2 {
width: 20%;
}
Fiddle
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
When I set up my rows and columns like below, the row widths are slightly different. Suggestions?
EDIT: The row widths are not different. The column width does not fill the space. The fiddle has also been update to illustrate the problem.
<div class="container">
<div class="row" style="background: red;">
<div class="col-xs-4" id="logo">
content
</div>
<div class="col-xs-8">
</div>
</div>
<div class="row">
<div class="col-xs-7 col-xs-push-3">
</div>
<div class="col-xs-3 col-xs-pull-7">
</div>
<div class="col-xs-2" style="background: #000">
content
</div>
</div>
link to fiddle: http://jsfiddle.net/PRP89/4/
Problem:
Trying to create a layout using Bootstrap 3 that consist of two columns on the left of the page and one main column to the right of the two columns. The two columns on the left should be on top of each other.
Code:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Left column 1</h3>
</div>
<div class="widget-content" id="gallery"></div>
</div>
</div>
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Left column 2</h3>
</div>
<div class="widget-content" id="gallery"></div>
</div>
</div>
<div class="col-md-8">
<div class="widget">
<div class="widget-header">
<h3>Main column</h3>
</div>
<div class="widget-content">
<div id="map_canvas" style="height: 280px;"></div>
</div>
</div>
</div>
</div>
</div>
Output:
Current code produce two columns next to each other on top the main column.
Desired output:
You should use a div with class .col-sm-4 and .col-sm-8 respectively as the parent div for the two column layout you want to use and then create the desired widgets within those divs.
Check out my JSFiddle: http://jsfiddle.net/nJtX9/9/
Please make sure to enlarge the results window to see the correct layout. Otherwise it will stack the div containers for responsive purposes.
You are using 2 col-md-4 meaning is taking 8 columns already + using col-md-8 = 16 columns, bear in mind bootstrap can contain 12 columns per row,
so the way to go around this is use col-md-2 instead of col-md-4
Hope i make this clear.
<div class="container">
<div class="row">
<div class="col-sm-6" style="background-color:gray">
<div class="row" style="background-color:aliceblue">
<h1>col1----row1</h1>
</div>
<div class="row">
<h1>col1----row2</h1>
</div>
</div>
<div class="col-sm-6" style="background-color: aqua">
<h1>col2-----row<br />col2---row<br />col2---row</h1>
</div>
</div>
</div>
I have a grid using twitter bootstrap that we are converting from a table. Ordinarily we would consider this tabular data and just use a table but we have to (client requirements) be able to reliably print the table and given the bag of hurt printing log tables is, I'm migrating to bootstrap grids.
What I need to be able to simulate is the rowspan that we're currently using in the table.
Note I'm using a custom bootstrap with a grid of 10 cols because of size constraints
JS Fiddle of example http://jsfiddle.net/dstarh/hKjEM/
<div class="container">
<div class="row">
<div class="span1">Date</div>
<div class="span2" style="text-align:center;">Total Time</div>
<div class="span1" style="text-align:right;">Time of activity</div>
<div class="span1" style="text-align:left;">Time of Day</div>
<div class="span1" style="text-align:right;">Distance</div>
<div class="span4" style="text-align:left;">Description</div>
</div>
<div class="row">
<div class="span3">
<div class="row">
<div class="span1" style="height:100%;">01/31/2013</div>
<div class="span2" style="height:100%;">8 hours/12 miles
<hr> <span class="target-calories">
TARGET 15 miles
</span>
</div>
</div>
</div>
<div class="span7">
<div class="row">
<div class="span1" style="text-align:right;">1 hour</div>
<div class="span1" style="text-align:left;">morning</div>
<div class="span1" style="text-align:right;">3 miles</div>
<div class="span4" style="text-align:left;">ran 3 miles</div>
</div>
<div class="row">
<div class="span1" style="text-align:right;">1 hour</div>
<div class="span1" style="text-align:left;">noon</div>
<div class="span1" style="text-align:right;">2 miles</div>
<div class="span4" style="text-align:left;">walked 2 miles</div>
</div>
<div class="row">
<div class="span1 offset2" style="text-align:right;">2 miles</div>
<div class="span4" style="text-align:left;">biked 2 miles</div>
</div>
<div class="row">
<div class="span1 offset2" style="text-align:right;">4 miles</div>
<div class="span4" style="text-align:left;">ran 4 miles</div>
</div>
<div class="row">
<div class="span1" style="text-align:right;">4 miles</div>
<div class="span1" style="text-align:left;">night</div>
<div class="span1" style="text-align:right;">4 miles</div>
<div class="span4" style="text-align:left;">ran 4 miles</div>
</div>
</div>
</div>
</div>
I need the first two columns (inside the span3) to be vertically centered next to the rest of the columns/rows ). The number of rows on the right (in the span 7) is random, anywhere from 1 to likely 10-15 on the high end.
This should get you close. You do have to stretch the frame wide enough to allow responsive to do its thing. Note that vertical alignment is a challenge in itself and may require a nested table or JavaScript solution (see below).
http://jsfiddle.net/WfDUY/4/
.row {
position: relative;
}
.gray {
background-color: #eee;
height: 100%;
vertical-align: middle;
height: 100%;
position: absolute;
}
.grayer {
background-color: #ddd;
}
<div class="row">
<div class="span10">
<div class="row">
<div class="span3">I want to be Vertically Aligned in the middle</div>
<div class="span7 offset3">
...
Here's an example with the nested table solution: http://jsfiddle.net/WfDUY/6/