I try to achieve the mobile and desktop view of the following attached image in the lower half. The problem I have right now is, that the violet col begins only after the yellow col is finished.
Here is my html structure:
<div class="container-fluid">
<div class="col-sm-12 col-md-6 col-md-push-6">RED</div>
<div class="col-sm-12 col-md-6 col-md-pull-6">YELLOW</div>
<div class="col-sm-12 col-md-6 col-md-push-6">VIOLET</div>
</div>
.yellow {
background-color: yellow;
}
.red {
background-color: red;
}
.purple {
background-color: purple;
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<div class="container-fluid">
<div class="col-sm-12 col-md-6 col-md-push-6 red">RED<br><br></div>
<div class="col-sm-12 col-md-6 col-md-pull-6 yellow">YELLOW<br><br><br><br><br><br></div>
<div class="col-sm-12 col-md-6 col-md-push-6 purple">VIOLET</div>
</div>
</html>
I have found a simple solution using Grid CSS & Media Queries.
First, I cleaned your HTML markup like so:
HTML:
<div class="container-fluid">
<div class="col-sm-12 col-md-8 col-lg-8 yellow">YELLOW</div>
<div class="col-sm-12 col-md-4 col-lg-4 red">RED</div>
<div class="col-sm-12 col-md-4 col-lg-4 purple">VIOLET</div>
</div>
You can see that I moved the yellow <div> to the first position. We'll set change the position with the grid system only on a certain viewport, mobile on this case, like so:
CSS:
.yellow {
background-color: yellow;
height: 400px; /* for demo only */
}
.red {
background-color: red;
height: 200px; /* for demo only */
}
.purple {
background-color: purple;
height: 200px; /* for demo only */
}
/* Reordering the yellow <div> on mobile version */
#media only screen and (max-width: 1000px) {
.container-fluid {
display: grid;
}
.yellow {
order: 2;
}
.red {
order: 1;
}
.purple {
order: 3;
}
}
Check this code working sample.
Edit:
If you add margin to the <div> columns, you'll need to reduce col-lg & col-md utility classes's number so it won't break the columns grid.
Related
I'm not new to the bootstrap 3 grid system, but previously only worked with stacked columns on mobile.
Today I need a grid with a single column on mobile, taking the full width (no scrollbars). On larger devices, the column should be centered (offsetted ?) while an appropriate width is maintained.
How can I do that ?
So far I have tried the following :
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-3">
... content ...
</div>
</div>
</div>
This is looking fine on desktop and mobile, but then I realized I have scrollbars on mobile.
Could it be surrounding html (not shown here) ? Or is it related to this code ?
Thanks in advance.
Here's two solutions.
The first solution sets the max-width of your column to a fixed number of pixels (in this case 650px);
The second solution set the max-width of the column to a certain percentage of the window until you reach a breakpoint and it sets it to 100%.
Solution 1 (run it full screen and change the window width to see it in action):
.constrain {
max-width: 650px;
margin-right: auto;
margin-left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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>
<div class="container">
<div class="constrain">
<div class="row">
<div class="col-md-12" style="background-color: coral;">
Content
</div>
</div>
</div>
</div>
Solution 2 (run it full screen and change the window width to see it in action):
.constrain {
max-width: 50%;
margin-right: auto;
margin-left: auto;
}
#media only screen and (max-width: 650px) {
.constrain {
max-width: 100%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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>
<div class="container">
<div class="constrain">
<div class="row">
<div class="col-md-12" style="background-color: coral;">
Content
</div>
</div>
</div>
</div>
enter image description hereI'm trying to have an information panel with three different columns using bootstrap 3. I've nested the columns properly, I think, but the panels are hidden beneath the main row and I can't find a way to reveal it.
it's showing that the container is there, but you can't see it
<div class="row creative_line">
<div class="col-md-12">
<h2 class="text-center">Smart & Creative<br><p>This is why you will use it</p></h2>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-4 multi">
<div class="img-circle">
</div>
</div>
<div class="col-md-4 ui">
<div class="img-circle">
</div>
</div>
<div class="col-md-4 design">
<div class="img-circle">
</div>
</div>
</div>
</div>
</div>
This is my current css
.creative_line {
background: yellow;
min-height: 300px;
color: $primary-color;
font-family: $font-stack;
}
.creative_line p {
color: $primary-color;
font-family: $font-stack2;
font-size: 35%;
margin-top: 10px;
}
h2 {
font-size: 40px;
}
.img-circle {
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
background: red;
}
.multi,
.ui,
.design {
min-height: 300px;
color: blue;
z-index: 1;
}
From the docs at http://getbootstrap.com/css/
You may choose one of two containers to use in your projects. Note
that, due to padding and more, neither container is nestable.
and
Turn any fixed-width grid layout into a full-width layout by changing
your outermost .container to .container-fluid.
The second sentence seems to imply that you can have nested containers. The first sentence seems to imply that there should be a single container one a page.
Which is it?
(A case might be wanting to nest a container-fluid inside a container - or simply inside some other element with a fixed width).
You are correct on the ability to use container-fluid
h4 {
margin-top: 25px;
}
.container {
border: solid 5px red;
}
.row {
margin-bottom: 20px;
}
.row .row {
margin-bottom: 0;
}
.nested-container {
border: solid 3px green;
}
.container-fluid {
border: solid 3px blue;
}
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86, 61, 124, .15);
border: 1px solid #ddd;
border: 1px solid rgba(86, 61, 124, .2);
}
hr {
margin-top: 40px;
margin-bottom: 40px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
</div>
</div>
<div class="container nested-container">
<div class="row">
<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
</div>
</div>
</div>
</div>
</div>
I'm trying to set a navigation menu at the top of the screen with two rows:
The former one will contain the Brand, and when the resolution is small enough it will also contain the special bootstrap button menu that displays the collapsed menu items stacked.
The second will contain the categories and will be visible only if the resolution is large enough.
This is what I want to achieve:
When the resolution is big enough
When the resolution is small, the second menu row is collapsed
I have used this code without success (The second row never appears):
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container">
<div class="nav-collapse collapse">
<ul class="nav navbar-nav">
<li>Cat1</li>
<li>Cat2</li>
<li>Cat3</li>
</ul>
</div>
</div>
</div>
<div class="container">
<p>some text</p>
</div>
</body>
</html>
Any idea?
I have updated your html code..and after changing a little bit of bootstrap styles you may get what you want..
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Cat1</li>
<li>Cat2</li>
<li>Cat3</li>
</ul>
</div>
</div>
</div>
Now set
.navbar-header {
float: none;
}
Now you will get all links below brand name
In bootstrap we can use media queries to set when to display toggle button in navigation menu.Here we can see toggle button when browser size is 500 px or lesser than 500 px(by default toggle button appears when browser size is lesser than 767 px)..
#media (min-width: 500px) {
.navbar-collapse {
width: auto;
border-top: 0;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
}
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
padding-right: 0;
padding-left: 0;
}
navbar-collapse.collapse {
display: block!important;
}
.navbar-toggle {
display: none;
}
.navbar-nav > li {
float: left;
}
}
#media (max-width: 500px) {
.navbar-toggle {
display: block;
}
.navbar-header {
float: none;
}
.navbar-toggle {
display: block!important;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav > li {
float: none;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
}
Hope this helps you!!!!!
I'm using Bootstrap v3.0.2. I want to display a series of divs next to each other, float: left then center that group in a full width row. What I get are the divs lined up next to each other but the entire group floats left.
I've tried numerous suggestions from this site but have been unable to make any of them work.
I have HTML:
<div id="wrapper">
<div class="container">
<div id="wrapBoxRow" class="row">
<div id="boxRow" class="col-md-12 col-xs-12">
<div id="boxWrap">
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
</div>
</div>
</div>
</div>
</div>
Css:
#boxWrap, #boxRow, #wrapBoxRow
{
float: none;
margin: 0 auto;
}
.smallBox
{
border: 3px solid #ddd;
float: left;
width: 20px;
height: 20px;
margin-right: 12px;
}
I've tried this without bootstrap and couldn't get it to work either:
<div id="boxWrap">
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
</div>
Please try the below CSS to horizontally center your div
#boxWrap, #boxRow, #wrapBoxRow
{
display: table;
margin: 0 auto;
}
You can find working code here http://bootply.com/92723