I am trying to change the order of my sidebar and content areas on my page.
<div class="col-md-3">Sidebar</div>
<div class="col-md-9">Content</div>
I've a hefty amount of content in my sidebar and I would like the sidebar to show under the content area on mobile instead of content under sidebar.
I've searched a few questions and I cannot seem to get the solutions to this.
You can use the col-md-pull-* and col-md-push-* classes. You want to set the mobile order in your HTML directly, then use these classes to rearrange them for desktop, ie:
<div class="col-md-9">Content</div>
<div class="col-md-3 col-md-3-pull">Sidebar</div>
whit that code should be work, but add those clases
<div class="col-md-3 col-sm-12">Sidebar</div>
<div class="col-md-9 col-sm-12">Content</div>
Related
I am currently working on a landing page that uses bootstrap's grid system for positioning and the desktop view has the layout looking something like:
|h1|--------------------|p|
|Button|
The mobile view has it looking like:
|h1|
|p|
|button|
Because of the grid, the h1 and button are in 1 div and the P is in it's own div.
The easy solution would be to just have hidden divs based on the breakpoints, but I'm trying to avoid this. I've tried using the order class to move things around with other elements on the page, but seeing as the parent s are the 2 objects in the grid and not their children, this doesn't work. I could also do this with JS, but I would also like to avoid doing this.
<section class="test">
<div class="container">
<div class="test--content row justify-content-lg-center text-lg-left">
<div class="test--cta col-12 col-lg-5">
<h1>Headline</h1>
<div class="button main">CTA</div>
</div>
<div class="contact--text col-12 col-lg-5">
<p>Content</p>
</div>
</div>
</div>
</section>
As I mentioned, the solution with CSS and JS are pretty clear, but as I've barely used Bootstrap, I am curious to know if this is possible without using the above mentioned solutions or if there was a way to do this with Bootstrap.
In the Bootstrap 3 documentation they give the following example of using push and pull classes to change column ordering (http://getbootstrap.com/css/#grid-column-ordering):
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
I understand how this works but why would you not just write the order in which you want them to appear in your HTML, like this?
<div class="row">
<div class="col-md-3"> ... </div>
<div class="col-md-9"> ... </div>
</div>
I can't see any possible use case for the example they give, because whether the order is col-md-3, col-md-9, or col-md-9, col-md-3 you're still not going to gain any more or less width on any device - they still add up to 12. Therefore why not just define it in the HTML in the correct order?
I understand how the classes work technically. But I don't understand what the use case of them could possibly be since they don't appear to do anything you cannot do already by defining things in the order you want? Essentially you can't gain any more or less viewport width on a given device, so where would you ever want to do something like this?
Column ordering classes allow us to change the order of our grid system based on different browser sizes. This means that on a large screen, you can have a different grid than on a mobile screen.
You can check this for example,
https://scotch.io/tutorials/reorder-css-columns-using-bootstrap
why would you not just write the order in which you want them to
appear in your HTML
It's because when we write markup we're supposed to think of its semantics too.
For example you have a page which has a sidebar on the left side, and an article on the right side. In your markup hierarchy the article should comes before the sidebar because the article is the main page content.
But then if you float them left, the article will be on the left side and sidebar will be on the right side, which is the opposite of what you want to achieve. So to fix this you will use push and pull classes, you get the idea.
This is just an example. Of course other options are available to achieve the same result such as float them right, or place the sidebar markup before article but wrap it with <aside> element.
I ran into an issue while trying to place two tables in the same bootstrap row. They appear just fine, however the panel-heading element gets cutoff because of some strange CSS restriction.
I noticed the issue starts when I try to add this line in:
<div class="panel panel-default col-md-6">
Unfortunately this is somewhat required, as it will specify the table takes up 50% of width of the parent element. Does anyone have any advice on how to isolate the responsible CSS rule/how to fix this issue?
JS Fiddle
What's required is to introduce another div around those with the class of panel.
Here's what it should look like:
<div class="col-md-6">
<div class="panel panel-default">
Here's an updated Fiddle: https://jsfiddle.net/x9d5k7Lv/12/
I want to create a normal wordpress page as part of a responsive bootstrap theme where I can explicitly assign html blocks specific CSS classes.
This will allow me to create a page where I have 3 equally sized blocks each with col-md-4 using bootstrap? Essentially in my wordpress page I want:
<div class="container">
<div class="row">
<div class="col-md-4">area 1</div>
<div class="col-md-4">area 2</div>
<div class="col-md-4">area 3</div>
</div>
</div>
I do not see how to do this when I am in the page editor, there is no place for html editting - please can somebody help me:
click on the 'Text' tab on the top right of the editor to add HTML markup.
I am trying to put a detail view between rows in my web application.
I am using Bootstrap and some Frontend Rendering.
My code looks somewhat like this:
<div class="col-sm-4 col-xs-6">
...
</div>
<div class="col-sm-4 col-xs-6">
...
</div>
etc...
I am basically looking for some way to do this in bootstrap or some library that does it. The closest example I could find is in the newest itunes version, I've attached a screenshot for that.
Edit:
What I have tried / thought of:
Put the detail view as an absolutely positioned div inside the tile and give the tile a margin-bottom.
This didn't work out since the layout simply breaks. To make this work, you would have to give all elements in the row a margin-bottom.
Put a set of tiles into a row-div and just insert the detail div after that specific row.
This will either break every responsive feature or require a lot of javascript to somehow dynamically put the divs into rows.
I am basically looking for a library / css hack that makes me able to do this without writing a whole lot of javascript.
For the 'details' row, you'd probable just need to use:
<div class="col-xs-12">
...
</div>
That would force it to span the full width regardless of the screen size. So your 3 rows would look like:
<div class="col-sm-4 col-xs-6">
...
</div>
<div class="col-xs-12">
...
</div>
<div class="col-sm-4 col-xs-6">
...
</div>