How do I make the left and right gutters different colors with 960.gs? When I try something simple like:
<div style="background-color: green">
<div class="container_16">
<div class="grid_16">
test
</div>
</div>
</div>
<div style="background-color: cyan">
<div class="container_16">
<div class="grid_16">
test
</div>
</div>
</div>
The green and cyan colors are ignored. Seems like the "grid_16" class removes the color for some reason? My goal is being able to have different sections of the page in different colors all the way across the page, even past 960 pixels. So if someone makes their browser 1200px the left and right sides have the right color and the rest of the grid system is all contained within the 960 pixels in the middle.
I could add a background color to 'body' to do this for just 1 color, but I want multiple colors in the page. Like different colored horizontal stripes. Thanks.
Well, to understand the reason you need to understand how the grid layout works.
The thing is that when you tell the grid to be a certain width it also makes it floating.
Which means that your outer divs have the height of 0px.
So, in short. It doesn't remove the background colour, it just doesn't show it, because there is nothing to show (your grid is floating on top of it, so the actual size doesn't matter.
To solve it, just add a clearfix in the container and it should be solved. However, you also need to think about that the divs inherit the background colour per default.
<div style="background-color: green">
<div class="container_16 clearfix" style="background:white">
<div class="grid_16">
test
</div>
</div>
</div>
<div style="background-color: cyan">
<div class="container_16 clearfix" style="background:white">
<div class="grid_16">
test
</div>
</div>
</div>
Sticking two grid containers side-by-side is not a very smart way to produce horizontal stripes. If you want some containers to break past the grid's boundaries then adjust their margins appropriately, or put them behind (and outside) the grid entirely.
Related
I want to make a diamond with lines beside. It works when it's a square, but when I apply transform: rotation(45deg); on the square, the two lines are crossing the diamond.
https://jsfiddle.net/0kty2fLw/
CSS transforms don't affect the position of any other elements. Initial sizes and positions of all elements are set before any CSS transforms are applied, then CSS transforms are applied, affecting only the transformed elements. This means that when your square is rotated 45 degrees, the lines on each side are still the same length they were before the rotation. After the transform, the rotated square is now wider than it was before the rotation, so the lines are overlapping the left & right points of your 'diamond'.
The quickest way to deal with this is to set a background colour (white would work with your example) on your square to cover the lines, and ensure the lines are set with z-index to go behind the rotated square. Alternatively, if you need the square/diamond to be transparent, you could reduce the width of the lines using the left & right margins to prevent the overlap.
As a side note, your Bootstrap structure is not correct: you shouldn't have a .container inside a .container. I would also avoid using Bootstrap grid elements for something like this. It adds unnecessary structural complexity to HTML that should be much more straightforward. If you need this to fit inside a Bootstrap layout, I'd just do the whole line / diamond design inside one full width .col and deal with the sizing & responsiveness independently.
Edited
check this.
#ligne1{
margin-right: -5vw;
}
#ligne2{
margin-left: -5vw;
}
It'll maintain the responsive design
Just increase left and right margin.
Here is jsfiddle: https://jsfiddle.net/0kty2fLw/4/
#ligne1{
margin-right: 35px;
}
#ligne2{
margin-left: 35px;
}
And remove col-2 class
<div class="container">
<div class="row ">
<div class="ligne col my-auto" id="ligne1"></div>
<div>
<div class="container">
<div class="row justify-content-center">
<div class="square my-auto">
<div class="circle">
</div>
</div>
</div>
</div>
</div>
<div class="ligne col my-auto" id="ligne2"></div>
</div>
I'm making a box based layout and I'm having issues with the gutters in bootstrap 3. Since they've been changed to be padded since bootstrap 2, every time I want to add padding to a box it completely destroys the gutter. I can't seem to find a way of remedying the problem.
I use a .box class to highlight the box from it's gutter and give them background colours and images. I want padding inside the box for the text so it's not right on the edge of the box walls, so I made a .box-inner class, but I can't just apply padding to it :/
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<div class="box">
<div class="box-inner">
<h1>Test2</h1>
</div>
</div>
</div>
</div>
</div>
Any help would be very appreciated! I've been banging my head against the wall for hours.
Fiddle here, I highlighted the problem areas with a comment:
http://jsfiddle.net/kbj8dd0e/6/
Sure you can add padding. Just add it to the .box.
Have a look at this:
http://jsfiddle.net/kbj8dd0e/5/
(note that I changed the col-md to col-xs to make it show better in that small fiddle pane, but the same should work for any col class.)
All I did was move the padding to the .box class to be able to remove the redundant .box-inner. I also removed all your instances of <div class="row"><div class="col-md-12">...</div></div> as this just adds markup and serves no purpose whatsoever.
Or am I missing something here?
I want to frame a div surrounding divs having higher z-index.
(The framed div will contain a slideshow with elements, animated and with wierd margins, and the masking divs are supposed to hide the the texts being animated from the side.)
I'm thinking something like:
<div class="fullwith mask"></div>
<div class="mask leftpadding"></div>
<div id="slideshow" style="width:640px;height:405px;"></div>
<div class="mask rightpadding"></div>
<div class="fullwith mask"></div>
I've created this fiddle that by no means work, please fill the gap or tell me if I'm off the mark here.
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
I'm trying to implement the following scenario, using Twitter Bootstrap and Fluid Layout :
Left sidebar (I don't care whether the width is fixed or not) - occupying the WHOLE HEIGHT (no margins at all, like the sidebar in jsfiddle.net)
The rightmost part of the content, will occupy the remaining part of the window (fluid)
I've tried setting it up like that, but it definitely doesn't work (there are margins everywhere and the columns definitely don't occupy all of the vertical space) :
<div class="container-fluid" style="">
<div class="row-fluid" style="">
<div class="span3" style="">
</div>
<div class="span9" style='background:#fff;'>
</div>
</div>
</div>
Any ideas? How would you go about this?
Not totally sure but I think this might work...
Put height:100% on the html and body elements of your page.
Then give the element that you want to be the full height of the page a min-height:100%
Hope that helps.