I'm writing some code with bootstrap and i often use "container-fluid col-lg-3 col-md-3 col-s-3 col-xs-3" or "container-fluid col-lg-6 col-md-6 col-s-6 col-xs-6". I was wondering if there was a way to reduce the code i write and not write these lines multiple times.
Thanks
col-lg-3 col-md-3 col-s-3 col-xs-3 is actually same as using only col-xs-3
The best way to think about the grid classes is that they work from mobile up. This means by default your grid will stack from mobile up until the grid class breakpoint you’ve used is reached.
For example, using .col-lg-4 means your grid will stay stacked on mobile, tablet, and small desktop screens. Only until the large desktop breakpoint is reached will the grid go horizontal.
Side notes:
col-s-3 should be col-sm-3.
container-fluid is a container class and should not be with the column classes
General structure should be something like:
<div class="container-fluid">
<div class="row">
<div class="col-xx-x">
Column
</div>
<div class="col-xx-x">
Column
</div>
</div>
<div class="row">
...
</div>
</div>
There is no need for so many classes if width is gonna be three colunms on all screen sizes. It is enough to start from smallest screens col-xs-3 and width will be the same on all breakpoints. Another thing don't use column classes with container clases. Bootstrap structure goes first container then row and then columns.
Related
I'm currently developing a Login/Register page but I need help with the columns. The page currently looks like this on desktop 1920x180: http://prntscr.com/cl4ms8
I am using <div class="col-xs-6"> on both of the forms so they are evenly split on the page. How would I go across making it so it will be responsive on all devices as it currently looks like this on an iPhone 6: http://prntscr.com/cl4ndb
Bootstrap ships with 4 tiers of grids, which have class prefixes of;
.col-xs- , (<768px)
.col-sm- , (≥768px)
.col-md- , (≥992px)
.col-lg- , (≥1200px)
If you've applied a column class of "col-xs-6" what you are saying is that from 0px to 767px i want this column to be 50% of the containers width. And unless you add another class for the next grid tier, it will continue to be 50% of the parent on wider screens as well. So not only up to 768px but beyond unless you add another class.
Your problem here is that most mobiles are simply too narrow to show two columns for this purpose. So change "col-xs-6" to "col-xs-12". And add "col-sm-6" as well.
<div class="col-xs-12 col-sm-6">
That will mean that from 768px and up, the columns wil be 50%.
The reason why the layout looks broken though is probably because your input's have a width or min-width that is greater than the 50% width of the container and are therefore wider than the column grid they are nested in.
You elements with the col-xx-n classes need to be children or descendants of an element with the class container-fluid.
So, this will be responsive:
<div class="container-fluid">
<div class="col-md-4">This div takes up 1/3 of the available width on a desktop</div>
<div class="col-md-8">This div takes up 2/3 of the available width on a desktop</div>
</div>
Use bootstap's class col-lg-6 col-md-6 col-sm-12 col-xs-12 for both main div of login and registration is and you can reffer the site http://getbootstrap.com/css/#grid and http://getbootstrap.com/css/#forms
example:
<div class="container-fluid">///or container
<div id="login" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
///your login form
</div>
<div id="registration" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
///your registration form
</div>
</div>
Use a bootstrap grid: http://v4-alpha.getbootstrap.com/layout/grid/ (that's the v4 documentation, but v3 (the standard) works the same and v4 documentation is better). See also w3schools' tutorial: http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
Just getting into Bootstrap 3 and was wondering what best practices are regarding class tags for multiple viewports. For example, just to offset my navbar-brand it looks like the following which just seems messy (but I guess this is one of the complaints regarding Bootstrap):
<div class="col-xl-11 col-xl-offset-1 col-lg-11 col-lg-offset-1 col-md-11 col-md-offset-1 col-sm-11 col-sm-offset-1 col-xs-11 col-xs-offset-1">
Seems like there is a better and more concise way to write this will retaining the dynamic elements for each viewport size.
Simple answer is - Think mobile first
<div class="col-xl-11 col-xl-offset-1 col-lg-11 col-lg-offset-1 col-md-11 col-md-offset-1 col-sm-11 col-sm-offset-1 col-xs-11 col-xs-offset-1">
is the same as
<div class="col-xs-11 col-xs-offset-1">
So, first apply rules starting from the -xs smaller size and move towards -lg (or xl in your case)
Example
Let's say you want an full width element on mobile -xs, 3/4 on the desktop -md and half width on -lg. What you should come up with is
<div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
Note that you don't define col-xs-12 because it will be set by default for you. For the -sm in this case will also be col-sm-12 set by default
For the more info please read http://getbootstrap.com/css/#grid
you don't need to set the size for each of the screen sizes, just 1 for mobile and 1 for desktop and if you really want to, use 2 different sizes for desktop if that's what you want.
Another tip I can give you is to you the container-fluid
so it will fill automatically to the parent size
i am trying to understand the bootstrap design approach to mobile
for example if there are two contents name and zyx--
<div class = "container row">
<div class = "col-xs-4 col-md-4">Name</div>
<div class = "col-xs-8 col-md-8">zyx</div>
</div>
now the "name" and "zyx" has to viewed horizontally or stacked below one another
supposedly if the contents are given as below so when resized, they stack below each other..a row can contain only 12 columns but is the code below the right approach
<div class = "container row">
<div class = "col-xs-12 col-md-4">Name</div>
<div class = "col-xs-12 col-md-8">zyx</div>
</div>
Yes, Nothing wrong in the code. It all depends on what you are displaying in the div and how much width do you want it to take on the screen.
Explaining your code
<div class = "container row">
<div class = "col-xs-4 col-md-2">Name</div>
<div class = "col-xs-2 col-md-8">zyx</div>
</div>
For a extra small device (col-xs): You are saying that if at all its a extra small device make the first div 4 column'd width of total width. And the second div as 2 column'd width.
For Medium device (col-md): Here you are saying if its a medium device change the 4 column'd width to 2 column , which is fine. But I dont feel the second div is right. Because you are saying if the device is small make the 2 column'd width to 8 columns. Weird because if you are able to use only 2 column in extra small devices why do you want 8 columns in a medium device to display the same content. It will be ok even with 1 column'd width. But still depends on your UI (may be you are showing extra elements which are hidden during extra small device screen view)
Also Remember these rules of bootstrap
<div class="col-xs-4"> : with only this rule you are saying no matter what size the device is always have 4 columns of total width :ie if there is no other class specified after col-xs-4 then the same effect will be carried to other device width also. So it would be same as col-xs-4 col-sm-4 col-md-4 col-lg-4
<div class="col-xs-4 col-md-2"> : This would be equivalent to <div class="col-xs-4 col-sm-4 col-md-2 col-lg-2"> , So its the same idea. The class settings from the lower devices will be applied to its higher devices also untill there are other class applied.
Let me know if this is clear.
There are a couple things wrong with your code. First, you want your rows to be child elements of your container divs.
<div class="container">
<div class="row">
etc...
</div>
</div>
Otherwise your containers will stick to the side of the viewport. Second, it's a good idea to make sure that columns of the same width add up to twelve. So change col-md-2 to col-md-4, for example. That way your rows will always fill up the entire width of their containers.
.col-1{
background:yellow;
}
.col-2{
background:lightblue;
}
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4 col-1">Name</div>
<div class="col-xs-12 col-md-8 col-2">zyx</div>
</div>
</div>
I'm making a responsive web page using bootstrap. It works as intended when the browser window is >= 50% of the screen size. I have some column elements nested inside of a column element, which is nested inside a row element. So, there are 3 children columns of each row, and then 4 children columns for each column. The problem may be occurring because I have a column nested inside of a column, but if that were the case then wouldn't it display incorrectly when the browser is full screen, too?
When the window shrinks to less than 50% of the screen size, the most nested columns display as rows. I don't understand why this is happening.
<div class="row foo" ng-repeat="foo in fooCtrl.foos">
<h4>{{foo.name}}</h4>
<div class="col-md-4 fuzz">
<h5>{{foo.type[0].fuzz}}</h5>
<!-- START BAR DISPLAY -->
<div class="col-md-3 bar" ng-repeat="bar in barCtrl.bars">
<h6>{{bar.name}}</h6>
</div>
<!-- END BAR DISPLAY -->
</div>
<!-- More columns -->
</div>
In simpler terms, the bars aren't being displayed as columns when the window size is < 50% of the screen.
The col-md-* bootstrap classes only apply at a media query breakpoint where the window width is greater than or equal to 992px. As others have stated, you will need to use col-xs-* as that is the default class used.
You can read more here: http://getbootstrap.com/css/#grid. As a best practice, you would typically wrap the maximum number of columns that could constitute a row in a div with the class row; however, that may not be your specific problem in this case. In most cases this is the set of elements with the lowest number (n) (col-*-n) that add up to 12 if you are using the default grid settings.
Some examples using your .bar classed elements:
4 columns of .bar elements on all devices:
<div class="col-xs-3 col-md-3 bar">
3 columns of .bar elements on extra small devices up to medium devices (992px in width) at which point 4 columns will display:
<div class="col-xs-4 col-md-3 bar">
2 columns of .bar elements up to medium devices, then 4 columns per row:
<div class="col-xs-6 col-md-3 bar">
And finally 1 .bar element per row up to medium devices, then 4 columns per row:
<div class="col-xs-12 col-md-3 bar">
You need to have a div within the larger column with class row. Then you need to know that if you are going to subdivide the larger columns, the way bootstrap works is that you would have up to 12 subdivisions, but with a smaller col, something like col-sm-12. But I am not too sure on all this. I have read and reread those bootstrap grid descriptions, and I am still trying to make sense of them.
<div class="row">
<div class="col-md-4>
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div class="col-md-4>
</div>
<div class="col-md-4>
</div>
</div>
You've set the size only for md. You haven't set xs/sm/lg.
The default breakpoints for bootstrap are 768px, 992px and 1200px.
I suppose you have a HD Monitor the md-breakpoint is about half the screensize and the view will swith to sm ignoring col-md-x and using col-sm-x
Note: If nothing else set also set col-xs-12 to prevent weird behavior
I am mocking out a site in bootstrap 3.1, and I think I am doing something wrong. The following html, I am under the impression that col-xs-2 (with: some content) should fall to the bottom of the screen under col-xs-8, How ever the actual case is that col-xs-2 shrinks as much as possible and then col-xs-8 sits on top of it.`
<div class="row">
<div class="col-xs-2"> some content </div>
<div class="col-xs-8"> Main Content </div>
<div class="col-xs-2"></div>
</div>
Use col-md-8+col-md-2 or col-lg-8+col-lg-2 for the desired effect.
Actually col-xs-# is a class which maintains the layout in smaller screens too. For the grid layout to work as desired, col-lg-# or col-md-# is used.
Here's the table from the website of Bootstrap that depicts the grid systems:
Read more about the grid system here.