I am having a go at Twitter Bootstrap 3 for the first time and seem to be getting stuck when it comes to the grid system.
I am ok when it comes to using rows but I am trying to achieve a simple layout like the below image..
I can't even work out how to begin! Does anybody have a link to a jsfiddle or similar I can have a look at to read up on?
Use this structure:
<div class="container">
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
</div>
</div>
Essentially you create two columns, and in the second column you are creating a new grid to hold your four cells. You can change the md in col-md-6 to break at the resolution you need.
jsFiddle example
Related
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!
Currently I am structuring the HTMl on my page as follows:
<div class="row">
<div class="col-xs-12">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="container-2">
<div class="content"></div>
</div>
</div>
</div>
</div>
</div>
</div>
There are 6 divs outside of the actual content on each section. The outer column is to be a container of a certain colour, and the inner container is only fill up 8/12 of the outer container. This produces margins with the background colour of the outer container of width 2 on either side of the inner column.
This looks great and is responsive. However, I'm wondering if having this many divs is good practice or not?
Well, I guess it's up to you. If you feel like you can manage this many div's then it's fine. But what you have to think about is, if you for instance would pass on your project to another developer, then he would need to understand your work without cleaning up before he even starts, so it's always important to have that in mind when you develop.
I would maybe construct it this way:
<div class="container">
<div class="row">
<div class="col-xs-12">
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="content"></div>
</div>
</div>
</div>
This is just what I wan't to do, maybe someone else would do it another way.
I have been experiencing this subtle oddity in my handlebars template using bootstrap.
The issue is that the entire contents of the page shifts approx 10px to the left when three or more items are in the database (the code within {{#orglist}} occurs three or more times).
<div class="row" id="bodyDiv" data-controller="orglist">
<div class="col-md-12">...</div>
<div class="col-md-12">
{{#orglist}}
<div class="row">
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
</div>
{{/orglist}}
</div>
</div>
The same issue occurs if I manually do the markup:
<div class="row" id="bodyDiv" data-controller="orglist">
<div class="col-md-12">...</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
</div>
<div class="row">
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
</div>
<div class="row">
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
</div>
</div>
</div>
Some notes
The issue is independent of custom css.
The reason this issue bothers me, and how I noticed it, is that
it's a multi-page site and it causes the alignments to differ.
This template does have an accompanying layout template, but the issue appears to be independent of that.
Any thoughts?
Solved: see approved answer below
Fix is Ruben's answer here: How to prevent scrollbar from repositioning web page?
Largest ratio of time searching for issue vs. solution ease I have ever had.
browser vertical scroll bar show-up when rows >= 3?
As per bootstrap standards, one 'row' should be placed within a .container or .container-fluid, also div can have 12 total grids. for ex
<div class="container">
<div class="row" id="bodyDiv" data-controller="orglist">
<div class="col-md-12">...</div>
</div>
<div class="row">
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
</div>...
</div>
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. Please refer:- http://getbootstrap.com/css/
I'm starting out a website using BootStrap 3 framework. Here's the section of the code that I have an issue with:
<div class="row">
<div class="col-md-8">
<div class="brand">
<h1>Test Text.</h1>
<div class="line-spacer"></div>
<p><span>Some more test Text</span></p>
</div>
</div>
<div class="col-md-12">
<img src="img/devices.png" />
</div>
</div>
</div>
Here's what the output looks like:
How do I get the image along the same row as the text? I tried placing the <img> within the col-md-8 div tag, tried without specifying any col div value, but none of that worked. Any help is appreciated. The CSS is the generic bootstrap min css.
You might want to split the area up in two parts, but always keep in mind that bootstrap standard uses 12 grid system.
So if you want the two next to each other u use...
<div class="row">
<div class="col-md-6">
Here your text
</div>
<div class="col-md-6">
<img />
</div>
</div>
That should fix your issue, remember up count goes over 12 it wraps.
Your columns have to always add up to a total of 12 and your code should be similar to the below:
<div class="container">
<div class="row">
<div class="col-md-4">
CONTENT
</div>
<div class="col-md-8">
CONTENT
</div>
</div>
</div>
Have a good read over the Bootstrap Docs on their Grid System:
http://getbootstrap.com/css/#grid
I have to create the following html, tried to use a div for the "last 24 hours" and "last month" and other divs with float left for other stuff, but it turned out all messed up.
please help me, what structure should use? table? divs? thks
This begs to be a grid. I'd use divs with some ready made grid, like the one from Bootstrap.
So for example it could look like this:
<div class="container">
<div class="row">
<div class="span6">LAST 24 HOURS</div>
<div class="span6">LAST MONTH</div>
</div>
<div class="row">
<div class="span6">283</div>
<div class="span6">put a nested grid here</div>
</div>
<div class="row">
<div class="span3">Facebook<div class="value">10%</div></div>
<div class="span3">Twitter<div class="value">9%</div></div>
<div class="span3">Foursquare<div class="value">7%</div></div>
<div class="span3">Others<div class="value">5%</div></div>
</div>
</div>
Then add some css classes and use that to float, change font sizes, colors, etc.