I have been searching for ways to center a container in bootstrap and reduce gutter width but haven't been able to find a solution. I have a grid of images (2 rows, 3 columns) and I want to be able to reduce the width of the gutters between columns and add a horizontal gutter between the two rows. I would like to be able to center the grid.
<body>
<div class="container" width="400px" >
<div class='row'>
<div class="col-md-2">
<img class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg"/ width= '100px'>
</div>
<div class="col-md-2">
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" />
</div>
<div class="col-md-2">
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" />
</div>
</div>
<div class='row'>
<div class="col-md-2">
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" />
</div>
<div class="col-md-2">
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" />
</div>
<div class="col-md-2">
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" />
</div>
</div>
</div>
Bootstrap has an offset that can be defined for each col.
You can wrap each row in a col-md-6 and give it an offset of 3.
Bootstrap does their grid with width percentages. So if your column is 6 wide, it will be 50% wide and a margin of 25% on each side will center the column.
<div class='row'>
<div class="col-md-6 col-md-offset-3">
<div class="col-md-2">
<img class='img-responsive' class="thumbnail"
src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" width='100px'>
</div>
<div class="col-md-2">
<img width='100px' class='img-responsive' class="thumbnail"
src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg"/>
</div>
<div class="col-md-2">
<img width='100px' class='img-responsive' class="thumbnail"
src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg"/>
</div>
</div>
</div>
I recommend making a simple class to use where you need row padding.
.row-padded
{
margin-top:20px;
}
Same for removing spacing between columns.
.column-nospace
{
padding: 0 !important;
margin: 0 !important;
}
There will likely be times when you need Bootstrap to function as intended out of the box, so I recommend these over editing the core Bootstrap files.
Here is a fiddle that shows what you want (I think). https://jsfiddle.net/Gt25L/583/
Related
I use Polo - Responsive Multi-Purpose HTML5 Template.
I can't center my object
I did try many solutions, and nothing work for me still on left side.
See screenshot
<!--Single image lightbox -->
<div class="hr-title hr-long center"><abbr>Single image lightbox</abbr> </div>
<div class="row col-no-margin">
<div class="col-md-4">
<div class="grid-item">
<div class="grid-item-wrap">
<div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/300x200" /> </div>
<div class="grid-description">
<a title="Paper Pouch!" data-lightbox="image" href="https://via.placeholder.com/300x200" class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
<!--Single image lightbox -->
<hr class="space">
</div>
Add below CSS to center align the image
img {
margin-left: 50%;
transform: translateX(-50%);
}
<!--Single image lightbox -->
<div class="hr-title hr-long center"><abbr>Single image lightbox</abbr> </div>
<div class="row col-no-margin">
<div class="col-md-4">
<div class="grid-item">
<div class="grid-item-wrap">
<div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/600x400" /> </div>
<div class="grid-description">
<a title="Paper Pouch!" data-lightbox="image" href="images/mockup/1.jpg" class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
</div>
<!--Single image lightbox -->
<hr class="space">
This is not the only solution, this is a suggestion :)
You can just use class offset-md-4 combined with text-center and it should work.
Also think about mobile. I have added offset-2 and col-8 to make sure it looks good on small screen too.
img {
max-width: 100%;
margin: auto;
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="hr-title hr-long center">
<abbr>Single image lightbox</abbr>
</div>
<div class="container">
<div class="row col-no-margin">
<div class="offset-2 col-8 offset-md-4 col-md-4 text-center">
<div class="grid-item">
<div class="grid-item-wrap">
<div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/300x200" /></div>
<div class="grid-description">
<a title="Paper Pouch!" data-lightbox="image" href="https://via.placeholder.com/300x200" class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Single image lightbox -->
<hr class="space">
Instead of
<div class="col-md-4">
Do the following:
<div class="col-md-12 text-center">
.text-center is the bootstrap class which will center the image with respect to the column
.col-md-12 will imply there is only 1 column in the entire row
I am designing the asp.net bootstrap form. I have one div in it.
Code:
<div id="gallery">
<a href="aboutus.aspx">
<img src="images/layout/exportsatdubai.jpg" class="img-responsive" width="900" title="" alt="" rel="a" />
</a>
<a href="http://expogr.com/" target="_blank">
<img src="images/layout/777x282-africa-1.jpg" class="img-responsive" width="900" title="" alt="" rel="a" />
</a>
<a href="addlisting.aspx">
<img src="images/layout/becomeAMember.jpg" class="img-responsive" width="900" title="" alt="" rel="a" />
</a><a href="dubaiexhibitions.aspx">
<img src="images/layout/dubaiexportersexhibitions.jpg" class="img-responsive" width="1000" title="" alt=""
rel="a" />
</a>
</div>
Css:
#gallery
{
position: relative;
height: 282px;
}
I wanted to make this div responsive using Bootstrap grid system. I am confused with div ie. How to apply grid system on div?
<div class="row">
<div class="col-sm-12">
<div class="gallery">
------contents------
</div>
</div>
</div>
Is it like this? I am new to Bootstrap. I just wanted to know how to apply grid system to div.
You can use the bootstrap grid like this.
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="aboutus.aspx">
<img src="images/layout/exportsatdubai.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="http://expogr.com/" target="_blank">
<img src="images/layout/777x282-africa-1.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="addlisting.aspx">
<img src="images/layout/becomeAMember.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="dubaiexhibitions.aspx">
<img src="images/layout/dubaiexportersexhibitions.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
</div>
</div>
You can follow this link for further details. Bootstrap Grid
A general way to use grid system is
<div class="container">
<div class="row">
<div class="col-sm-3">Content1</div>
<div class="col-sm-3">Content2</div>
<div class="col-sm-3">Content3</div>
<div class="col-sm-3">Content4</div>
</div>
</div>
Every column will have equal width and it will act responsive. You don't need to set height or width of divs inside these columns unless you intentionally want it. If you can provide more details what exactly do you want , i can try to help more.
you can use the grid system of 12 spans and as many rows as you want as you have different spanning of images for different rows like this:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12"></div>
<a href="aboutus.aspx">
<img src="images/layout/exportsatdubai.jpg" class="img-responsive" alt=""/>
</a>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">...</div>
<div class="col-xs-6 col-md-6">...</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">...</div>
<div class="col-xs-6 col-md-6">.....</div>
</div>
.....
.....
and so on
</div>
I am using bootstrap 4 alpha 6 and noticed a strange behavior when using a grid inside the body of a card without card-block.
<div class="container">
<h5>
The building block of a card is the .card-block. Use it whenever you need a padded section within a card.
</h5>
<h4>
row inside card "body" with class card-block
</h4>
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-block">
<div class="row">
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<h4>
row inside card "body" without class card-block
</h4>
<div class="card">
<div class="card-header">
Featured
</div>
<div class="foo">
<div class="row">
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
</div>
</div>
</div>
</div>
I don't want to use padding for the body of my card
The building block of a card is the .card-block. Use it whenever you need a padded section within a card.
but my grid comes out of the body of the card.
Is a desired behavior or is a bug to fix?
Thank you
JSFiddle (open full view)
It is the desired behavior of the grid system. The .row has a negative margin to counteract the padding of grid columns, so that the leftmost and rightmost columns have proper alignment with the edge of the the viewport (or the edge of the .row's container). Also, while the negative margin is there, the content of each grid column is still within the card because of the padding in each column.
Normally, the .row is placed inside a .container or .container-fluid that has 15px padding to counteract the negative margin. .card-block does have padding, but it's not 15px which is why the .card-block does not perfectly align the card's grid content to the edge of your card.
So, I'm not sure what you're trying to achieve, but there are 2 other ways you could use the grid inside the card. One way, is to use a .container-fluid so that the outer grid columns align perfectly with the edge of the card...
<div class="card">
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
..
</div>
<div class="col-md-2">
..
</div>
..
</div>
</div>
</div>
Another is to use a gutterless row (.no-gutters). This would remove the negative margin from the row, and padding from all of the columns. The content of each column then takes the entire width of the column.
<div class="card">
<div class="row no-gutters">
<div class="col-md-2">
..
</div>
<div class="col-md-2">
..
</div>
..
</div>
</div>
http://www.codeply.com/go/vE2EdNPQwV
I have the following bootstrap code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2 col-sm-2">
<div style="width: 75px; background-color: #ccc">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
On tablets and desktops, this code looks good. However, on smaller devices, xs, the right content flows into the image. I am trying to make the text just wrap on the right and not collide with the image.
I have a fiddle here so you can see what I'm talking about. If you open the fiddle and resize the browser small enough, you'll see the right text overlap onto the image. How can I prevent this?
Try this.
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 col-md-2 col-sm-2">
<div style="width: 75px; background-color: #ccc">
<img class="img-responsive" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-9 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
It is because of the width set.
Try this.
JSFiddle
HTML
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2 col-sm-2">
<div style="background-color: #ccc">
<img class="test-image" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
CSS
.test-image{
width:100%;
height:auto;
min-width:25px;
}
Easiest way I know is to apply a direct width to element. You could theoretically alter the bootstrap 3 SCSS or LESS (whichever you use) and add in a special column class, but this is the most direct method.
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div style="width:75px" class="col-xs-2">
<div style="width: 75px; background-color: #ccc">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
It is becaue of the width of the col-xs-2.You can chage that.Or try an alternative solution like this
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div style="width: 75px; background-color: #ccc;display:table-cell;">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
<div class=" " style="display:table-cell;vertical-align:middle;">
Right content
</div>
</div></div></div>
Or with css flexboxes like
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" style="display:flex">
<div style="width: 75px; background-color: #ccc;flex:1;">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
<div class=" " style="flex:1;vertical-align:middle;">
Right content
</div></div></div></div>
I have 3 images within a row. Between each column, i'd like to add an arrow pointing to the next image.
How can I do this, while keep the existing images centered (so the middle one is in the middle of the page), and so it degrades nicely on smaller screens (disappears for instance)?
html:
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="col-sm-12" style="text-align: center;">EASY TO USE</h1>
<hr>
</div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-3">
<img class="img" src="../assets/img/indevice/step1htc.mini.24.png" height="350px" width="240px" alt="">
</div>
<div class="img col-sm-1"><img class="img" src="../assets/img/arrow.png" alt=""></div>
<div class="col-sm-3">
<img class="img" src="../assets/img/indevice/step2htc.mini.24.png" height="350px" width="240px" alt="">
</div>
<div class="img col-sm-1"><img class="img" src="../assets//img/arrow.png" alt=""></div>
<div class="col-sm-3">
<img class="img" src="../assets/img/indevice/step3htc.mini.24.png" height="350px" width="240px" alt="">
</div>
</div>
</div>
</body>
</html>
EDIT: For clarification, I want to add arrows between the existing images in the html code above. The html/css above is already centered. Howver, i'd like to add 2 arrows between the 3 existing images.
EDIT: Please see this image to understand what I mean: http://imgur.com/YT2hnw4
EDIT: Changed html to show a full example, including css call.
Here you go
<div class="container">
<div class="row">
<h1 class="centered" style="text-align: center;">EASY TO USE</h1>
<hr>
<div class="col-md-3" style="margin-left:4.17%;">
<img class="img" src="image" height="350px" width="240px" alt="">
</div>
<div class="img col-md-1">
<img class="img" src="../assets/img/arrow.png" alt="">
</div>
<div class="col-md-3">
<img class="img" src="image" height="350px" width="240px" alt="">
</div>
<div class="img col-md-1">
<img class="img" src="../assets//img/arrow.png" alt="">
</div>
<div class="col-md-3">
<img class="img" src="image" height="350px" width="240px" alt="">
</div>
</div>
</div>
All i did is removed the extra col-md-1 class and instead added the margin of the same equivalance to the 1st element so that it stay in the center.