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.
Related
In my bootstrap web page i have a left sidebar and besides it i have the page content. The HTML code is:
<div class="col-sm-3">Sidebar</div>
<div class="col-sm-9">Content</div>
I like the view for laptops and bigger screens but on screens <768 px wide (tablets and smartphones). The divs slack and the sidebar comes on top of content div.
I know this is a bootstrap feature but i want it to slack another way- i want the content to be at top of sidebar on screens <768 px wide.
You can view this thing on the jQuery page. Opening the page on smaller browser view will show what i mean.
Can this be done in bootstrap? I definitely want to the design to remain same for laptop and bigger screen.
And i don't want to apply any custom media query for this. Can bootstrap provides a solution for things like this? Please help. thanks
Push and Pull solution
If you can reorder the divs in your html you can utilize the push and pull from bootstrap.
<div class="col-sm-9 col-sm-push-3">Content</div>
<div class="col-sm-3 col-sm-pull-9">Sidebar</div>
Update Bootstrap V4 Alpha
Change the order of your grid columns using the push-md-* and the pull-md-* modifier classes.
Example
<div class="row">
<div class="col-md-9 push-md-3">Right Content</div>
<div class="col-md-3 pull-md-9">Left Sidebar</div>
</div>
You can use direction: rtl; on you container, and direction: ltr; on your columns, with the appropriate media queries.
HTML:
<div class="row-rtl">
<div class="col-ltr">Main</div>
<div class="col-ltr">Sidebar</div>
</div>
CSS:
.row-rtl {
direction: rtl;
}
.col-ltr {
direction: ltr;
}
I solved it using the col-md-push-*, i also changed the order of my columns first then applied the push. This is the final code.
<div class="col-sm-9 col-sm-push-3">Content</div>
<div class="col-sm-3 col-sm-pull-9">Sidebar</div>
What is is doing with push and pull is that when the screen size is greater than sm meaning in md-* and lg-* then is is pushing the content div and pulling the sidebar - meaning for screen size ≥992px sidebar div comes first then comes the content div.
For in sm screen size (<768px) it behaves normally based on what the order is specified in the html.
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
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.
New to Bootstrap and trying to figure out something simple:
For tablet and desktop viewports, I want a fixed-width table to be used as a calendar: no relative sizing (percentages), just fixed width and heights.
For mobile, all the 'cells' in this table should stack. So far I have the basic bootstrap setup:
<div class="container-fluid">
<div class="row">
<div class="col-xs-1">Sunday</div>
<div class="col-xs-1">Monday</div>
<div class="col-xs-1">Tuesday</div>
<div class="col-xs-1">Wednesday</div>
<div class="col-xs-1">Thursday</div>
<div class="col-xs-1">Friday</div>
<div class="col-xs-1">Saturday</div>
</div>
...
Questions/Problems:
1) This only stacks if I use "col-sm-1", but then that stacks too 'soon' on a desktop browser; I'd rather use xs but I'm not sure how to make that stack.
2) Is there any canonical way to make the 'cells' fixed-width and height without breaking the bootstrap model?
I am attempting to use bootstrap to build a very simple webpage.
I can get everything to look right on regular width browsers, but when I go full screen on a wide screen monitor in Chrome all the text and buttons jumble up to the right. No matter what I do, I can't seem to avoid this problem. Is there a solution or is bootstrap just not able to work with widescreens? (I am 100% OK with there being blank space on the left and right, I am just trying to avoid everything shifting way to the right after I stretch the browser to a wider width.)
<div class="container mark">
<div class="row">
<div class="col-lg-offset-1">
<div class="col-lg-offset-11">
<h1 class="cover-heading">Company Name</h1>
<p class="lead">Company Description</p>
Learn More - Email us
</p>
</div>
</div>
</div>
</div>
The bootstrap classes do not need to be nested as you have them. You seem to want something that takes up 11 of 12 of the Bootstrap grid columns, offset by one column on large devices only - this can and should be specified on the same div. Try something like:
<div class="container mark">
<div class="row">
<div class="col-lg-offset-1 col-lg-11">
<h1 class="cover-heading">Company Name</h1>
<p class="lead">Company Description</p>
Learn More - Email us
</div>
</div>
</div>
Demo
There are examples in the Bootstrap Grid Documentation