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
Related
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.
Is it possible to remove the padding from one particular grid within Boostrap 3 -
I need to layout images responsively but the design requires no gaps between columns.
Bootstrap 3 introduced row-no-gutters in v3.4.0
https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters
Yep you can do it by creating a custom style sheet and adding a additional css selector to the col class. [http://www.bootply.com/FtnGzu0dea][1]
/* CSS used here will be applied after bootstrap.css */
.thumbnails {
padding: 0;
}
<div class="wrapper">
<div class="container">
<div class="col-md-3 thumbnails">
<div class="thumbnail"><img src="http://placehold.it/350x150"></div>
</div>
<div class="col-md-3 thumbnails">
<div class="thumbnail"><img src="http://placehold.it/350x150"></div>
</div>
<div class="col-md-3 thumbnails">
<div class="thumbnail"><img src="http://placehold.it/350x150"></div>
</div>
<div class="col-md-3 thumbnails">
<div class="thumbnail"><img src="http://placehold.it/350x150"></div>
</div>
</div>
</div>
[1]: http://www.bootp
ly.com/FtnGzu0dea
My suggestion is to add a class for removing the padding at a certain media query width. Here is a test case that uses a header image that should respect the padding at all but the small size. At that point it has no padding and fits the full width of the viewport. I highly recommend using #screen-xs-max if you are compiling LESS source files. It avoids the one pixel jump for media queries that use max-width.
http://jsfiddle.net/jmarikle/htmn5Lov/
CSS
#media (max-width: 767px) { /* replaced with #screen-xs-max if using LESS */
.sm-no-padding [class*=col-] {
padding: 0;
}
}
HTML
<div class="row sm-no-padding">
<div class="col-sm-12">
<img class="img-responsive" src="//placehold.it/2000x1000"/>
Image and/or content in a row where we remove the padding for small screens
</div>
</div>
If you want more granular control with columns rather than at the row level, just apply the class to the columns and change your selector to [class*=col-].sm-no-padding
You can also create a new CSS class and add the following code into your stylesheet.
Custom CSS:
.no-padding > [class*='col-'] {
padding-right:0;
padding-left:0;
}
new CSS to use into your HTML div
.no-padding
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 may sound stupid, but this is all new to me.
I'm guessing I have overlooked something.I have no ideea how to fill the white spaces between my columns(end-to-end)
This is my code:
<div class="container" id="cfoot">
<div class="col-lg-3">
<h3>despre noi</h3>
<p>Pensiunea Delia</p>
<p>Echipa Noastra</p>
</div>
<div class="col-lg-3">
<h3>link-uri utile</h3>
<p>Intrebari frecvente</p>
<p>Serviciile noastre</p>
<p>Contact</p>
</div>
<div class="col-lg-3">
<h3>ultimele postari</h3>
<p>Titlul postare blog vine aici</p>
<p>Titlul postare blog vine aici</p>
<p>Titlul postare blog vine aici</p>
</div>
<div class="col-lg-3">
<img src="imgs/logodelia.png" alt="logobottom">
<p># 2014 Pensiunea Delia. Designed by Kinkara Web</p>
</div>
CSS:
#cfoot.container{
background-color:#f4f4f4;
color:#6c6c6c;
background-image:none;
}
Can anyone help please?
When I use developer tools to look at the markup, I'm seeing this applied by the browser:
body {
display: block;
margin: 8px;
}
If you simply add
body {
margin: 0;
}
.container {
margin: 10px; // adjust as needed
}
I think you'll be on your way.
note: you're also missing the Bootstrap row
<div class="row">
fiddle: http://jsfiddle.net/XEF8v/1/
I'm not quite clear on your question. I think you are asking us how you can use bootstrap to achieve the layout of four columns, like in the second image that you have posted.
You can get most of the way there by using Bootstraps built-in grid system.
Overview of Bootstrap's grid system: http://getbootstrap.com/css/#grid
<div class="container-fluid">
<div class="row">
<div class="col-md-1" id="col-1"><!-- empty space on left --></div>
<div class="col-md-2" id="col-2"><!-- despre noi column --></div>
<div class="col-md-2" id="col-3"><!-- link-uri-title column --></div>
<div class="col-md-2" id="col-4"><!-- ultimele column --></div>
<div class="col-md-4" id="col-5"><!-- delea logo column --></div>
<div class="col-md-1" id="col-6"><!-- empty space on right --></div>
</div>
</div>
The col-md-<#> class determines the horizontal width of a column. Per Bootstrap's documentation, these numbers should add up to 12.
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