In my app i have following, typical for bootstrap view structure:
<div class="row">
<div class="col-lg-9">
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-body">
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-body">
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
</div>
content length inside panel class may be different for each column. Moreover, in one on them part of it is being displayed only when user press a button.
How to ensure that each column will always have the same height? I can setup same column height with use of display: flex as below:
.col-md-4 {
display: flex;
}
all 3 columns have same height. But panels not. How to achieve it?
If the .col-md-4 items have height defined already you can simply add .h-100 (height: 100%) to panels class="h-100 panel panel-default".
https://getbootstrap.com/docs/4.0/utilities/sizing/
in bootstrap 4 all columns have display flex & the height of columns is the same. so the content in every column has an effect on another column so if the inside content has full height all of them be the same height.
you need to add h-100 class on content in columns.
like <div class="h-100 panel panel-default"> </div>
be attention this tag should not have vertical margins.
Related
how can I center my main container horizontally, using excising bootstrap classes
here is the container:
<div class="container-fluid main-container">
<div class="col-md-10 content">
<div class="panel panel-default">
<div class="panel-heading">
Edit existing questions
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
The way it looks now
Here you go with a solution https://jsfiddle.net/w4gLtcz5/1/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid main-container">
<div class="row">
<div class="col-md-offset-1 col-md-10 content">
<div class="panel panel-default">
<div class="panel-heading">
Edit existing questions
</div>
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
In bootstrap, by default there is 12 columns.
Since your container is occupying 10 columns out of 12, so started your container from 2 column instead of column 1. So that in both the side of the container you will have equal space.
I considered col-md-10 is your number of columns
I have added col-md-offset-1.
Please use col-xs-offset-x
Instead of x you can write number between 1 to 12.
Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns:
Your code will be.
<div class="container-fluid main-container">
<div class="col-md-10 content col-xs-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
Edit existing questions
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
Reference link https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
I have bootstrap grid
<div class="container">
<div class="row">
<div class="col-sm-1">Column 1</div>
<div class="col-sm-2">Column 2</div>
<div class="col-sm-1">Column 3</div>
</div>
<div ng-repeat="Item in Items">
<div class="row">
<div class="col-sm-2">{{Item.Field1}</div>
<div class="col-sm-4">{{Item.Field2}}</div>
<div class="col-sm-6">{{Item.Field3}}</div>
</div>
</div>
</div>
It should display a 3-column grid, instead the columns are displayed as rows. What am I doing wrong?
So your first row is the like the "header" and the next row are the records. Your header is 1-2-1 but your records are 2-4-6 => it won't line up. To keep it from stacking even on small screens you can do col-xs-x instead.
<div class="row">
<div class="col-xs-3">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-3">Column 3</div>
</div>
<div ng-repeat="Item in Items">
<div class="row">
<div class="col-xs-3">{{Item.Field1}</div>
<div class="col-xs-6">{{Item.Field2}}</div>
<div class="col-xs-3">{{Item.Field3}}</div>
</div>
</div>
I'm assuming you want them to always line up. Bet way to do that will be this:
<div class="container">
<div class="row">
<div class="col-sm-2">Column 1<br>
{{Item.Field1}}
</div>
<div class="col-sm-2">Column 2<br>
{{Item.Field2}}</div>
<div class="col-sm-2">Column 3<br>
{{Item.Field3}}</div>
</div>
</div>
Alternatively, you can replace the br and wrap the elements in divs and display: block;
Working example here:
http://www.bootply.com/tb10AKqzM1
Having put in the code myself, it actually does work. It will put in rows when the viewport size is below the small viewing size (so xs, extra small size). If you want to view it on all viewing sizes then you would have to add xs instead of s to all your classes.
I'm using Bootstrap to build a Dashboard, but I'm rather new to Bootstrap and I'm having issues getting the final grid layout in the image below. The problem is that when I add the 4th column (Table), which will vertically house more data than the other 3 columns on the left (Widgets), is pushing down the bottom row content (Chart) like in this image. It looks easy, and I guess it has something to do with the 'colspan' or 'rowspan' features, but I can't figure it out.
Why is my chart getting pushed down like this, and how can I fix it?
You have to nest to achieve that.
For example:
<div class="container"
<div class="row">
<div class="col-md-9 not-right-table-content">
<!--nest content here, it's like a new grid-->
<div class="row">
<div class="col-md-4">
widget 1
</div>
<div class="col-md-4">
widget 2
</div>
<div class="col-md-4">
widget 3
</div>
<div class="col-md-12">
chart
</div>
<div class="col-md-12">
other content
</div>
</div>
</div>
<div class="col-md-3">
right table html here
</div>
</div>
</div>
#Nuno - Use below "HTML Code Snippet" or see my JS Fiddle (you might need to scroll boundaries to extend Result pane.)
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 not-right-table-content">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">widget 1</div>
<div class="col-lg-4 col-md-4 col-sm-4">widget 2</div>
<div class="col-lg-4 col-md-4 col-sm-4">widget 3</div>
<div class="col-lg-12 col-md-12 col-sm-12">chart</div>
<div class="col-lg-12 col-md-12 col-sm-12">other content</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">right table html here</div>
</div>
You can use below resources to know more about bootstrap:
Bootstrap - Approach to better, faster, stronger web development
Blasting off with Bootstrap
Using Bootstrap, I have a grid column class="col-lg-3" that I want to place it in position:fixed while the other .col-lg-9 is normal position (scroll-able through the page).
<div class="row">
<div class="col-lg-3">
Fixed content
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
Just the same way like the left column in LifeHacker.com
You will see that the left part is fixed however I scroll though the page.
I use bootstrap v3.1.1
<div class="row">
<div class="col-lg-3">
<div class="affix">
fixed position
</div>
</div>
<div class="col-lg-9">
Normal data enter code here
</div>
</div>
iterating over Ihab's answer, just using position:fixed and bootstraps col-offset you don't need to be specific on the width.
<div class="row">
<div class="col-lg-3" style="position:fixed">
Fixed content
</div>
<div class="col-lg-9 col-lg-offset-3">
Normal scrollable content
</div>
</div>
Following the solution here http://jsfiddle.net/dRbe4/,
<div class="row">
<div class="col-lg-3 fixed">
Fixed content
</div>
<div class="col-lg-9 scrollit">
Normal scrollable content
</div>
</div>
I modified some css to work just perfect:
.fixed {
position: fixed;
width: 25%;
}
.scrollit {
float: left;
width: 71%
}
Thanks #Lowkase for sharing the solution.
in Bootstrap 3 class="affix" works, but in Bootstrap 4 it does not.
I solved this problem in Bootstrap 4 with class="sticky-top"
(using position: fixed in CSS has its own problems)
code will be something like this:
<div class="row">
<div class="col-lg-3">
<div class="sticky-top">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
Updated for Bootstrap 4
Bootstrap 4 now includes a position-fixed class for this purpose so there is no need for additional CSS...
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="position-fixed">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
</div>
https://www.codeply.com/go/yOF9csaptw
Bootstrap 5
The solution is very similar to v4, but you can use responsive variations with .sticky-*-top classes.
<div class="row">
<div class="col-lg-3">
<div class="sticky-md-top">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
Docs: https://getbootstrap.com/docs/5.0/helpers/position/#responsive-sticky-top
Use this, works for me and solve problems with small screen.
<div class="row">
<!-- (fixed content) JUST VISIBLE IN LG SCREEN -->
<div class="col-lg-3 device-lg visible-lg">
<div class="affix">
fixed position
</div>
</div>
<div class="col-lg-9">
<!-- (fixed content) JUST VISIBLE IN NO LG SCREEN -->
<div class="device-sm visible-sm device-xs visible-xs device-md visible-md ">
<div>
NO fixed position
</div>
</div>
Normal data enter code here
</div>
</div>
With bootstrap 4 just use col-auto
<div class="container-fluid">
<div class="row">
<div class="col-sm-auto">
Fixed content
</div>
<div class="col-sm">
Normal scrollable content
</div>
</div>
</div>
If you really want to do it that way, you can't do it in "col- *", because it's going to overlap each other, you should do it in the parent class "row", but depending on what you're doing, you might have a problem with the browser scroll that will be "cut" from the screen, however, is simple to solve, just control the column width and everything will be fine.
<div class="row fixed-top h-100">
<div class="col-lg-3">
Fixed content
</div>
<div class="col-lg-9 overflow-auto h-100">
Normal scrollable content
</div>
</div>
Use .col instead of col-lg-3 :
<div class="row">
<div class="col">
Fixed content
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
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>