How can a bootstrap grid be styled with a simple header like the picture below?
When I try changing the background color of the first row, the color doesn't extend to the edge of the grid because of the grid padding. When I remove the left/right grid padding, it messes up the rounded corners.
The html looks like this:
<div class="container-fluid" style="border: solid 1px black; border-radius: 10px; max-width: 400px">
<div class="row-fluid">
<div class="span3">Name</div>
<div class="span3">Count</div>
</div>
<div class="row-fluid">
<div class="span3">Joe</div>
<div class="span3">10</div>
</div>
<div class="row-fluid">
<div class="span3">Bob</div>
<div class="span3">7</div>
</div>
</div>
Does this help? rounded corners on divs with background color.
<div class="container-fluid" style="border: solid 1px black; border-radius: 10px; max-width: 400px; padding: 0px">
<div class="row-fluid" style="background-color: #f0f0f0; border-top-left-radius: 10px; border-top-right-radius: 10px;">
<div class="span3">Name</div>
<div class="span3">Count</div>
</div>
<div class="row-fluid">
<div class="span3">Joe</div>
<div class="span3">10</div>
</div>
<div class="row-fluid">
<div class="span3">Bob</div>
<div class="span3">7</div>
</div>
</div>
This is one of those cases where you probably should be using a table. Screen reader users will appreciated it, and Bootstrap has styles built in that should help.
http://twitter.github.com/bootstrap/base-css.html#tables
Related
I am using Bootstrap v5 and would like to get a grid layout, where one column has position:fixed so that it scrolls with the very long column left to it.
The issue is the following:
Whenever the height of the first row gets too large such that the second row (with the position:fixed column) moves out of the viewport, then also the column ("Some sample content") disappears. For smaller heights, it works as expected.
The example code is:
<div class="container">
<div class="row mt-5">
<div class="col-md-8" style="min-height:200px; border: 1px solid red">
</div>
<div class="col-md-4">
Box1
</div>
</div>
<div class="row mt-3">
<div class="col-md-8" style="min-height:4000px; border: 1px solid red">
</div>
<div class="col-md-4">
<div style="position:fixed">
Some sample content
</div>
</div>
</div>
<div class="row">
<div class="col-md-8" style="min-height:500px; border: 1px solid red">
</div>
<div class="col-md-4">
Box End
</div>
</div>
You can find an example at: https://jsfiddle.net/4cma32k9/1/
Do you have any ideas to resolve it?
Best,
Tom
Use sticky position:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" >
<div class="container">
<div class="row mt-5">
<div class="col-md-8" style="min-height:200px; border: 1px solid red">
</div>
<div class="col-md-4">
Box1
</div>
</div>
<div class="row mt-3">
<div class="col-md-8" style="min-height:4000px; border: 1px solid red">
</div>
<div class="col-md-4">
<div class="sticky-top">
Some sample content
</div>
</div>
</div>
<div class="row">
<div class="col-md-8" style="min-height:500px; border: 1px solid red">
</div>
<div class="col-md-4">
Box End
</div>
</div>
</div>
When I try to fix problem in JSFiddle i just add border and i see already your
Some sample Content
text is positioned by viewport whatever you do. In this point your result is what you want with large screen?
<div class="col-md-4" style="border:1px solid green;" >
<div style="position:fixed; border:1px solid gold;">
Some sample content
</div>
</div>
position:fixed similarty position:absolute both abolute and fixed
take the defined element out of the normal flow. Depends on the relatively positioned parent element.
Maybe some bootstrap problem occurs. Try to figure out without bootstrap codes. give Two or more divs and style it. Then try to shape it and reach what you want, if it is not working , I'll write and try it when I'm available.
Please make you sure, all option you try and give me feedback.
<div>
<div style="position:fixed; z-index:9999;">
do something ....
</div>
</div>
So whatever content is in this div, its position is always in front of other content. If you want the content in this div to be behind the content of another div then you can use z-index:-9999
I'm trying to make some space / gap between 2x col-sm-6 inside an row. Have tried some methods from earlier posts here from Stack Overflow, but none seem to make the right result.
What I have tried:
<div class="row">
<div class="col-sm-6">
<div class="col-md-12 contentpage3">
</div>
</div>
<div class="col-sm-6">
<div class="col-md-12 contentpage3">
</div>
</div>
</div>
Well... this creates the right spacing, but then the left and right sides are not allign with the rest of the page content. To help you guys understand what I'm trying to explain, here is a picture.
Here you can see that the upper white content, the width is what I'm trying to keep for all the elements inside the page. I know its because the extra div I added, because the following code is producing the upper white content box you see in the picture, but then there is no spacing. Have also tried with col-md-5 and an offset of 2 but this creates too much spacing.
<div class="row">
<div class="col-sm-6 contentpage3">
</div>
<div class="col-sm-6 contentpage3">
</div>
</div>
What am I doing wrong?
You can do something like this.
All .col-* elements should be inside row elements.
All .col-* elements should contain content, not be content.
.example {
padding-bottom: 15px;
background: #ccc;
}
.example > .row > div {
margin-top: 15px;
}
.example .inside {
height: 50px;
background: #fff;
border: 1px solid #eee;
}
<div class="container-fluid example">
<div class="row">
<div class="col-xs-12">
<div class="inside"></div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="inside"></div>
</div>
<div class="col-xs-6">
<div class="inside"></div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
When using the bootstrap grid, the vertical spaces and the most left & right are 15px but the spaces between the columns are double: 30px.
Is there a way to make them also 15px without changing Bootstrap CSS?
It's very easy to change the gutter without affecting the core bootstrap.css and still be able to use the same classes to push pull and offset.
Just make sure your .row around the new gutters has negative left and right margin equal to the padding on the left and right of the columns. Just like all floated elements this grid, like the Bootstrap grid, is exactly the same and will still require no more than 12 columns per row, if exceeded all heights need to be equal or you will need to clear them or use some other means such as jQuery or making them all the same height.
There is no vertical spacing on the grid, any vertical spacing comes from the children inside the column and it's usually the bottom margin value.
https://jsbin.com/wonuni/1/
CSS
.row.grid-15-gutter {
margin-left: -7.5px;
margin-right: -7.5px;
}
.row.grid-15-gutter [class*="col-"] {
padding-left: 7.5px;
padding-right: 7.5px;
}
.panel {
border: 1px solid red;
padding: 10px;
margin-bottom: 15px;
}
HTML
<div class="container">
<h2>Modified Grid</h2>
<div class="row grid-15-gutter">
<div class="col-sm-5">
<div class="panel">1</div>
</div>
<div class="col-sm-7">
<div class="panel">2</div>
</div>
</div>
<div class="row grid-15-gutter">
<div class="col-sm-5">
<div class="panel">1</div>
</div>
<div class="col-sm-7">
<div class="panel">3</div>
</div>
</div>
<hr>
<h2>Regular Grid</h2>
<div class="row">
<div class="col-sm-5">
<div class="panel">1</div>
</div>
<div class="col-sm-7">
<div class="panel">2</div>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<div class="panel">1</div>
</div>
<div class="col-sm-7">
<div class="panel">3</div>
</div>
</div>
</div>
Given the following code
<div style="border:solid 5px orange;width:400px;height:400px">
<div style="display:table;border:solid 1px red;width:100%;height:100%">
<div style="display:table-row;border:solid 1px blue">
<div style="display:table-cell;border:solid 1px green;height:100%">
<div style="height:100%;background:yellow;overflow-y:auto">CONTENT
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>sss
</div>
</div>
</div>
<div style="display:table-row;border:solid 1px blue">
<div style="display:table-cell;border:solid 1px green;height:100px">
<div>INPUT</div>
</div>
</div>
</div>
Chrome correctly sizes the CONTENT area by the available size for the table cell while Firefox and IE increase the size of the table cell to fit the content.
How can I make FF/IE behave like Chrome?
Example in Fiddle:
http://jsfiddle.net/2p6Jx/
UPDATE : I cannot use fixed height, the table should change according to it's parent element height and width
Update 2: adding display:-moz-stack solved the issue in FF, now it is just IE (http://jsfiddle.net/2p6Jx/3/)
I change your code and it works in IE/FF/chrome.
<div style="border:solid 5px orange;width:400px;height:400px">
<div style="display:table;border:solid 1px red;width:100%;height:100%">
<div style="display:table-row;height:300px;width:100%;">
<div style="display:table-cell;">
<div style="background:yellow;overflow-y:auto;height:300px;">
CONTENT
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>sss
</div>
</div>
</div>
<div style="display:table-row;height:100px;width:100%;">
<div style="display:table-cell;border:solid 1px green;height:100px">
<div>INPUT</div>
</div>
</div>
</div>
</div>
I am working with Bootstrap 3.0 and would like to accomplish something along these lines
Favorites Add
Where favorites is pulled left and wrapped in an H3 and the add is pulled right and wrapped in an anchor. They are bottom aligned and on the same line.
Here is what I have that is not working:
<div class="vertical-gutter-xs row container">
<div class="row">
<div clas="col-md-6" style="border: 1px solid red"><h3>Favorites</h3></div>
<div clas="col-md-6" style="text-align: right; border: 1px solid red"><a>add</a></di>
</div>
<hr />
</div>
Many thanks in advance.
You could use a pull-right link inside the H3..
<div class="col-md-6"><h3>Favorites add</h3></div>
Demo: http://bootply.com/87773
This should get you most of the way there:
<div class="vertical-gutter-xs row container">
<div class="row">
<div clas="col-md-6" style="float:left; width:50%;"><h3>Favorites</h3></div>
<div clas="col-md-6" style="float:right; width:50%; text-align: right"><a>add</a></div>
</div>
<hr/>
</div>