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.
Related
I'm trying to make a copy of a website as my first CSS/HTML exercise.
I can't figure out how to make the menu list so it has its background filling the box (extending until the right border).
Picture of what I have now (right side of the picture, red lines show where the background should go) and what I want to get (left side).
My code.
I've tried so far to achieve it e.g. with 'width' and 'display' parameters, but e.g. display: block; remove the lines between text. I'm out of ideas.
display: block;
width: 100%;
margin-bottom: 2px;
to the #menu
spans are inline elements so they cannot have width or height. You should put a background-color to your li elements instead of your spans.
.menu{
background-color: grey; //Change it to your custom colour.
}
Also, you cannot have more than one element with the same ID. You have to put them as a class.
Updated JSFiddle.
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.
I am currently working on this website: http://mdftanzania.com. I am using Wordpress and headway101. I want to have a full width green background color that applies to the begin part of the page: About Us and Services. I add a div class to the part of the page where the green background has to be. I tried to style the div class to a full width green background, this didn't work out and at the moment only a part is styled now (see the website: http://mdftanzania.com).
I understand that there is another solutions, that is creating a container or widget above the container for the content, where I place the first part of the page text in. The problem with this is that it is confusing for my client where to edit the text in the page. The simplicity of Wordpress goes basically away then. Because of that, I am looking for a solution with CSS styling, so the client is only dealing with the 's.
Does anybody has a solution for this?
Since you have predetermined a padding to the content block, it is obviously affecting all the child elements that are contained in it, including the div with green background, which means that you should either remove that padding and apply it only to specific elements, or apply this simple CSS workaround to your div:
{
margin: 0 -25px;
padding: 0 25px;
}
This makes it, in your words, "full width" and applies a padding to its content.
You have this rule set in your css:
.block-type-content {
padding-left: 25px;
padding-right: 25px;
padding-top: 120px;
}
So children of this container, even though they may have a width of 100%, have to obey this padding of their parent. That's why you don't get a full width green bar. You might try negative margin-left and right to expand your green bar:
.color {
margin: 0 -25px;
padding: 0 25px;
}
At least in Firefox/Mac, this solves your issue.
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;
}.
I'm designing a page built on Bootstrap 3, and I would like to try and recreate the following design:
I have paragraphs that I have put into a container, so that they stay centred on the page as it is resized. However, I would like to have certain rows have a coloured background that extends off to the sides as far as they go, as shown. I'm not sure if this is possible?
One method I have tried is switching to a container-fluid class for those rows, which goes to the edge of the screen. This sort of works, but I'm not sure if it is then possible to have the text inside stay inline with the other paragraphs as the page is resized? Really, the text should always have the consistent margins on the left and right sides for all of the blocks of text.
I don't think I would need content in the areas in the margin, so if a solution just involved using a standard container to hold the content, and another method to extend the background off to the side, that may work.
Here is a JSFiddle to start off with, including one of the orange boxes in a container-fluid, to demo that approach.
I'm not sure if this is the 'best' solution, but it is a solution nonetheless.
Create a pseudo element for each coloured box (:before)
Absolutely position that (relative to the coloured box - Bootstrap already sets position: relative on col-*-*).
Set top and bottom values to 0 so it's always the correct height
Set background colour to match box
Give it a wide width to ensure it always covers the gutter (sides of .container) on wide screens
For the left sided box, set left: -[width of psuedo element], for right sided box set right: -[width of pseudo element
Finally, you'll need a page container set to overflow: hidden.
HTML
<div id="page">
<div class="container">
...
</div>
</div>
CSS
#page {
overflow: hidden;
}
.box-left:before,
.box-right:before {
content: '';
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
.box-left:before {
left: -999em;
background: orange;
}
.box-right:before {
right: -999em;
background: lightblue;
}
DEMO