I need help reordering columns in Bootstrap for SEO purposes using push and pull. The final output would be like the image below. Right now I only need to switch the Left Sidebar and Main Content on desktop view. I managed to do this using a bunch of divs and floats but I decided to give bootstrap a try. Thanks!
HTML
<div class="container">
<div class="row">
<div class="col-sm-4 col-1 my-col">
Main Content (Middle)
</div>
<div class="col-sm-4 col-2 my-col">
Left Sidebar
</div>
<div class="col-sm-4 col-3 my-col">
Right Sidebar
</div>
</div>
</div>
CSS
.my-col{
line-height: 40px;
color:white;
text-align:center;
font-size: 20px;
}
.col-1{background:red}
.col-2{background:blue}
.col-3{background:green}
#media (min-width: 768px) {
.my-col{
line-height: 80px;
}
}
Bootply http://www.bootply.com/slW117V1oH#
Column ordering is the inbulit feature of bootstrap framework. For more information visit here
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
example here codepen
enjoy :)
Related
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">
I am new with Bootstrap 3 and just want to know how can I use .container class from Bootstrap with my own fixed wrapper.When I have fixed container of the page for example
.wrapper {
width:960px;
}
and .container class from Bootstrap, how can I combine and use in my web page ?
<div class="container">
<div class="wrapper">
<div class="row">
<div class="col-md-12">
Text content here
</div> </div> </div> </div>
is it correct ?
Thanks!
no need for the extra div. You could just do
<div class="container wrapper">
<div class="row">
<div class="col-md-12">
Text content here
</div>
</div>
</div>
.wrapper {
max-width: 960px;
}
Note that I used max-width in stead of width, or the responsiveness would be lost.
I'm trying to create a custom row which has 8 logos sat in even columns at the bottom of a page when sat at full size desktop (lg) I need them to work responsively.
I've tried a few options - 2 cols with 4 cols nested and 4 cols with 2 cols nested... the problem I have is the gutter creates extra spacing between columns which means the logos won't space evenly. Any experts have a better idea how I could place 8 logos spaced evenly in a row? perhaps creating a new 8 col custom grid?
Any help would be great.
Thanks
N
Bootstrap 3
How about using a list-inline with 4 columns of 2 like this..
<ul class="list-inline row">
<li class="col-sm-3"><div class="col-sm-6"></div><div class="col-sm-6"></div></li>
<li class="col-sm-3"><div class="col-sm-6"></div><div class="col-sm-6"></div></li>
<li class="col-sm-3"><div class="col-sm-6"></div><div class="col-sm-6"></div></li>
<li class="col-sm-3"><div class="col-sm-6"></div><div class="col-sm-6"></div></li>
</ul>
Demo: http://bootply.com/90906
Bootstrap 4
Since Bootstrap 4 is flexbox, any number of equal width columns is now possible using the auto-layout grid..
<div class="container-fluid">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
</div>
</div>
Demo: http://www.codeply.com/go/AOVGoJncei
2 columns 6 with each 4 colums 3 inside row-fluid
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
</div>
Extending on my answer here: https://stackoverflow.com/a/25023129/2266157
Here is a demonstration of an eight-wide Bootstrap row structure, with
Equal padding (i.e. column gutters)...
<div class="container">
<h2>No padding (.no-pad) on outermost columns (.col-md-6)<br></h2>
<h3>Then nested columns can have padding...</h3>
<div class="row no-pad">
<div class="col-md-6">
<div class="row">
<div class="col-md-3"><i>col1</i></div>
<div class="col-md-3"><i>col2</i></div>
<div class="col-md-3"><i>col3</i></div>
<div class="col-md-3"><i>col4</i></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3"><i>col1</i></div>
<div class="col-md-3"><i>col2</i></div>
<div class="col-md-3"><i>col3</i></div>
<div class="col-md-3"><i>col4</i></div>
</div>
</div>
</div>
</div>
...or indeed no column gutters.
<div class="container">
<h3>...or not</h3>
<div class="row no-pad">
<div class="col-md-6">
<div class="row no-pad">
<div class="col-md-3"><i>col1</i></div>
<div class="col-md-3"><i>col2</i></div>
<div class="col-md-3"><i>col3</i></div>
<div class="col-md-3"><i>col4</i></div>
</div>
</div>
<div class="col-md-6">
<div class="row no-pad">
<div class="col-md-3"><i>col1</i></div>
<div class="col-md-3"><i>col2</i></div>
<div class="col-md-3"><i>col3</i></div>
<div class="col-md-3"><i>col4</i></div>
</div>
</div>
</div>
</div>
This CSS is required in addition to Bootstrap
.row.no-pad {
margin-right:0;
margin-left:0;
}
.row.no-pad > [class*='col-'] {
padding-right:0;
padding-left:0;
}
Here is a working demo:http://www.bootply.com/eWWpj3G9tL
And the logo centring
To position the logos, I'd either use an <img class="img-responsive"> or if they're smaller than the column width then you could CSS center them with text-align:center (or the bootstrap class text-center placed on the .col-*) or using the following CSS:
#logos img {
display:block;
margin:0 auto;
}
Sounds like this is for a specific module so I would just create a simple new grid for this...
.eightLogos .logo {
float: left;
width: 12.5%;
margin: 0;
padding: 0;
}
Its Simple... Just add another column to your css.
Its best not to edit bootstrap CSS (and use a cdn).
So... We need to create the column css for all screen types.
I usually address 3 screen sizes which means creating 3 css sets for this column
big screens & normal screens
medium screens (ipad ext.)
small screens (mobile phones ext.)
Decision time:
Since we are talking about 8 columns which is a lot
its best to go with these css rules (in my opinion)
i almost always use a .container class for my designs which
makes big screen mode suitable in tablet unless in portrait mode.
In short, Here are a good set of css rules
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
eight-col {width: 50%; padding: 0 15px;}
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
eight-col {width: 20%; padding: 0 15px;}
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
eight-col {float: left; width: 12.5%; margin: 0; padding: 0 5px;}
}
Please note:
i play around with padding as i see fit. Its best to leave some extra padding when in mobile mode but you can play around with it ;)
I am using the following to create a 3 columns layout feel to my website:
<div>
<div class="foo col-md-4">
</div>
<div class="foo col-md-4">
</div>
<div class="foo col-md-4">
</div>
<div class="foo col-md-4">
</div>
</div>
The above works great, and no matter how many foo items I added, it will format it to three columns layout automatically. However, I wanted to add a boxed feeling to each of the foo item, so that it does not look like that they're attached to each other. To achieve this, I added margin to the foo class:
.foo
{
margin: 3px 3px 3px 3px;
}
Adding the above, changes the layout become a two column layout.
My goal is to replicate responsive boxed layout, just like one we find in google plus.
Since the Bootstrap cols already having padding, you could make the content of your columns boxed.. For example, the panel creates a boxed effect.. No additional CSS required:
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here..</div>
</div>
</div>
Demo on Bootply: http://bootply.com/96277
Also, you may be interest in this Bootstrap Google+ project:
http://iatek.github.io/bootstrap-google-plus/
http://jsbin.com/akaQufU/3
Put a div inside the col-* this can be done.
CSS
body {background:#eee}
/* demo */
.container {padding:3%;}
/* put a div inside .foo style for demo */
.foo > div {
background:#fff;
margin-bottom:4px;
padding:2%
}
/* adjust row margins */
.row.foo-row {
margin-left: -2px;
margin-right: -2px;
}
/* adjust padding */
.row.foo-row .col-sm-4,
.row.foo-row .col-md-4,
.row.foo-row .col-lg-4 {
padding-left: 2px;
padding-right: 2px;
}
HTML
<div class="container">
<div class="row foo-row">
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
</div>
</div>
how about adding inset border instead
.foo
{
border-color:transparent;
border:inset 3px;
}
because margin will be calculated as a column extra width
anyway if you want to seperate them without using borders , then just use padding
.foo
{
padding:3px 3px 3px 3px;
}
Your columns should already spaced properly by your code and bootstrap's grid system, you just need need to added a margin to the bottom to stop them touching.
margin-bottom: 3px;
The problem you had with it converting to a 2 column was because you were adding side margin of 3px as well, which throws bootstraps grid system out.
You can't use padding (well) because bootstrap uses it for spacing and that will be more pain than gain.
I'm laying out a login screen, and on that screen will be just a box with LOGIN and PASSWORD. I need to centralize vertically and horizontally (like any traditional login screen).
How can I achieve this with Twitter Bootstrap?
Thanks!
If you are using bootstrap grid, then you can offset your columns:
<div class="row">
<div class="span6 offset3">
Your content goes here
</div>
</div>
See example here: http://twitter.github.com/bootstrap/scaffolding.html#gridSystem
Or you can just use CSS to simply center block element,
div.login-box{
margin:0 auto;
width: 720px;
}
UPDATE to Johny's answer: For Bootstrap 3; the syntax is a bit different:
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
Your content goes here
</div>
</div>
or: better yet:
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
Your content goes here
</div>
</div>
</div>