I'm confused at a basic problem, and I'm not sure how to go about this --
Take a look at www.hncharity.com
If you look at the content div, it's slightly off center (It becomes more pronounced as you go into mobile view).
The div is structured like so:
<div class="container">
<div class="span10 offset1">
<div class="content">
....
</div>
</div>
</div>
The .content class has a white background, adds padding, and a margin all around the span10 offset1 div, to make the width appear smaller.
This is the css for content
margin:40px;
padding:40px;
position:relative;
margin-top:-200px;
z-index:1201;
background-color:white;
As you can see, the content does not appear to be centered. What would I do to fix this?
you missed to add a container with class row before span and after container.
Correct way:
<div class="container">
<div class="row">
<div class="span10 offset1">
<div class="content">
....
</div>
</div>
</div>
</div>
Related
I have a complex Bootstrap-4 grid-layout. Now, suddenly inside a column, I need to make the background (not the content!) reach from left of the browser-window to the right of the browser-window, the whole width. Is there any way this can be done?
<div class="container">
<div class="row">
<div class="col">
<h2 class="font-weight-light">Hello!</h2>
<p>
This background should stay white.
</p>
</div>
</div>
<div class="row mybackground">
<div class="col">
The red background should fill ALL of the browser-width from left to right, but keep the area above and below with white background.
</div>
</div>
</div>
https://jsfiddle.net/enu2vxdw/
If you look at the fiddle, the background of < div class="mybackground" > should reach from left to right (no white paddings left and right), but the content of it should stay as it is.
Any idea how to do this with the least amount of changes (because unfortunately there are a lot places in the code where this needs to be done, so a simple css-class would be awesome).
Instead of adding rows inside a container, you should now have sections with containers.
An example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<section>
<div class="container">
<div class="row">
<div class="col">
<h2 class="font-weight-light">Hello!</h2>
<p>This background should stay white.</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col">
<h2 class="font-weight-light">Hello!</h2>
<p>This background should stay white.</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row bg-danger text-white">
<!--div class="col"-->
<div class="container">
<div class="row">
<div class="col">
<p class="mt-3">The red background should fill ALL of the browser-width from left to right, but keep the area above and below with white background.</p>
</div>
</div>
</div>
<!--/div-->
</div>
</div>
</section>
The container-fluid can stretch full width. To align the content you'll have to introduce a container again.
You'll end up with quite a lot of nesting which doesn't look too pretty but I don't know another Bootstrap way around this.
This result will be fully responsive regarding the spacing.
I have a problem in bootstrap css about container and fluid
This is my code:
<div class="container">
<div class="row">
<div class="col-sm-6" style="border:3px solid black"><- this div still here</div>
<div class="col-sm-6" style="border:3px solid red">this div full to right -></div>
</div>
</div>
<br/>
<br/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" style="border:3px solid black">text here</div>
<div class="col-sm-6" style="border:3px solid red">text here</div>
</div>
I make it on JSFiddle too, please look it for detail:
JSFiddle
my problem is, how to make my col-sm-6 inside container like col-sm-6 inside container-fluid. Or anyone have other way to fix it?
Maybe this post can help you: override bootstrap container width
The idea is basically that you put negative margin on your div.
I have some dynamically generated charts that each get placed in a container, floated left:
<div class="container">
<div class="chart"> ... </div>
</div>
<div class="container">
<div class="chart"> ... </div>
</div>
<div class="container">
<div class="chart"> ... </div>
</div>
The above, for example, produces
I wanted to add captions beneath each chart, so I added sibling <div>s, like this:
<div class="container">
<div class="chart"> ... </div>
<div class="caption"> ... </div>
</div>
<div class="container">
<div class="chart"> ... </div>
<div class="caption"> ... </div>
</div>
<div class="container">
<div class="chart"> ... </div>
<div class="caption"> ... </div>
</div>
This didn't work because the parent's width, not having been specified, would grow with the caption text:
So, how can I constrain the caption <div> width to the chart <div> width?
The chart is generated by an external jQuery library, and although I could use jQuery to obtain the generated chart's width and set the caption <div>'s width to that value, I'd prefer a CSS-only solution. I'd also like to avoid injecting the caption <div> into the chart <div> (though, I'm not sure how that'd help anyway).
The result I'm looking for looks more like the following (example faked via forced linebreaks):
Thanks in advance for any advice.
you can do this by applying absolute position without any positional attributes (top, bottom, left, right)
Tested only on Chrome, FF, and IE10
.container {
position: relative;
}
.caption {
position: absolute;
}
http://jsfiddle.net/YzQcs/
<div style="float:left">
<div class="designerWrapper">
<div class="pageBox">
content
</div>
</div>
</div>
<div style="float:left; margin-left:10px;">
content 2
</div>
<div style="clear:both"></div>
<br /><br />
How do I make the div that holds content 2 100% width? If I set it to 100% width it is too wide, at the moment it expands with it's contents length.
you sould use the table stuff
<div id="outer1">
<div id="outer2">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
css:
#outer1 {display:table;width:600px;height:30px;}
#outer2 {display:table-row;width:600px;height:30px;}
#left {display:table-cell; width:15px;}
#right {display:table-cell; width:auto;}
important there is no floating! because the table display floats the cells automatically.
i didnt test the code hope works.
You can set min-width depend upon your requirement.
later on it will expand with its content
<div style="float:left; margin-left:10px;min-width:110px;">
content 2
</div>
I'm having problems getting several divs to function as two columns. In the code below I want the container (or content) and right to act as two columns.
Both need borders (non-image) where the border in between both should be the same visual width as the outer borders.
Both columns need to have the same height between top and bottom
right should be fixed size
Is this even possible without changing the HTML?
Take the following HTML:
<body>
<div id="top"></div>
<div id="container">
<div id="content">
</div>
</div>
<div id="right">
</div>
<div id="bottom"></div>
</body>
This will do what you want.
Markup
<body>
<div id="top">top</div>
<div id="container">
<div id="content">
content
</div>
<div id="right">
right
</div>
<br style="clear:both" />
</div>
<div id="bottom">bottom</div>
</body>
CSS
#container {border:1px solid blue;}
#content, #right {float:left;}
#content {width:400px; border-right:1px solid blue;}
Doesnt anser your issue fully, as your question is a tad lightweight, but you can position divs however you want. Fiddle here: http://www.jsfiddle.net/ozzy/F3K8k/
Have updated fiddle: http://www.jsfiddle.net/ozzy/F3K8k/1/