I'm new in bootstrap and I don't know if it's possible to have bootstrap containers wrapped in another element, Or if that wrapper can have some width, something like this,
<div style="background:url('xycv.jpg') center top no-repeat; width:100%">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">col1</div>
<div class="col-md-6">col2</div>
</div>
</div>
</div>
<div style="background:url('bla.png') center top no-repeat; width:100%">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">col1</div>
<div class="col-md-6">col2</div>
</div>
</div>
</div>
Or what happens if wrapper will have width:950px?
.container-fluid itself behaves like your wrapper, so your wrapper is kind of obsolete. Setting the background on the .container-fluid is what I would do.
If you need to wrap some bootstrap elements in your own element, you sure can do this.
yes you can have, only in case when you are using container-fluid class.
Related
I'm using Bootstrap and I want to change first column the distance from left. This is illustrated in this picture:
My code:
<div class="container">
<div class="row">
<div class="col-sm-1">
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
</div>
<div class="col-sm-8">.col-sm-7</div>
<div class="col-sm-1">.col-sm-1</div>
</div>
</div>
I try with margin-left, padding-left, but I don't found where it's need change.
Change
<div class="container">
to
<div class="container-fluid">
Fiddle here: https://jsfiddle.net/DTcHh/23360/
The .container class adds a max width to that element, and centers it on the page. If you want col-sm-1 all the way to the left, you'll want to remove/adjust how you're using the .container class.
On top of that, .row and .col-sm-* come with some additional margin/paddings. Try using chrome inspector to look at your elements on the page and see how/why they are laid out the way they are.
I'm trying to set some divs to width: 100% on Twitter Bootstrap 3 (including no paddings or margins).
JSfiddle: http://jsfiddle.net/rq9ycjcx/
HTML:
<div class="container">
<header>
<div class="row">
<div class="col-md-2">
<img src="http://placehold.it/150x50">
</div>
<div class="col-md-10">Menu</div>
</div>
<div class="row gray">
<div class="col-md-6">
<h1>Page Title</h1>
</div>
<div class="col-md-6">
<div class="breadcrumbs">Main page > page </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/350x150" />
</div>
</div>
</header>
<footer>
<div class="row">
<div class="col-md-12">Content</div>
</div>
<div class="row dark">
<div class="col-md-3">Footer 1</div>
<div class="col-md-3">Footer 2</div>
<div class="col-md-3">Footer 3</div>
<div class="col-md-3">Footer 4</div>
</div>
</footer>
</div>
What is the right way to get image http://placehold.it/350x150 width: 100%, including no paddings or margins?
Page title and breadcrumbs height is 80px.
If I resize window to smaller screen (e.g. mobile), text Main page > page disappears (it's somewhere but not on own row).
How to fix it?
Use <div class="container-fluid">. As per Bootstrap Docs: Use .container-fluid for a full width container, spanning the entire width of your viewport.
There is 0 padding on container-fluid.
In your code you have what appears to be body content in your header and you also have a div class="container" outside of your header and footer. This is not correct, you should have your container/container-fluid inside of your body. Also for your header you should use <nav="nav navbar-nav">.
Updated Fiddle
As suggested above, you can create a helper class
.padding-0 {
padding: 0;
}
and apply it to any HTML elements for which you need a padding reset. So in your case, it would look like this:
<div class="row">
<div class="col-md-12 padding-0">
<img src="http://placehold.it/350x150" />
</div>
</div>
For the second problem, set height of .gray class to auto :
#media () {
.gray {
height: auto;
}
}
Note: You could also remove line-height: 80px, it's optional :)
http://jsfiddle.net/rq9ycjcx/8/
There is no "right" way to do that in Bootstrap 3. It means you have to reset padding for the exact column.
You can create a class such as this one:
.col-md-12.resetPadding { padding:0px }
About Main page > page disappearing, I don't see this problem on my browsers (tested on Chrome and FF), but you have line-height: 80px there and as you said your breadcrumbs div has height: 80px;, so try to reduce line-height property and see how it works.
A simple way would be to remove the <div class="col-md-12">...</div> and add your content directly inside the row tag. The row tag removes the left & right gutters, whereas the cold-md-12 essentially adds the gutters back in.
The Bootstrap 3 documentation says that for single full width items you don't need any markup, eg just wrap it in <p> tags. However this will show the 15px gutters due to the page markup. So by simply adding in the row tag and placing your content directly inside this you will get 100% width content and be compliant with the BS3 documentation.
I have a parent element that has Bootstrap 3's .row CSS class. Within this element are two child elements (each with a Bootstrap column class), one of which has a varying height depending on the data populating it. In the design I'm working with, the elements in this row need to be anchored to the bottom of the parent element.
The kicker (as the title and use of bootstrap suggests) is that this needs to be responsive. Thus absolute positioning of the child elements with bottom: 0px; is not an option.
Here's the current structure of the html:
<div class="row r4">
<div class="col-md-2">
<div class="bottom">
<div data-bind="text: description()"></div>
<span data-bind="text: metric()"></span>
</div>
</div>
<div class="col-md-8">
<div class="bottom">
<div data-bind="foreach: keyLabels()">
<div class="key-color">
<div data-bind="attr: {class: color + ' color-value'}"></div>
<div data-bind="text: label"></div>
</div>
</div>
</div>
</div>
</div>
I've done some research and haven't found a reliable method of solving this using a pure HTML/CSS solution.
I can think of a number of fairly straight-forward (albeit hacky) ways to solve this with JS, but for now I'd like to avoid that with possible.
Any ideas?
Here's a simplified version of your markup that helps more easily reproduce the issue:
<div class="row">
<div class="col-xs-2 pull-bottom"
style="height:100px;background:blue">
</div>
<div class="col-xs-8 pull-bottom"
style="height:50px;background:yellow">
</div>
</div>
So how do we vertically align each column to the bottom? See vertical-align with bootstrap 3:
.pull-bottom {
display: inline-block;
vertical-align: bottom;
float: none;
}
Working Demo in jsFiddle
I need to add space between grids, without changing .col-md-4 and .col-md-8 style
<div class="row" >
<div class="col-md-4" style="height:250px;">grid1</div>
<div class="col-md-8" style="height:250px;">grid2</div>
</div>
I'd suggest you add a new div element inside any of the .col-md-* and give it a padding (or a margin) (Because you can't edit the default Bootstrap files).
<div class="row" >
<div class="col-md-4" style="height:250px;">grid1</div>
<div class="col-md-8" style="height:250px;">
<div style="padding-left: 20px;">grid2</div> <!-- The added div -->
</div>
</div>
Another option is to create a special CSS class and apply it to the rows where you want the wider spacing..
.row.wide-gutter [class*='col-']:not(:first-child):not(:last-child) {
padding-right:20px;
padding-left:20px;
}
Demo: http://bootply.com/110509
I have the following:
<div class="container-fluid">
<div class="row-fluid">
<div class="span3"></div>
<div class="span3"></div>
<div class="span3"></div>
<div class="span3"></div>
</div>
</div>
By default, this div.span* spans the entire width of the screen, like this:
[x][x][x][x]
At a certain screen width, I want this to appear in a 2x2 grid, like this:
[x][x]
[x][x]
How do I do this?
Sorry about my earlier attempts, I did not fully understand your question:
The thing which you are trying with bootstrap is not really possible unless you go for your own #media selectors. There is a library called Neat. I think this is the example you are looking for.
EARLIER ATTEMPTS:
Try this, from here:
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<div class="row-fluid">
<div class="span6">A</div>
<div class="span6">B</div>
</div>
<div class="row-fluid">
<div class="span6">C</div>
<div class="span6">D</div>
</div>
</div>
</div>
</div>
This should give you the following result:
[A][B]
[C][D]
Well that's a lot of divs. Not really sure if this can be made lighter.
The original question appears to be for an older edition of bootstrap.
Here's what solves the issue neatly in Bootstrap 3 markup. The key element is the clearfix div that affects xs and sm viewports [typical use case]. (sm not included in example below).
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
via getbootstrap.com
Here are 2 options that are responsive without the need for media queries. Resize the windows to see how they react.
CSS Columns:
http://jsfiddle.net/88t4L/
.row-fluid {
columns: 2 8em;
}
Here, the columns must be at least 8em wide, but if there's room for all of them to appear in a row, it will do so.
http://caniuse.com/#search=columns
CSS Flexbox:
http://jsfiddle.net/88t4L/1/
.row-fluid {
display: flex;
flex-flow: row wrap;
}
.row-fluid .span3 {
flex: 1 0 8em; /* grow equally, don't shrink, preferred width of 8em */
}
http://caniuse.com/#search=flexbox