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;
}
Related
I am trying to implement a design from my graphic designer, which whilst looks cool is giving me some headaches as i don't know how to implement in bootstrap.
We have a call to action section, which aligns with the 12 column grid system on its left and right extremes.
It also stretches to the view-port edges:
On the left we have red background stretching all the way to the view-port edge.
On the right we have a grey background image stretching all the way to the view-port edge.
I haven't been able to find a search term for what I am looking to achieve let alone where to start (other than have the cta use the background for the entire width, then overlay a left element over the top).
Any idea on how to code the below graphical layout in bootstrap please?
<section class="cta" style="background: grey; position: relative">
<div class="red" style="position: absolute; left: 0; width: 10%; background: red"></div>
<div class="text-outer">
<div class="container">
<div class="row">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
</div>
</section>
Using <div class="container-fluid"> as a starting point; I am guessing at your page's layout. Let's try this:
See below:
.cntn {
border: 1px red solid; /* you can remove this (not needed) */
}
.red {
background-color: red;
text-align: right;
margin: 0; /* optional */
width: 100px; /* adjust to suit your needs */
float: left;
}
.cta {
margin: 0; /* optional */
float: right;
border: 1px solid green; /* you can remove this (not needed) */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- make container fluid -->
<div class="container-fluid">
<div class="row">
<!-- heading area: hexagon -->
<div class="red">
<img src="http://placehold.it/100/100" />
</div>
<!-- heading area: call-to-action -->
<section class="cta">
Action
</section>
</div>
<div class="row cntn">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
Simply change 'div class="container"' to 'div class="container-fluid"'
Something like this? Where black should be the grey gradient and max-width:400px could be anything.
.cta {
overflow-x: hidden;
position: relative
}
.text-outer .container {
width: 100%;
max-width: 400px;
background: grey;
z-index: 2;
position: relative;
}
.text-outer:before,
.text-outer:after {
content: "";
position: absolute;
width: 50%;
height: 100%;
top: 0;
}
.text-outer:before {
background-color: red;
left: 0;
}
.text-outer:after {
background-color: black;
right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="cta">
<div class="text-outer">
<div class="container">
<div class="row">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
</div>
</section>
jsFiddleLink
I created with 3 divs as Left Center and Right but if you want to use Left and center then create your own class. Probably following will work
.custom {
width:calc(100% - (50% - 768px/2));
}
.custom {
width:calc(100% - leftCellWidth);
}
You can set height of left as per height of hex image.
Use jumbotron class outside the class container for full-width, as explained here.
HTML:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="red col-xs-4">
</div>
<div class="grey col-xs-8">
</div>
</div
</div>
</div>
CSS:
.red {
background: url('awesomeredimage.png');
background-size: cover;
}
.grey {
background: url('awesomegreyimage.png');
background-size: cover;
}
All your divs should be wrapped in the container div. And as some others have also suggested: container-fluid helps.
Within container fluid you can add a regular container for the rest of your content. My code below explains this.
You could take the easy route and just use the entire cta image you've posted as a clickable image with .img-responsive in a col-xs-12. In that case my fix takes you about 2 minutes:
<section style="background: grey; position: relative">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="/img/cta.jpg" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="container">
<!-- All you other content here-->
</div>
</div>
</div>
</div>
</section>
But you could also hack the design into cols, as I try to show in the code snippet below. Of course you need to tweak and decide on the exact sizes yourself.
<section style="background: grey; position: relative">
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 red">
<img src="/img/hexagon.png" class="img-responsive pull-right">
<!--and give this img a negative margin to flow over to the grey area-->
</div>
<div class="col-xs-1 grey-image"></div>
<div class="col-xs-3 grey-image">
<h3 class="text-center">Call to action</h3>
<p class="text-center">Discount etcetera</p>
</div>
<div class="col-xs-5 grey-image">
<button class="btn center-block">Request quote</button>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="container">
<!-- All you other content here-->
</div>
</div>
</div>
</div>
</section>
Use class="container-fluid" instead of class="container" and than do this style:
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
}
I'd like to use Twitter Bootstrap for one project which has a bit of a crazy layout.
The logo's background should start from the edge of the window, but the text in the logo should start where the .container begins.
Crazy, huh!
I'm not sure how to explain this so I drew it!
What I've done so far is this:
<div class="container">
<header>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- header -->
</div>
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.typography {
position: absolute;
right: 0px;
top: 20px;
line-height: 50px;
font-size: 50px;
font-weight: bold;
}
I created a demo#jsFiddle.
How should I structure my HTML, or what can I do with the CSS to achieve this effect.
CSS only solutions if possible.
Edit: Those kind of title element might appear on the page again, so solutions which are based on the fact that the element will be at the top of the page are not what I'm after.
First of all you have to take into account Grid System Rules:
Some Bootstrap grid system rules:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via
negative margin on .rows
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use
three .col-sm-4
So following the above rules you can achieve what you want like this:
Here a working JSFiddle fork from yours
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.container {
height: 500px;
}
.typography {
line-height: 35px;
font-size: 35px;
font-weight: bold;
padding-left: 0 !important; /*only because bootstrap are overwriting my styles*/
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper container-fluid">
<header>
<div class="row">
<div id="logo" class="pull-left col-xs-5 bg-theme">
<div class="row">
<div class="col-xs-offset-5 col-xs-7 typography">Dope
<br/>Text</div>
</div>
</div>
<div class="col-xs-7">
<nav class="pull-right">nav should be here</nav>
</div>
</div>
</header>
<div class="row">
<div class="container col-xs-offset-2 col-xs-8">
<p>Here you can put the content</p>
<p>and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more content</p>
</div>
</div>
</div>
You can change the # in col-xs-X as you wish to obtain your desire layout but always trying to follow the above rules.
I recommend making the following changes.
Start by making a .container-fluid
Then move your .container into your .container-fluid
lastly, move your header above your .container, but inside your .container-fluid
Once complete it should look something like.
<div class="container-fluid">
<header class="col-md-12>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- Header -->
<div class="container">
<!-- Other content -->
</div>
</div>
would something like this work? http://jsfiddle.net/swm53ran/312/
if you want to see how the structure could happen over and over again, you could just add the sectioned off divs like in this fiddle: http://jsfiddle.net/swm53ran/313/
<div class="body">
<div class="header col-xs-12">
<div class="row">
<div class="title col-xs-offset-1 col-xs-5">
This is the title
</div>
<div class="nav col-xs-5">
This is your nav
</div>
</div>
</div>
<div class="container col-xs-10 col-xs-offset-1">
This is where your content goes.
</div>
</div>
Use the grid system to isolate header and body:
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-4">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
</div>
Use .container-fluid for the content you want to be full width instead of the fixed-width that comes with .container.
Per Bootstrap:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
If you want container-fluid to go the absolute edge of the window, you can set padding: 0; like:
.container-fluid {
padding: 0;
}
Here's a fiddle demo for you to review. http://jsfiddle.net/xsqezfro/ (I put a border around .container so you can see the div.
#logo {
display:inline-flex;
margin-left:-200px;
background: #ffd800;
}
#logo .typography {
margin-left:200px;
}
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>
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>
I'm straggling with a simple layout issue:
Basically my goal is to create a toggled side menu. When the side menu is visible the main layout is 80% width, and when it is not visible the main layout would be 100% width, like so:
I'm using bootstrap 3 and would like to use their CSS markup, so I can add rows and columns to the main div (Lt-orange in the illustration).
Any help would be appreciated :)
EDIT:
Here is my progress so far:
<div class="container">
<div id="sidebar" style="border:solid 1px;width:20%;float:left">SIDEBAR</div>
<div style="border:solid 1px;width:100%">
<div style="border:solid 1px red">
<div class="row">
<div class="col-lg-6">Some Content</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-12">Some content</div>
</div>
</div>
</div>
</div>
</div>
<button onclick="document.getElementById('sidebar').style.display = document.getElementById('sidebar').style.display == 'none' ? 'block':'none'">TOGGLE</button>
Demo
Actually, you can't use 20% because bootstrap grid size works with 12s. Which means 100%=12/12 so 1/12 is 8,33% is the smallest unit. What is closest to you is for the sidebar to be 3/12=25%. Giving you code for this:
<div class="row">
<div class="col-xs-12 col-sm-3">
sidebar content
</div>
<div class="col-xs-12 col-sm-9">
main content here
<div class="row">
<div class="col-xs-12">
your 100% main content here
</div>
</div
</div>
I assume the bottom photo shows how it will look on a mobile device..?
I was working on a similar kind of solution, below is the snippet of code that works for me
below is the file (test.php)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Demo</title>
<link rel="stylesheet" type="text/css" href="PATH TO/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="PATH/demo.css">
<script type="text/javascript" src="PATH/respond.min.js"></script>
</head>
<body>
<div class="container">
<div class="row" >
<div class="col-sm-3 side20" > This is side content</div>
<div class="col-sm-9 main80">This is the main content.</div>
</div>
<button class="btn btn-default" role="button">Toggle</button>
<div class="row" >
<div class="col-sm-3 side20" >n</div>
<div class="col-sm-9 main80" >This is the main content</div>
</div>
<footer class="row">
<div class="col-xs-6 copyright">
© Toggle Demo - <?php echo date('Y');?>
</div>
<div class="col-xs-6 design">
<small>Designed by Learner</small>
</div>
</footer>
</div>
<!-- JavaScript -->
<script src="PATH TO/jquery-1.11.0.js"></script>
<script src="PATH TO/bootstrap.min.js"></script>
<script type="text/javascript" src="PATH TO/custom.js"></script>
</body>
</html>
The sample css is (demo.css)
.container{
width: 100%;
background: #0081c2;
}
.side20{
background: #3e8f3e;
}
.col-sm-3{
display: block;
background: #3e8f3e;
height: 200px;
border: solid 2px #000000;
}
.main80{
background: #8D0D19;
height: 200px;
border: solid 2px #000000;
}
.col-sm-12{
background: #8D0D19;
}
footer{
min-height: 50px;
background: #010102;
border-radius: 3px;
}
.copyright{
text-align: center;
line-height: 50px;
color: #fff;
}
.design{
text-align: right;
line-height: 50px;
color: #FFF4B9;
}
And the toggle function is achieved by the below jQuery script (custom.js)
$(".btn").on("click", function(){
$(".col-sm-3").toggle();
$(".main80").toggleClass("col-sm-12");
$(".main80").toggleClass("col-sm-9");
});
Hope this helps. Happy coding!!
Found a CSS only solution , basically I'm using table display:
HTML + CSS:
<div class="container">
<div style="display:table;width:100%;border:solid 1px red;height:100px">
<div style="display:table-row">
<div id="side" style="display:table-cell;background:#CCC;width:30%">SIDE</div>
<div style="display:table-cell">
<div class="row">
<div class="col-xs-6">6 col</div>
<div class="col-xs-6">6 col</div>
</div>
</div>
</div>
</div>
<button class="btn btn-primary" onclick="toggle()">TOGGLE</button>
here is a JS fiddle, that toggles the display of the cell