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>
Related
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.
I am trying to import a background image for my jumbotron. Here is my code.
jsfiddle
<header class="jumbotron">
<!-- Main component for a primary marketing message or call to action -->
<div class="container">
<div class="row row-header">
<div class="col-xs-12 col-sm-8">
<h1>City of Larissa</h1>
<p style="padding:40px;"></p>
<p>More than 8000 years of history</p>
</div>
<div class="col-xs-12 col-sm-2">
<p style="padding:40px;"></p>
<img src="img/logo.png" class="img-responsive">
</div>
</div>
</div>
</header>
and
.jumbotron {
margin: 0px auto;
padding: 70px 30px;
background: url('img/alcazar1.png');
color: floralwhite;
}
However, when I import that image through css,it can not be shown. Any ideas?
Thanks,
Theo.
may be You need to check the ImagePath for the Jumbotron Class in CSS.
I have a grid with 11 columns
<div class="row">
<div class="col-lg-1">1</div>
<div class="col-lg-1">2</div>
<div class="col-lg-1">3</div>
<div class="col-lg-1">4</div>
<div class="col-lg-1">5</div>
<div class="col-lg-1">6</div>
<div class="col-lg-1">7</div>
<div class="col-lg-1">8</div>
<div class="col-lg-1">9</div>
<div class="col-lg-1">10</div>
<div class="col-lg-1">11</div>
</div>
My problem is that bootstrap works on 12 column grids, therefore the 12th column shows empty. (making the grid look non centered)
I want to center this grid so at the beginning of the grid there will be the space of half a column, and at the end of the grid it will show the other half:
<div class="row">
<div class="col-lg-1/2">1/2 blank</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">2</div>
<div class="col-lg-1">3</div>
<div class="col-lg-1">4</div>
<div class="col-lg-1">5</div>
<div class="col-lg-1">6</div>
<div class="col-lg-1">7</div>
<div class="col-lg-1">8</div>
<div class="col-lg-1">9</div>
<div class="col-lg-1">10</div>
<div class="col-lg-1">11</div>
<div class="col-lg-1/2">1/2 blank</div>
</div>
^ thats an example of how I imagine it will work, but unfortunately we dont have 1/2 columns on boostrap.
You could always create a half-size column to add into a supplemental style sheet (You'll want to make sure you account for all of the styling, though):
.col-lg-half {
width: 4.166666665%;
}
.col-lg-half
{
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
#media (min-width: 1200px) {
.col-lg-half {
float: left;
}
}
Then, what you are wanting should work.
<div class="row">
<div class="col-lg-half">1/2 blank</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">2</div>
<div class="col-lg-1">3</div>
<div class="col-lg-1">4</div>
<div class="col-lg-1">5</div>
<div class="col-lg-1">6</div>
<div class="col-lg-1">7</div>
<div class="col-lg-1">8</div>
<div class="col-lg-1">9</div>
<div class="col-lg-1">10</div>
<div class="col-lg-1">11</div>
<div class="col-lg-half">1/2 blank</div>
</div>
I have a bootstrap modal that i changed it's width to 50% and yet when i click outside the modal i can't dismiss the modal, it seems as if the 100% width is still "there".
For example open the normal modal and clicking outside it closes it since it takes up the exact space the ui shows.
when i set width to 50% the "closing space" by clicking outside the modal hasn't changed, it's as if it's still 100%.
how do i fix it? there is an example below that i made to show what i mean.
if you use chrome you can inspect the <div class="modal-content" style="width: 50%;"> element and see the "hidden" width thing.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<ul>
<li>Normal</li>
<li>Width 50%</li>
</ul>
<div class="modal fade" id="width_half" role="dialog">
<div class="modal-dialog">
<div class="modal-content" style="width: 50%;">
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
</div>
</div>
</div>
<div class="modal fade" id="width_normal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
</div>
</div>
</div>
</body>
</html>
You have to change .modal-dialog CSS (not .modal-content), if you want to have 50% of the original Bootstrap sizes you can divide default values by 2 like this:
#media (min-width: 768px) {
.modal-dialog {
width: 300px; /* Bootstrap default - 600px */
}
.modal-sm {
width: 150px; /* Bootstrap default - 300px */
}
}
#media (min-width: 992px) {
.modal-lg {
width: 450px; /* Bootstrap default - 900px */
}
}
I have a question about the grid system in Bootstrap. I seems to work great, but there are no margins between the "boxes". for example if I have this:
<div class="column">
<div class="span11">
</div>
<div class="span11">
</div>
</div>
This works great. But there is no space between then. So do I assign an "id" and edit it myself though CSS code? Is this the right way to do it? for example:
<div class="column">
<div id="box_1" class="span11">
</div>
<div id="box_2" class="span11">
</div>
</div>
and one more thing, as for borders, colors, do I do the same ?
thanks
First there's no .column in twitter bootstrap but .row
If you want left/right margin use a span10 with offset1
If you want top/bottom margin creat a new .row and apply a class like .show-grid
For borders and colors use classes for generic and ids for specific.
You can create your mockup on jsFiddle like this http://jsfiddle.net/baptme/EHutn/
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet">
<style>
.show-grid {
margin-bottom: 20px;
margin-top: 10px;
}
.show-grid [class*="span"] {
background-color: #EEEEEE;
border-radius: 3px 3px 3px 3px;
line-height: 30px;
min-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row show-grid">
<div class="span10 offset1">
<p>bla bla bla</p>
</div>
</div>
<div class="row show-grid">
<div class="span10 offset1">
<p>bla bla bla</p>
</div>
</div>
</div>
</body>
</html>