I am curious to how this is achieve this concept, I was talking to a friend and they stated all I have to do is add two floating divs for the sidebars (3 column layout), change the width of the container and then the columns inside will arrange and resize and needed.
What I currently have is:
<div class="container-fluid">
<div class="row">
<div class="col-md-2"> Side Bar one </div>
<div class="col-md-8"> Content </div>
<div class="col-md-2"> Side Bar Two </div>
</div>
</div>
I assumed that col-md-2, because it has a float on it, is already "fixed width". But apparently not. So how could I implement this "fixed width" concept and still have the responsiveness?
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!
So i'm using flexbox grid and have a basic something like this:
<div class="container">
<div class="row">
<div class="sidebar col-xs-3">
<div class="sidebar-top"></div>
<div class="sidebar-space"></div>
<div class="sidebar-bottom"></div>
</div>
<div class="content col-xs-9">
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
</div>
</div>
</div>
And generally looks something like this:
Now I need the top green bar to follow down when the scroll and the bottom green bar to stick to the bottom of the visible page. The center place that says hey, may or may not ever have content in it.
I have tried quite a few things, mostly taken from the css-tricks site about flex and other various blog posts, but none seems to satisfy what I need. If I add a wrapper around the sidebar-top/space/bottom and set it to a column instead of row it no longer gets the equal height that .sidebar and .content have. Nothing seems to work.
Is this even possible with pure css?
edit: The relevant css classes container row and col-xs-X are all from flexbox grid linked at top of question
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
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".
I'm attempting a layout in bootstrap that is positioned using the following image.
I have two rows, the top half and the bottom half both containing two separate background gradients. The rows are both divided into 50% wide columns, with the right-most columns containing content and the left-most columns containing a single image.
My problem is that I'm unsure of how to get an element to span two rows vertically while still retaining it's fluid layout. I've positioned it absolutely but once the window scales down it doesn't stack properly. My layout is as follows. Getting rid of the rows and splitting the page into two vertical columns results in me being unsure of how to split the background into two separate horizontal gradients. Any help would be appreciated. Thanks!
<div class="row" style="height:50%;background-image:-webkit-gradient(etc)">
<div class="col-md-6">
<img src="wooo-im-an-image">
</div>
<div class="col-md-6">
content of a mostly blabberous nature here
</div>
</div>
<div class="row" style="height:50%;background-image:-webkit-gradient(etc)">
<div class="col-md-6">
emtpy
</div>
<div class="col-md-6">
more content of a mostly blabberous nature here
</div>
</div>
I'm not sure if I quite understand but I did put together an example using your picture. Pardon the CSS skills and let me know if it helps you.
<div class="row gradient">
<div class="col-md-6"><div class="well inheritback">IMG<br><br><br><br><br></div></div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12"><div class="well inheritback">CONTENT</div></div>
</div>
<div class="row">
<div class="col-md-12"><div class="well inheritback">CONTENT</div></div>
</div>
</div>
</div>
Live Demo
http://www.bootply.com/116896