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?
Related
I am trying to display some text and an image next to it in one row.
I am using Tailwind Css as much as possible and I would like to add and offset of 1/8 of the width so that there is some margin between the text and the image
<div class="grid section">
<div class="w-full">
<div class="w-5/8">
<p> Whatever text ...</p>
</div>
<div class="w-2/8">
<img src="whatever.png"/>
</div>
</div>
</div>
What would be the name of the offset class in Tailwind to add a left offset of w-1/8 to the img div wrapper, if there is one?
Thank you in advance guys!
You almost answered your own question:
... so that there is some margin between the text and the image
You need to add margin to the image. In this case you would add mt-20 (or possibly a different size) to image's div, which means margin top. Other margin classes exist and they are well documented.
Live example here.
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.
This might explain my question a bit better:
I need one child div positioned on top of the other so that the last-child is only showing around the edges, but the two child divs need to scroll together and keep the background of the first-child div static. This mesa that the viewport would be the first-child, but the content of the first and second child would have to scroll within the container so they can scroll together., with the first-child being the viewport.
I have the following HTML structure:
<div class="container">
<div class="text">
<div class="row">Row</div>
<div class="row">Row</div>
<div class="row">Row</div>
<div class="row">Row</div>
<div class="row">Row</div>
<div class="row">Row</div>
</div>
<div class="bars">
<div class="a"></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="b"></div>
<div class="a"></div>
</div>
</div>
The bars extend to the width of the page, and the text div is overlaid on top of them, with a margin around it. I position each bars div so that they match up at the same horizontal level with the visually corresponding row.
The text div is positioned to be x pixels from each side, so that there is a margin around it. This way, you can see the ends of the bars below it.
The markup is easy, but I can't figure out the CSS for this...
text is positioned absolutely, so that it can extend to the bounds of the page with a margin. This is fine if the content inside it stays within the bounds, but it does not in this case.
This is all very hard to explain, but basically, here's the problem: I set container to overflow:scroll because I need the bars to scroll with the rows. Since text has a background image, and is positioned so that you can just see the ends of the rows beneath it, it has to be position:absolute. This doesn't work, however, when the content exceeds the bounds of text. I can't add the background image tocontainerbecause it would cover the ends of thebars`.
Does that make sense? No? Here's a jsFiddle: http://jsfiddle.net/charlescarver/BskaP/2/
Does it still not make sense? Here's a picture:
Any ideas? Ask me some questions so I can explain this better.
You don't need a lot of the css that's there -- for example the .container. If I understand correctly (and I'm not 100% sure I do) you'd like a image on the .text div which remains fixed while the rest of the page -- bars and text scroll.
You cannot put the image on the text div as it will scroll; rather, I suggest putting the image on each .row with a position: fixed as well as using padding-bottom:20px instead of the margin, so that there appears to be an image behind all of the rows and the effect is continuous. That will give you the effect I think you're after
http://jsfiddle.net/BskaP/5/
You can use jQuery's scrollTop() function to get an elements position based on scroll. Coupled with a scroll() event, you should be able to sort something out.
So put something in your scroll event to offset the position of your rows and text by the value of scrollTop().
scrollTop() : http://api.jquery.com/scrollTop/
scroll event : http://api.jquery.com/scroll/
My initial thoughts was to avoid JavaScript by combining the rows and text elements together and fake the rows being behind the text... but given your specific situation I couldn't come up with anything...
You should add overflow:auto to row. Here is a jsfiddle that proves it works: http://jsfiddle.net/BskaP/3/
I added an extra long row to it for an example.
I don't know if this is what you want, but I think it is.
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.
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.