Am I losing my mind, because I'm absolutely sure this code should work... but it doesn't.
I'm trying to order my elements according to screen size ie. if small screen or less, menu element is first - and if medium screen or more - menu element is second.
<div class="col-md-9 order-sm-2 order-md-1">
Main content
</div>
<div class="col-md-3 order-sm-1 order-md-2">
Menu column
</div>
What I'm getting for both small and medium screen size is: Main content (1st) and Menu column (2nd).
Can anyone help?
I suspect your problem is either that order-sm-2 and order-sm-1 should define the xs instead of sm versions,
or that the shown code isn't surrounded by the same row & container DIVs
I'm such a div (no pun intended):
<div class="col-md-9 order-2 order-md-1">
Main content
</div>
<div class="col-md-3 order-1 order-md-2">
Menu column
</div>
Needed to have a base order before introducing a breakpoint.
Related
For the smallest xs size, even if I have the columns adding up to 12, they don't work as expected if screen width decreases beyond a certain limit. For instance:-
<div class="container">
<div class="row">
<div class="col-xs-2">
</div>
<div class="col-xs-1 col-xs-offset-8>
</div>
<div class="col-xs-1>
</div>
</div>
I would expect the if I decrease the size the last column will get stacked up to the end of the screen. However, this is not the case. As the screen decreases beyond a certain limit, the last column wraps up toward the beginning of the screen. I have thought about writing css code to give the container min-width. However, I thought that bootstrap might have a better way to handle this
This is a known issue: https://github.com/twbs/bootstrap/issues/13221
At screen widths <360px, the .col-xs-1 columns start to wrap because..
"while the column is set to width: 8.333333%;, the
column is going to be at least 30px wide because of the 15px padding
on either side. Therefore, there's a mismatch and the browser just
stacks the columns" - #mdo
The problem can be avoided by not using col-xs-1 on very small screens. You should also consider if the screen will realistically be resized less than 360px. In most cases it is not.
Note: In Bootstrap 4, col-xs-1 is now col-1.
Related: Bootstrap grid breaks in smallest size
It works well for me. But your code lacks a closing div and few quotation marks.
<div class="container">
<div class="row">
<div class="col-xs-2">
</div>
<div class="col-xs-1 col-xs-offset-8">
</div>
<div class="col-xs-1">
</div>
</div>
</div>
I have div in container that I want to be col--8 with offset-2 on medium, large, and extra large screens - this would put it in center of page and smaller with wide, however at same time when screen is small or extra small I want to offset to be removed and col--12 div being of full with
I tried with:
<div class="col-xs-12 col-xs-offset-0 col-md-8 col-md-offset-2" >
Some content here...
</div>
What I doing wrong ?
Ps. I also using angular on page...
Remove col-xs-offset-0. it is not necessary.
here is a forked jsFiddle
The classes that you have there should do the job so long as you have properly wrapped the div in parent .container and .row div elements. Including those wrappers would look like the following:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-2" >
Some content here...
</div>
</div>
</div>
In Bootstrap 4 the syntax is a little bit change
col-lg-10 offset-lg-2
I've got a two column page:
<div class="col-md-5">
...
</div>
<div class="col-md-7">
...
</div>
On desktop and tablet screens, the first div appears to the left of the second div, as we would expect. On smaller screens, the first div appears on-top of the second div, again, as we would expect. What I'm wondering is.... Is it possible, on smaller screens, to flip the order of these two so that the second div appears on top of the first?
Sure! This is built into Bootstrap version 3, with classes like col-[size]-push-[cols], as in the column ordering section of Bootstrap's documentation
Demonstration in this fiddle, using the below code based on Bootstrap's example.
<div class="container-fluid">
<div class="row">
<div class="col-sm-9 col-sm-push-3">First on mobile, second on desktop</div>
<div class="col-sm-3 col-sm-pull-9">Second on mobile, first on desktop</div>
</div>
</div>
I have two columns in a row.
<div class="row">
<div class="col-lg-2">
I want this column in bottom side on mobile.
</div>
<div class="col-lg-8">
I want this column in top side on mobile.
</div>
</div>
When I visualize this on my laptop, they are in left and right side respectively. When I watch the page on my mobile phone I see first column on top of the web page.
I want to change the order, first column left side on laptop and bottom side on mobile phone instance of first column that is left side on laptop and top side on mobile phone.
I want to keep the laptop aspect, only change mobile phone view.
Check out the documentation of Bootstrap 3's grid system:
http://getbootstrap.com/css/#grid
By adding the *-lg classes you have only specified how your page should behave on a large screen.
You probably want to add the *-xs classes for defining the columns in the smartphone widths. You can keep the *-lg classes just as they are now.
Furthermore, for changing the order of columns in different widths, bootstrap provides *-push and *-pull classes, see here: http://getbootstrap.com/css/#grid-column-ordering
add class to the larger div .pull-left, and smaller div .pull-right
<div class="row">
<div class="col-lg-2 pull-right">
I want this column in bottom side on mobile.
</div>
<div class="col-lg-8 pull-left">
I want this column in top side on mobile.
</div>
</div>
This will float the second larger div to the left, and thus in the mobile view, where .col-lg-8 is not applicable, will bring it on top
Edit: As this answer creates a gap between two divs, because there are only 10 columns utilized
You will need to change your html see this http://jsfiddle.net/53u69ama/1/
<div class="row">
<div class="col-sm-8 col-xs-12 ">
I want this column in top side on mobile.
</div>
<div class="col-sm-2 col-xs-12 ">
I want this column in bottom side on mobile.
</div>
</div>
Edit 2: you can also change the top position using position style, but this will require you to set the static top for one div. Or you may change it using javascript dynamically.
see this http://jsfiddle.net/53u69ama/2/
Solution:
<div class="row">
<div class="col-lg-8 col-lg-push-2">
I want this column in top side on mobile.
</div>
<div class="col-lg-2 col-lg-pull-8">
I want this column in bottom side on mobile.
</div>
</div>
Use this
<div class="row">
<!-- this is visible if view is all less lg (on top) -->
<div class="device-xs visible-xs device-sm visible-sm device-md visible-md">
<div>
Content to view 2.
</div>
</div>
<div class="col-lg-2">
Content to view 1
</div>
<!-- this is visible when view is lg (in right) -->
<div class="col-lg-8 device-lg visible-lg">
Content to view 2.
</div>
</div>
Note that you will have to copy "Content to view 2." twice.
I've boiled my layout down to this fiddle or the full screen version
I am having two problems. The first, is that space between the side bar and the content is very large. I want them to be spaced as normal. In my case, I'm expecting the side bar to be span2 in size, my main content to be span7 in size and then a right hand column to be span3.
<div class="row-fluid">
<div class="span2">
<div class="well sidebar-nav-fixed">
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
...other links ...
</ul>
</div>
</div>
<div class="span7 span-fixed-sidebar">
<div id="world-map" style="display:block;"> </div>
</div>
<div class="span3">
<div class="row-fluid">
<div class="span12" id="country-info">
<h2 id="country-info-header">
The Detail Header
</h2>
<p id="country-info-summary">
A set of summary information. A short paragraph of text.
</p>
</div>
</div>
</div>
However, I'm getting a result with a huge gap between my sidebar and my content (the red box), and the right hand content is on the left hand side and under my sidebar. How can I fix this layout?
You need to experiment with Bootstraps offset classes. I made you a quick example here:
http://jsfiddle.net/tXzjX/5/
Your position:fixed takes the element out of the natural flow of the page, and in a way "resets" the columns on the grid. Using Bootstrap's offset classes can counteract that issue. Check here: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem under "Offsetting Columns".
Could you not just reduce the margin size like so:
.row-fluid > .span-fixed-sidebar {
margin-left: 100px;
}
as that seems to move the red bar in nicely
EDIT: I have had a play about and come up with a slightly simpler looking code with what I think is the effect you require with a bit of tweaking. http://jsfiddle.net/bmgh1985/UeFRa/