so I'm trying to make a bootstrap website but I don't really know how to customize the widths and position of these grids. I'm a bootstrap beginner. Could you please help me? It DOESN'T have to be accurate so bad but I need to keep the layout.
How it should look like:
http://i.imgur.com/WAE161o.png
HTML:
<div style="margin-top:200px;" class="container">
<div class="row clearfix">
<div class="col-md-4 column">
</div>
<!--THIS ONE IS FOR THE MIDDLE, CENTERED AD-->
<div class="col-md-4 column">
</div>
<div class="col-md-4 column">
</div>
</div>
<div class="row clearfix">
<div class="col-md-2 column">
</div>
<!--THIS ONE IS FOR BUTTONS STICKED TO THE POST ON THE LEFT-->
<div class="col-md-1 column">
</div>
<!--THIS ONE IS FOR THE POST AND BUTTONS STICKED ON THE BOTTOM-->
<div class="col-md-4 column">
</div>
<!--THIS ONE IS FOR THE SIDEBAR-->
<div class="col-md-3 column">
</div>
<div class="col-md-2 column">
</div>
</div>
</div>
From Bootstrap 3.0 release
col-vp-push-x = push the column to the right by x number of columns, starting from where the column would normally render -> position: relative, on a vp or larger view-port.
col-vp-pull-x = pull the column to the left by x number of columns, starting from where the column would normally render -> position: relative, on a vp or larger view-port.
vp = xs, sm, md, or lg
x = 1 thru 12
So the answer to your question is push/pull columns. For example, your ad row should be like this:
<div class="row">
<div class="col-sm-8 col-sm-pull-2 col-sm-push-2 advertisement">
your center column
</div>
</div>
and so on. See fiddle here
If you need specific columns with pixel-specific widths, you can't use the Bootstrap grid. The Bootstrap grid is broken into 12 equal sized columns. You can still use Bootstrap, just not the grid part. There is some limited customization that can be done with the grid system, but I don't think it can approach what you are trying to do. You'll need to use custom CSS to position the site how you want it.
If you just want something similar and don't care about exact widths, then you should follow the grid documentation. You are moving in the right direction but when you have nested columns you need to make sure you wrap in a row, which you don't have. You can also use the col-md-offset-* styles to shift columns so you don't have to "use" all 12 columns. For example for the main part of the site you might want the first column to be ".col-md-3 .col-md-offset-4" and the second ".col-md-3".
Related
I have a 3 column layout with the code here for example. Right now when the browser window gets smaller it stacks from the 1st column on top, 2nd in the middle and then 3rd is last as expected. I want the columns to behave this way when the columns get smaller.
First - This column gets hidden and I have already established that in the CSS
Third - This is the first column on top.
Second- This column is on bottom.
<div class="row">
<div class="col-sm-3">First</div>
<div class="col-sm-6">Second</div>
<div class="col-sm-3">Third</div>
</div>
Use .order- classes for controlling the visual order of your content.
<div class="container">
<div class="row">
<div class="col-sm-3">
First, but unordered
</div>
<div class="col-sm-6 order-12">
Second, but last
</div>
<div class="col-sm-3 order-1">
Third, but first
</div>
</div>
</div>
guys. I have a little problem here working with bootstrap. I am trying to make a div container with a row containing 3 columns equally proportioned in width :
<div class="row">
<div class="col-md-4" style="background:red;">logo</div>
<div class="col-md-4" style="background:blue;">content</div>
<div class="col-md-4" style="background:yellow;">content+imgs</div>
</div>
</div>
The problem I have is that I want the column with 'logo' to be the second one (after 'content') on xs/sm devices or at resizing the browser window. I tried with push and pull, but I want the columns to be one above each other, not inline, as at the md devices. I have no clue how to do that, any help? :)
Using order classes with bootstrap, you can change the order of the columns responsively.
This example will put the second column first on XS and SM screens.
<!--bootstrap 4-->
<div class="row">
<div class="col-md-4 order-2 order-md-1">first</div>
<div class="col-md-4 order-1 order-md-2">second</div>
<div class="col-md-4 order-3 order-md-3">third</div>
</div>
edit:
For bootstrap 3 (3.3.7) you will need to use push & pull classes. In your case, you would have to make the logo the second column. Mobile counts as the starting point in bootstrap development.
<!-- bootstrap 3 -->
<div class="row">
<div class="col-md-4 col-md-push-4" style="background-color:red;">content</div>
<div class="col-md-4 col-md-pull-4" style="background-color:blue;">logo</div>
<div class="col-md-4" style="background-color:yellow;">content+imgs</div>
</div>
I am a complete beginner and I am learning Bootstrap. I want to know how to determine which column system I need to use in my website. Suppose I have a row with 3 columns. Now I have 3 options.
Option 1:
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
Option 2:
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-4">
</div>
<div class="col-lg-4">
</div>
</div>
Option 3:
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>
Now my question is, As I want my website to be responsive which class I need to apply. I want my website to render properly irrespective of device selected. I understood that they are meant for different devices. Does that mean, I need to write 3 different css style code (I doubt it). So, what shall I put in my code?
P.S: I saw this link SO LINK and I understood it. But still I am confused, what to put in my code? Shall I put sm,lg or md?
These define the width of the screen at which the layout will collapse. For example, in .col-md-, the layout will be horizontal until the screen width is less than 970px, at this point, the layout will collapse. However, if you use .col-lg-, the layout will be horizontal until the screen width is less than 1170px, then it will collapse.
Bootstrap has 4 breakpoints, .col-xs-, .col-sm-, .col-md- and .col-lg-. You should use these depending on the content of the div. The best way to become familiar is to play around with each one and notice that the layout collapses at different points for each one when you decrease the width of your window. So to answer the question, you should choose whichever one collapses correctly for the content of your div. Hope this helps.
For a more detailed guide on the bootstrap grid system, take at look at this: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
I found it helpful to get a good understanding.
I generally use col-md prefix, so I guess your first option would work quite fine: col-md-4.
To add to the other suggestions you've received, remember that you can apply multiple Bootstrap column classes to the same div.
For example say you wanted 3 equal width columns on a wide viewport. Then as the viewport narrows this changes to one full width header with two equal width columns below, and on smartphones all three divs are stacked vertically, then you might use something like
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12">column1
</div>
<div class="col-lg-4 col-md-6">colmun2
</div>
<div class="col-lg-4 col-md-6">column3
</div>
</div>
</div>
See this live https://codepen.io/panchroma/pen/EwVwpw
Or you might want to change the relative widths of your 3 columns at different viewports
<div class="row">
<div class="col-lg-6 col-md-4">
</div>
<div class="col-lg-3 col-md-4">
</div>
<div class="col-lg-3 col-md-4">
</div>
</div>
Or you might want to hide one of the columns at narrower viewports
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4 hidden-sm hidden-xs">
</div>
</div>
The important thing is that you can mix and match your classes to achieve the responsive behaviour that you need.
Once you get the hang of the grid sizing options you might also want to check out how to reorder columns. What often happens is that you need to have a different column order on desktop and mobile, and there will probably be times when you want to offset columns as well.
Good luck!
Here is my Bootstrap 3 jsFiddle, although you'll likely need to view it in full screen view in order to see it in all its glory.
As you can see, there are two TB3 "wells" called Herps and Derps. They are currently sitting on top of one another, and furthermore, they are wider than the navbar, jumbotron and footer wells.
I'd like these to both be next to each other on the same line/"row", and I'd like the two wells to be the same width of all the other contents. I'd also like to have a bit of padding (spacing) between the two wells so that they're not smushed right up next to each other.
My best attempt (from that jsFiddle above):
<div class="row">
<div class="span6">
<div class="well">Herps</div>
</div>
<div class="span6">
<div class="well">Derps</div>
</div>
</div>
...does not seem to be doing the trick. Any ideas where I'm going awry?
You need to use the col-x-y css styles for your wells for the appropriate screen size and columns. In this case, you could use col-sm-6 since you have two columns.
<div class="row">
<div class="col-sm-6">
<div class="well">Herps</div>
</div>
<div class="col-sm-6">
<div class="well">Derps</div>
</div>
</div>
JSFiddle
Bootstrap Grid System
I am migrating a project of mine from bootstrap 2 to bootstrap 3. Now, I am having some problem with the grid layout that I can't understand. I have a col-md-12 and I wanna add 3 columns of equal width in this larger div. Logically, the 3 columns should each be col-md-4. However, when I add the 3 columns (divs) of class col-md-4, they don't fit and one of them gets pushed down and some space is left at the end after the 2nd one.
Please someone help me understand something that I may be missing. Thank you.
It sounds like the issue is padding. Bootstrap automatically adds padding when you have nested col-xx-# classes. If you have col-md-4 as a direct child of a col-md-12 bootstrap will add padding and your third col-md-4 will end up on a new line.
What you're doing:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
1/3
</div>
<div class="col-md-4">
2/3
</div>
<div class="col-md-4">
3/3
</div>
</div>
</div>
</div>
To address this, either add a new class="row" above your first col-md-4 or simply remove the col-md-12 like this:
<div class="container">
<div class="row">
<div class="col-md-4">
1/3
</div>
<div class="col-md-4">
2/3
</div>
<div class="col-md-4">
3/3
</div>
</div>
</div>
Bootstrap's column layout can only be 12 "units" in width.
To archieve columns of equal width, you should split 12 equally (sum of * in col-md-* should be 12).