I really want full width colour blocks to represent different sections of my webpage.
I am using bootstrap 3 to build my website. The website is in a container from the standard bootstrap but I would liked some of the sections to be colouful blocks that span the full browser windows.
Does anyone know how this is done and can post an example please?
What you need to do is to place the container within another tag. The tag should be the one taking up the entire width of the page with css background attribute. In this case, I have chosen the html5 "section" tag. Below is an example. You can take a look at this jsfiddle
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 3 - Full width coloured blocks</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type='text/css'>
.colored-block {
width: 100%;
padding: 30px 0px;
color: #fff;
}
.purple { background: purple; }
.green { background: green; }
.blue { background: blue; }
</style>
</head>
<body>
<section class="colored-block purple">
<div class="container">
<h1>Header 1</h1>
<p>Paragraph content goes here</p>
</div>
</section>
<section class="colored-block green">
<div class="container">
<h1>Header 2</h1>
<p>Paragraph content goes here</p>
</div>
</section>
<section class="colored-block blue">
<div class="container">
<h1>Header 3</h1>
<p>Paragraph content goes here</p>
</div>
</section>
</body>
</html>
Here is a jsfiddle
This should help you to understand your problem. 3 section made like red, green ,blue.
<div class="row">
<div class="col-md-4 ">
<p class=text-danger> red color</p>
</div>
<div class="col-md-4 ">
<p class=text-success> green color</p>
</div>
<div class="col-md-4 ">
<p class=text-primary> blue color</p>
</div>
</div>
Here is a jsfiddle, 3 columns, full height with background colors.
jsfiddle
CSS:
html,body,.container-fluid
{
height:100%;
}
.container
{
display:table;
width: 100%;
}
.row
{
height: 100%;
display: table-row;
}
.col-md-4, .col-xs-4
{
display: table-cell;
float: none;
}
.red{background:red;}
.green{background:green;}
.blue{background:blue;}
HTML
<div class="container">
<div class="row">
<div class="red col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
<div class="blue col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
<div class="green col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
</div>
</div>
You can easily achieve full-width coloured sections in Bootstrap by using 'container-fluid' instead of 'container'.
Example:
CSS:
.red{background:red;}
.green{background:green;}
.blue{background:blue;}
HTML:
<div class="container-fluid">
<div class="row">
<div class="red col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="blue col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="green col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>
Related
is there a way to use the bootstrap column system and max width at the same time using 100% of the page width?
There is an example of that i'm trying to do here:
https://jsfiddle.net/0e1nLun0/2/
.box-one{
background-color: red;
max-width: 200px;
}
.box-two{
background-color: green;
}
.box-three{
background-color: red;
max-width: 200px;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-3 box-one">
<p>Test box one</p>
</div>
<div class="col-md-6 box-two">
<p>Test box two</p>
</div>
<div class="col-md-3 box-three">
<p>Test box three</p>
</div>
</div>
</body>
</html>
After the 3rd box there is a white space and that's normal, but is there a way for the second box(the green one) to increase its width so there won't be any white space?
The goal is that the second box is still responsive.
Thanks for your help.
First, you should use a col in a row, and a row in a container or container-fluid.
When having that, change the row to display:flex; and let your col-6 grow using flex-grow: 1;
.row {
display: flex;
}
.col-md-6 {
flex-grow: 1;
}
.box-one {
background-color: red;
max-width: 200px;
}
.box-two {
background-color: green;
}
.box-three {
background-color: red;
max-width: 200px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 box-one">
<p>Test box one</p>
</div>
<div class="col-md-6 box-two">
<p>Test box two</p>
</div>
<div class="col-md-3 box-three">
<p>Test box three</p>
</div>
</div>
</div>
Ofcourse, to have this working responsively, you need some additional work.
Another way is upgrade to Bootstrap 4, which grid is built with flexbox.
I'm trying to build two-column footer with fluid backgrounds using bootstrap grid system, see the example below. The content inside these columns should not be fluid. It also should be responsive and stack on small devices.
Is this possible?
Here's what I did for now, but as i said the content should not be fluid, how do I achieve this?
.footer .row {
height: 100px;
color: white;
}
.left {
background-color: #222;
}
.right {
background-color: #333
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-md-5 left">
Left
</div>
<div class="col-md-7 right">
Right
</div>
</div>
</div>
</div>
Link to pen
Example Image
HTML:
<footer>
<div class="container-fluid">
<div class="row">
<div class="footer-col-rt col-md-6">
....
</div>
<div class="footer-col-lf col-md-6">
...
</div>
</div>
</div>
</footer>
CSS:
footer .footer-col-rt {
background-color: #233140;
}
footer .footer-col-lf {
background-color: #2C3E50;
}
How to stick the columns together with bootstrap and css?
I would like to create something like this:
What I have created:
Here is my HTML & CSS markup:
<div class="container">
<div class="row">
<div class="col-md-4 ">
<div class="box1">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box2">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box3">
<h1>this is box 1 one</h1>
</div>
</div>
</div>
</div>
My css
.box1 {
background: red;
}
.box2{
background: green;
}
.box3 {
background: yellow;
}
Every single help would be appreciate!
There are many possibilities depending on what you are trying to achieve exactly.
If you want to remove the gap (called gutters) between ALL the columns of your design, you can customize your own bootstrap at http://getbootstrap.com/customize/#grid-system you'll see the variable "#grid-gutter-width" that needs to be set to 0.
If you want to have some contents that span outside the gutters, so they can touch adjascent elements, use a class to negate the gutter. Something like
.no-pad{
padding-left:0;
padding-right:0;
}
And add it to all columns you want without gutter.
If you want the background color to touch but still keep a nice sepperation of columns for your text, you can simply apply the background styles on the column itself.
The only way to achieve the result you are after is to remove the padding from Bootstraps column classes, like so:
.col-md-4 {
padding: 0;
}
However the above code will remove the padding from all col-md-4 column classes in your HTML. Best practise would be to add a unique class/ID and target the column that way, like so:
<div class="myClass">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 ">
<div class="box1">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box2">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box3">
<h1>this is box 1 one</h1>
</div>
</div>
</div>
</div>
</div>
.myClass .row .col-md-4 {
padding: 0;
}
This way you are only targeting specific code and not ALL the columns.
Bootstraps grid system adds "gutters" or padding to each column. Is is this that you want to overwrite. however if you were to simply apply padding:0px; to .col-md-4 you would remove padding from all instances of .col-md-4 which is unlikely.
The way around this would be to give a class to the "row" container which you can then target only instances of .col-md-4 within that class. In this example I have added the class boxes to the row. then in the css I use:
.boxes .col-md-4 {
padding-right: 0;
padding-left: 0;
}
this way, my padding changes are restricted to col-md-4 classes that are children of a boxes class.
I hope that helps.
Working example but using col-xs-4 as much smaller viewport:
.row {
background: #ccc;
}
.box {
height: 100px;
margin-bottom: 20px;
overflow: hidden;
}
.boxes .col-xs-4 {
padding-right: 0;
padding-left: 0;
}
.box1 {
background: red;
}
.box2 {
background: green;
}
.box3 {
background: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row boxes">
<div class="col-xs-4">
<div class="box box1">
<h1>this is box 1</h1>
</div>
</div>
<div class="col-xs-4 ">
<div class="box box2">
<h1>this is box 2</h1>
</div>
</div>
<div class="col-xs-4 ">
<div class="box box3">
<h1>this is box 3</h1>
</div>
</div>
seem to be stuck on what should be a trivial task. I have a section element like so
<section id="about">
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-6">
<h2 class="section-heading">Some Header</h2>
</div>
</div>
<div class="row alignBottom">
<div class="col-xs-5 col-xs-offset-1">
<p>Some content</p>
</div>
<div class="col-xs-5 col-xs-offset-1">
<p>Some more content</p>
</div>
</div>
</div>
</section>
What I have done is made this section the height of the viewport by doing
#about {
background: #cccccc;
min-height: 100vh;
}
Now within this section I have two rows. The first row should display at the top, so nothing I really need to do with this. The second row I need to display at the bottom of the section. To do this, I would have thought I would need to give the container a 100% height first, but this does not seem to change its height. The only way I can get the container 100% is by using 100vh again, but seeing its a child of the section, why wouldnt 100% work?
Even when I do get it 100% using 100vh, I cant seem to get the row at the bottom of the container. How would I go about doing this?
I have set up an example JSFiddle
Thanks
You can use display:flex for this. From what i understood you want one of the rows to be display on the top of the section and other on the bottom
Div to have 100% height and width body should also need to have 100% width and height ,instead you can set 100vh height on about section and 100vh height on container
here is the snippet
#about {
background: #cccccc;
height: 100vh;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;
}
.row {
display: flex;
border: 1px solid green;
}
.col {
margin-left: 15px;
}
<section id="about">
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-6">
<h2 class="section-heading">Some Header</h2>
</div>
</div>
<div class="row alignBottom">
<div class="col col-xs-5 col-xs-offset-1">
<p>Some content</p>
</div>
<div class="col col-xs-5 col-xs-offset-1">
<p>Some more content</p>
</div>
</div>
</div>
</section>
Hope this helps
You can adjust the position of the "alignBottom" row setting the correct "margin-top" at document ready:
The position of this row is: total height of the section minus the height of the row.
The snippet:
$('.alignBottom').css('margin-top', $('#about').height() - $('.alignBottom').height());
html, body {
height:100%;
}
#about {
background: #cccccc;
min-height: 100vh;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section id="about">
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-6">
<h2 class="section-heading">Some Header</h2>
</div>
</div>
<div class="row alignBottom">
<div class="col-xs-5 col-xs-offset-1">
<p>Some content</p>
</div>
<div class="col-xs-5 col-xs-offset-1">
<p>Some more content</p>
</div>
</div>
</div>
</section>
I have been hitting a area which I dont belive is coverd in the bootstrap documentation which is to add margins to col in bootstrap.
To fix this I used the following code but the issue is the centre box is always smaller then the outer two.
Does anyone have a fix to this?
HTML
<div class="row">
<div class="col-lg-4">
<div id="lightBlueFix" class="marginBoxes noMarginLeft">
<div class="clearBoth"></div>
</div>
</div>
<div class="col-lg-4">
<div id="lightGrey" class="marginBoxes">
</div>
</div>
<div class="col-lg-4">
<div id="lightYellow" class="marginBoxes noMarginRight">
</div>
</div>
</div>
CSS
.marginBoxes {
margin-left: 20px;
margin-right: 20px;
}
.noMarginLeft{
margin-left:0 !important;
}
.noMarginRight{
margin-right:0 !important;
}
Live Preview #
As suggested in the comments, I'd leave Bootstrap alone and make the boxes separate, possibly something along these lines:
#lightBlueFix { background-color: blue; }
#lightGrey { background-color: grey; }
#lightYellow { background-color: yellow; }
.bannerBox {
margin-left: 20px;
margin-right: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-lg-4">
<div id="lightBlueFix" class="bannerBox">
Blue
</div>
</div>
<div class="col-lg-4">
<div id="lightGrey" class="bannerBox">
Grey
</div>
</div>
<div class="col-lg-4">
<div id="lightYellow" class="bannerBox">
Yellow
</div>
</div>
</div>