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>
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 want to create a horizontal row of elements that form a panel of steps the user needs to take. These are all made out of blue rectangles that contain a title, text and an icon. See image for example.
I need the items to break at either 2 or 3 items depending on the screen size.
This can be achieved in (afaik) 2 ways.
A div container with 6 divs, that all have their own class to help them beak at mobile sizes.
an unordered horizontal list, with classes on the list items to help them break where I want.
How do I determine what is the 'right' option here? What method do I choose? Or does it really not matter?
Go For Lists(li) not div.
If just getting the layout is the concern, You can use either div or li.
But I would prefer li over div since it looks like a list of things to me.
Thus to keep my code semantic, I will go for lists. HTML has the ability to express lists of things, and it helps the Google robot, screen readers, and all other devices that does not rely on the presentation of the site understand your content better.
Given the fact that you have a step-by-step template, you can easily use an ordered list as a container. ol > li(1/6%) > h3 + img + p
There's no default HTML element with the styling you want.
You will have to restyle some arbitrary other element to achieve what you want.
It doesn't really matter which element you use as a starting point to create the style you want.
The only difference therefore is a semantic one at the HTML level; what would be the most useful representation of the content without any style at all, purely from its meaning…?
I think it should be obvious that an ordered list carries the most useful semantics to mark up a list of steps which must be followed in order.
If your using bootstrap you can use code below , otherwise you can use (li list) its more easy to right css.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-3 col-xs-12 text-center">
image-1
</div>
<div class="col-md-2 col-sm-3 col-xs-12 text-center">
image-2
</div>
<div class="col-md-2 col-sm-3 col-xs-12 text-center">
image-3
</div>
<div class="col-md-2 col-sm-3 col-xs-12 text-center">
image-4
</div>
<div class="col-md-2 col-sm-3 col-xs-12 text-center">
image-5
</div>
<div class="col-md-2 col-sm-3 col-xs-12 text-center">
image-6
</div>
</div>
</div>
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>
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/