I have repeating rows/columns setup with Bootstrap's grid system. I want to create padding between these elements, but have their border and background reside inside of that padding. I have tried using margin but that jacks with Bootstrap's grid layout on the column level.
The below is a very trimmed down version of what I'm working with, which illustrates the point. I would like to modify this so that the blue border hugs the white inner box, and you don't see any red (in my case it would show up behind text). I need to achieve this without modifying the essential html layout of what's there already, so relying just on CSS.
To clarify what I'm going after... I want to add padding between the rows & columns. If I just straight add padding to the outer div (as exists below) the border and background color extend outside of that padding. I want the border and the background color to exist within the boundaries of the padding I add.
I have tried using a variety of box-sizing settings to no avail, as well as all manner of padding/margin I could think of.
JSFiddle: https://jsfiddle.net/2v94yg2s/
HTML
<div class="container-fluid">
<div class="grid-data row">
<div class="col-md-4"><div></div></div>
<div class="col-md-4"><div></div></div>
<div class="col-md-4"><div></div></div>
<div class="col-md-4"><div></div></div>
<div class="col-md-4"><div></div></div>
<div class="col-md-4"><div></div></div>
<div class="col-md-4"><div></div></div>
</div>
</div>
CSS
.grid-data {
padding: 15px;
}
.grid-data > div {
padding: 15px;
height: 50px;
border: 1px solid blue;
background-color: red;
}
.grid-data > div > div {
background-color: white;
height: 100%;
width: 100%;
}
What you basically want is change the grid's "gutter".
If you want this to change globally in your website, the easy solution is to change the #grid-gutter-width variable in Bootstrap's "variables.less" file and rebuild your CSS.
If you want this for one specific feature, I'd recommend not using your grid for this. Generating an alternate grid with increased gutter is probably a bit of overkill, so you could roll your own CSS. Flexbox can be very useful and successful if you're not trying to mix it in the Bootstrap grid.
Ended up wrapping the repeat's contents inside another div, and only keeping the padding on the outer.
Related
I have this Bootstrap column structure:
.container>.row>.col-md-6*2
Problem is, that i want those two columns to have white backgrounds, but the background goes 15 pixels left and right OVER container and row.
Here is the image what I want to achieve:
Where the red rectnagles are, i want to have white background.
Here is also JsFiddle: http://jsfiddle.net/tmdnd9g5/
You can either create a custom class and apply it to those elements and set
{margin:0;}
or else apply a custom class to the .row element and set the background to white
Usually what I do is make a custom class and just add it to the element:
.col-no-pad {
padding-left: 0px;
padding-right: 0px;
}
Then add to the element's class attribute:
<div class="col-md-6 col-no-pad">
Stuff
</div>
Just apply the background to the row instead.
.row {
background-color:#fff;
margin-bottom: 100px;
}
http://jsfiddle.net/uu38zjct/
I'm trying to stick to the Bootstrap design paradigm of container > row > column, but I'm admittedly new to this and curious about something.
If I'm only putting content in the columns, as I believe I'm supposed to do, then Bootstrap's CSS puts a 15px gutter at the left and right edges of the page (I know it also puts them between disparate columns.) For design aesthetics I'd like to put a border above my content, and I'd like to do so without having it run into the gutter space.
Plunk included. As you can see, When I try to style the same element containing the content, it results in the border-top attribute (blue and green colored in my example) running into both gutters. When I create a new element above the content and attribute it with margin-left, margin-right values, that seems to work for the left edge of the border but not for the right one (orange color in my example). I just want the border to line up with my text.
What is the best way to accomplish this? I could change the margins or padding for the element itself but then I feel like I'm messing with Bootstrap's plumbing.
Please check this plunk. I've wrapped the content inside <div class="col-xs-8 opportunity-results"> with a <p> tag and then applied a border-top to that <p> tag. Moreover, I've assigned the property of display: block to the <a> tag inside <div class="col-xs-4 new-search clear-all"> and then applied a border-top to that <a> tag.
If you want to have the border-top only above the text then please check this plunk.
UPDATE:
To make both the blue and the green border-top to touch, you can use the :after psuedo selector on .opportunity-results like this:
.opportunity-results:after {
position: absolute;
content: '';
border-top: 1px solid blue;
width: 100%;
height: 2px;
left: 15px;
top: 0px;
}
Here's the plunk for it.
I'm trying to position some elements within a div.
Bootstrap fiddle (upon click red icon)
Desired end result
You may see some of the things I have attempted in the Bootply link. Normally for this situation I would split the image and text elements into seperate Div's and try to set them as display:inline-block.
This doesn't seem to be working, possibly because I'm using bootstrap, which has some default styling which applies to all Div's. Alternatively it may not be working because I'm a rank amateur in CSS.
You can check my solution Bootstrap fiddle
Just added the class pull-left by the Image from Bootstrap and changed the css from .notification_msg.
<img class="notification_img pull-left" src="http://placehold.it/60x60">
.notification_msg {
padding-bottom: 30px;
border-bottom: 1px solid #D3D3D3;
}.
God Another Question regarding css the test site again was http://testpress.dramend.com/amend-2/, I currently have this main content as a fullwidth with white background:
But what I want to achieve was this kind of boxed layout with the same white background but it needs to be boxed like this sample:
I'm using wordpress optimized press latest versiom, it doesnt have any options of changing a section to boxed or fullwidth, There's an option to changed the background to an image but it would look like this once I've set it to the my background image:
Can I achieved the boxed layout on the second image just using plain css for the main content background?
HTML
//main container
<div style="background:#ffffff; class="row one-column cf ui-sortable" id="le_body_row_4" >
<div class="fixed-width">
<div class="one-column column cols" id="le_body_row_4_col_1">
// image html comes here
.. some more html
</div>
</div>
</div>
Thanks
You can do it through css but the problem is whatever module you are using is adding inline style to it,for example
your container with class row one-column cf ui-sortable and id le_body_row_4 has inline style like this
background:#ffffff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff),
Inline style is given preference over css file styles, if you can remove the inline style and add css to these classes one-column column cols
.one-column .column cols { background: #fff }
It will solve your problem
First of all you are using table so by default, table will take entire horizontal space, so make your container a fixed width and assign margin: auto; to that
.container {
margin: auto;
overflow: hidden;
padding: 0;
position: relative;
width: 1000px;
}
and than use background-color: #fff; on div having id of #le_body_row_4
I have used two div tags in my blog to wrap programming codes. The first one is used to set outline box with fixed width with the following CSS class:
.outlinebox {
width: 435px;
border-width: 1px; /* sets border width on all sides */
border-style: solid;
border-color: #666666;
padding: 5px
}
The second div is used as inner box to set nowrap for codes with the class:
.nowrappercodesinner {
width: auto;
padding: 5px;
overflow: auto;
white-space:nowrap;
}
I use those div tags for my codes in my blog. They work fine until I tried to add third div as inner area with a specific background colour. For example:
<div class="outlinebox">
<div class="nowrappercodesinner">
<div class style=""background-color:#cccccc;">
...
</div>
</div>
The problem is that the background colour does not extend to the right when I move the horizontal scroll bar to the right. I am not sure if there is any way that the inner background colour will fill no matter where the scroll bar is moved.
Here I have one example in my recent blog: Zip Files with PowerShell Script. You can see the problem in the third code block.
overflow: auto;
in the innermost div might help. At least it had the desired effect when I added the property in Firebug. I find it strange, still, because I thought auto is supposed to be the default setting.
EDIT: Default value for overflow seems to be visible.
Perhaps I'm missing something, but why do you need the third div? Couldn't you just put the background color on the second div? I tried this on your blog in webkit's inspector and it displayed just fine.
<div class="outlinebox">
<div class="nowrappercodesinner" style="background-color:#cccccc;"></div>
</div>