I am working on a mini project to recreate a website using bootstrap 4. I am on a part where I need to have three images in a grid format two on the top and one on the bottom. The top two should be even by height (not width the image on the right is larger) like the image below:
Notice how on the bottom (they are even at the top) they are perfectly even.
Now here is how mine looks:
See how the image on the left looks it is slightly higher then the one on the right.
Here is my code for that portion:
<div class="row justify-content-center">
<div class="col-md-4">
<img src="assets/home_seasonal_1.jpg" class="img-fluid" alt="Responsive image" >
</div>
<div class="col-md-6">
<img src="assets/home_seasonal_2.jpg" class="img-fluid" alt="Responsive image">
</div>
</div>
<br>
<div class="row justify-content-center">
<div class="col-md-10">
<img src="assets/home_seasonal_3.jpg" class="img-fluid" alt="Responsive image">
</div>
</div>
I have tried different variations of the columns and nothing has worked so far. The goal is to do this without modifying the css and only using bootstrap.
Here is the bootstrap version I am using:
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
I just need some guidance on how I can make this happen.
Here are the images:
If you look at .img-fluid, it sets the max width to 100% and the height auto. That means, if the box that contains the image is narrow, the image might be scaled down and so is the height.
Also I realize, from your expected image, the top 2 pictures are shown from the bottom up while the last 1 is shown from top down.
Those points make me want to use those images as the background of those columns instead.
Structure
<div class="container">
<div class="row justify-content-center">
<!-- assets/home_seasonal_1.jpg -->
<div class="col-md-4" style="background: url('https://i.stack.imgur.com/A5PIq.jpg') center bottom /cover no-repeat"></div>
<!-- assets/home_seasonal_2.jpg -->
<div class="col-md-6" style="background: url('https://i.stack.imgur.com/zVUvf.jpg') center bottom/cover no-repeat"></div>
</div>
<div class="row justify-content-center">
<!-- assets/home_seasonal_3.jpg -->
<div class="col-md-10" style="background: url('https://i.stack.imgur.com/xhMX6.jpg') center top/cover no-repeat"></div>
</div>
</div>
Style
I am being lazy here to style them this way, but you can do inline css to set different styles for those columns. And I used white borders here to do the trick.
.row {
height: 12rem;
}
[class*="col-md"] {
border: 2px solid #fff;
}
Result
LOL it almost looks the same as your expected outcome!
fiddle: http://jsfiddle.net/aq9Laaew/144953/
I'm building a layout where many rows will span the entire containing column. I'm wondering if I should nest a col-12 inside each of these rows and put content in there or if I should just put the content inside the row?
So, is this OK:
<div class="row">
<div class="my-lazy-content"></div>
</div>
Or, is it better to put a column in there too:
<div class="row">
<div class="col-xs-12">
<div class="my-verbose-content></div>
</div>
</div>
If you want the content to span the entire column, you should add in the col-xs-12 wrapping div around your content. This ensures that the content has that 15px of padding to the left and right and doesn't simply "hard-align" to the edges of the row element since the row class has negative -15px of margin to compensate for the container's 15px padding?
Is it absolutely necessary to have the rows? If the content simply spans the entire width of the container, why not just nest your content directly within the container as follows:
<div class="container">
<div class="content-wrapper">
</div>
</div>
I have bootstrap container (div class="container") and there are two rows (div class="row").
But between those rows I need one full width horizontal line. Full width - I mean that it should be full width - outside container. This line is just for design issues, it would have background color and that is it. I do not know how to create it.
Divide your content into 2:
<div class="container">
<div class="row">
stuff here
</div>
</div>
<div class="line"></div>
<div class="container">
<div class="row">
stuff here
</div>
</div>
Please note I have inherited an project and MUST use Bootstrap 2.
I have the following code that displays the site logo in the top-left of the page, for some reason this image is being "pushed" to the right due to the gutter when using the grid system - how do I remove this gap for this single row?
<div class="row">
<div class="span12">
<img src="/img/logo.png">
</div>
</div><!-- end row -->
Any advice would be appreciated and please note this is using Bootstrap 2 rather than the newer improved Bootstrap 3.
Add a new class, and set to margin 0
.nogutter {
margin: 0px !important;
}
<div class="row nogutter">
<div class="span12">
<img src="/img/logo.png">
</div>
</div>
<!-- end row -->
How can I solve this problem?
When you add borders to a div, the div is not centered and
the span12 class is not centered.
I would like to center the div with the borders
<div class="row" >
<div class="span12" style="border: 2px solid black">
<div class="row">
<div class="span4">
1
</div>
<div class="span4">
2
</div>
<div class="span4">
3
</div>
</div>
</div>
</div>
Unfortunately, that's what borders do, they're counted as part of the space an element takes up. Allow me to introduce border's less commonly known cousin: outline. It is virtually identical to border. Only difference is that it behaves more like box-shadow in that it doesn't take up space in your layout and it has to be on all 4 sides of the element.
http://codepen.io/cimmanon/pen/wyktr
.foo {
outline: 1px solid orange;
}
As of Bootstrap 3, you can use Panel classes:
<div class="panel panel-default">Surrounded by border</div>
In Bootstrap 4, you can use Border classes:
<div class="border border-secondary">Surrounded by border</div>
There's a property in CSS called box-sizing. It determines the total width of an element on your page. The default value is content-box, which doesn't include the padding, margin, or border of the element.
Hence, if you set a div to have width: 500px and 20px padding all around, it will take up 540px on your website (500 + 20 + 20).
This is what is causing your problem. Bootstrap calculates set widths for things just like the above example, and these things don't have borders. Since Bootstrap fits together like a puzzle, adding a border to one of the sides would yield a total width of 501px (continuing the above example) and break your layout.
The easiest way to fix this is to adjust your box-sizing. The value you would use is box-sizing: border-box. This includes the padding and border in your box elements. You can read more about box-sizing here.
A problem with this solution is that it only works on IE8+. Consequently, if you need deeper IE support you'll need to override the Bootstrap widths to account for your border.
To give an example of how to calculate a new width, begin by checking the width that Bootstrap sets on your element. Let's say it's a span6 and has a width of 320px (this is purely hypothetical, the actual width of your span6 will depend on your specific configuration of Bootstrap). If you wanted to add a single border on the right hand side with a 20px padding over there, you'd write this CSS in your stylesheet
.span6 {
padding-right: 20px;
border-right: 1px solid #ddd;
width: 299px;
}
where the new width is calculated by:
old width - padding - border
Depending what size you want your div to be, you could utilize Bootstrap's built-in component thumbnail class, along with (or without) the grid system to create borders around each of your div items.
These examples on Bootstrap's website demonstrates the ease-of-use and lack of need for any special additional CSS:
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
which produces the following div grid items:
or add some additional content:
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>
Button
Button
</p>
</div>
</div>
</div>
</div>
which produces the following div grid items:
What others have mentioned about border vs border box is definitely correct. You can still get this to work without having to create any custom classes though: http://jsfiddle.net/panchroma/yfzdD/
HTML
<div class="container">
<div class="row" >
<div class="span12">
<div class="row">
<div class="span4"> 1 </div>
<div class="span4"> 2 </div>
<div class="span4"> 3 </div>
</div><!-- end nested row -->
</div><!-- end span 12 -->
</div> <!-- end row -->
</div><!-- end container -->
CSS
.span12{
border:solid 2px black;
background-color:grey;
}
Good luck!
While it's probably not the correct way to do it, something that I've found to be a simple workaround is to simply use a box-shadow rather than a border... This doesn't break the grid system. For example, in your case:
HTML
<div class="container">
<div class="row" >
<div class="span12">
<div class="row">
<div class="span4">
1
</div>
<div class="span4">
2
</div>
<div class="span4">
3
</div>
</div>
</div>
</div>
</div>
CSS
.span12{
-moz-box-shadow: 0 0 2px black;
-webkit-box-shadow: 0 0 2px black;
box-shadow: 0 0 2px black;
}
Fiddle
You can't just add a border to the span because it will break the layout because of the way width is calculate: width = border + padding + width. Since the container is 940px and the span is 940px, adding 2px border (so 4px altogether) will make it look off centered. The work around is to change the width to include the 4px border (original - 4px) or have another div inside that creates the 2px border.
If you need a basic border around you just need to use bootstrap wells.
For example the code below:
<div class="well">Basic Well</div>
If you are using Bootstrap 4 and higher try this to put borders around your empty divs use border border-primary here is an example of my code:
<div class="row border border-primary">
<div class="col border border-primary">logo</div>
<div class="col border border-primary">navbar</div>
</div>
Here is the link to the border utility in Bootstrap 4:
https://getbootstrap.com/docs/4.2/utilities/borders/