I am using bootstrap's grid, and I would like to have a div that "breaks" the grid and is streched to the borders of the screen ('width:100%').
my code looks something like this:
<div class="container">
<div class="row">
<div class="span12">
div that is the width of the grid
</div>
<div class="unknown">
div that breaks the grid and has full width
</div>
</div>
</div>
how can I achieve this? is it common practice to open many different containers, or can I do this with divs nested with the container?
Use several containers rather than overriding the layout with custom styling.
Bootstrap themselves have examples with multiple containers being used, such as:
the carousel
Related
Let's say I have this structure:
<div className="row">
<div class="col-sm">
<div>TEST</div>
</div>
<div class="col-sm">
<div>TEST<br>TEST<br>TEST</div>
</div>
</div>
Basically, I know how to make the columns of the same height (using the .equal class on the row) however, what I need is the child div of the column to also be of the same height. Currently, if one of the child divs is shorter, it won't look aligned because I set the background color to be in the child div and not on the col-sm div.
I cannot set the background on col-sm for flexibility reasons. E.g. I may need to use that child div component in another section that doesn't use 'col-sm'.
Mine currently is the one on top, I want it to become the one at the bottom:
A situation like this, for me, would be time to turn to jQuery or a plugin such as MatchHeight.
matchHeight makes the height of all selected elements exactly equal.
I have a page with a bunch of equal size divs that I want to fit responsively in the available space of a wrapper div.
The idea is that:
- in a large screen the divs will show in 3 columns
- in a medium size screen the divs will show in 2 columns
- in a phone screen the divs will show in 1 column.
I'd also like the wrapper to center horizontally.
I was trying:
#wrapper {margin:0 auto;}
.column {float:left; max-width:340px; height:540px; margin:20px}
It works as intended except that the wrapper doesn't center, which I was trying to achieve with line 1 of css.
Any idea how I can achieve this?
EDIT:
The HTML code:
<div id="wrapper">
<div class="column one">
</div>
<div class="column two">
</div>
<div class="column three">
</div>
</div>
If your requirements allow you to do so, I would suggest using a UI Framework such as Twitter's Bootstrap. They have components that would achieve exactly what you are attempting to do (see their grid system documentation).
Example
EDIT: Included grid documentation link & Example
I am newbie with bootstrap gridline system so I got stucked when I tried to create that (advanced?) gridview:
So my problem is that I do not know how to organize blocks in rows, because some blocks must have difeerent height, for example height of block 5. should have the same size as blocks 3. and 2. together.
Is that even possible? Also there should be some space between blocks, so background image should fill those space.
Please help me out.
What you'll want to do is place divs 2, 3, and 4 in their own container div (with the class .col-md-3) and 5 and 6 in another container div (with the class .col-md-3). Make div 1 have the .col-md-6 class.
Edit: You should use a media query to make it a fixed height in the desktop, then a flexible height when it's mobile.
#media screen and (max-width: 980px) { #div2 { height: 500px; (or whatever)}}
I think the most efficient way to do this is to simply use a single row with three columns. Your divs can stack inside the appropriate columns, and you can define the heights for each one. You can see it in action here: http://jsfiddle.net/StSmith/Z9SpM/1/
<div class="container">
<div class="row">
<div class="col-lg-6">
<div id="box1">1</div>
</div>
<div class="col-lg-3">
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
</div>
<div class="col-lg-3">
<div id="box5">5</div>
<div id="box6">6</div>
</div>
</div>
A simple way to do this is to declare the divs in the order you listed, and then apply a simple float: left. If you define the heights of each div manually it should all fit into place!
Rachel's got the right idea. You really just need to nest rows into a container, then use CSS to adjust the heights.
Are there any built in css classes in jQuery Mobile for horizontal positioning? In Bootstrap, the screen is divided by 12 columns, and elements can be aligned based on them. Example: "col-md-2". http://getbootstrap.com/examples/grid/
I want it to be fairly responsive in design. At the moment I'm thinking of using divs and set the "css width" to a percentage..
Take a look at jquerymobile responsive grids: link
code:
<div class="ui-grid-b ui-responsive">
<div class="ui-block-a">Column A</div>
<div class="ui-block-b">Column B</div>
<div class="ui-block-c">Column C</div>
</div>
So I've got a Bootstrap 3 form where I simply want to line up a bunch of spans in a neat row, degrading into a stack on mobile:
From [station1] to [station2] at [time]
From
[station1]
to
[station2]
at
[time]
Obviously I can do this, and it works:
<div class="row">
<div class="col-md-1">From</div>
<div class="col-md-3"><select>...</select></div>
<div class="col-md-1">To</div>
<div class="col-md-3"><select>...</select></div>
...
</div>
However, it looks rather silly if the screen is wide:
From [station1] to [station2] at [time]
If I queue up some spans without the col-X-Y classes, they don't play nice with Bootstrap. And if I try to mix together grid and non-grid spans or divs, they get ordered in weird and mysterious ways as shown in the last two rows of this JSFiddle. Help?
Bootstrap is not the solution to everything. You still have to write your own CSS at times. You can reduce your column widths for larger screens by using the appropriate classes, but that will not improve things much.
Instead, you are better off writing your own CSS. Style your elements to be inline-block, add some margin and padding. If you want to take it a step further you can write your own media queries to handle styles at reduced widths.
Look at line 260 in the variables file in Bootstrap.
#screen-xs: 480px;
#screen-xs-min: #screen-xs;
#screen-phone: #screen-xs-min;
You can use those variables to create viewport specific CSS.
#media (max-width: $screen-xs) {
// Change spans to block
span.my-field {
display: block;
margin-bottom: 10px;
}
}
If you are not using Sass or Less, you can hardcode the values of the variables. For example, 480px instead of $screen-xs.
You could wrap the columns in a smaller width col, such as col-sm-5 or col-sm-6..
<div class="row">
<div class="col-sm-4">
<div class="col-lg-2">From</div>
<div class="col-lg-2"><select><option>station</option></select></div>
<div class="col-lg-2">To</div>
<div class="col-lg-2"><select><option>station</option></select></div>
<div class="col-lg-2">at</div>
<div class="col-lg-2"><select><option>time</option></select></div>
</div>
</div>
Demo: http://www.bootply.com/116599
An alternate approach:
<span>From</span>
<br class="visible-xs visible-sm"/>
<span>...</span>
<br class="visible-xs visible-sm"/>
Looks nasty, but seems to work nice. I haven't found any issues yet.