I am new to bootstrap and I'm stuck on the following problem:
In mobile, I want "big-guy" to occupy the whole width and the "small-guys" to be evenly positioned underneath it. So far so good.
The problem is: in medium displays, I want the "big-guy" to occupy 75% of the width and the small-guys should be placed on its left, stacked on top of each other.
So far, this is the code I have, I would like to keep this structure if possible.
<div class="row">
<div id="big-guy" class="col-sm-12"></div>
<div id="small-guy-1" class="col-sm-4"></div>
<div id="small-guy-2" class="col-sm-4"></div>
<div id="small-guy-3" class="col-sm-4"></div>
</div>
Image for reference:
You would use nesting and the appropriate responsive grid sizes...
<div class="row">
<div id="big-guy" class="col-sm-9 py-sm-0 py-3">
</div>
<div class="col-sm-3">
<div class="row">
<div id="small-guy-1" class="col-4 col-sm-12">
</div>
<div id="small-guy-2" class="col-4 col-sm-12 py-sm-4 py-0">
</div>
<div id="small-guy-3" class="col-4 col-sm-12">
</div>
</div>
</div>
</div>
Responsive demo
Here it is.
<div class="container">
<div class="row">
<div class="col-md-9 pt-5">
<img class="img-fluid pb-3" src="https://cdn.pixabay.com/photo/2019/12/26/11/04/new-years-day-4720210_960_720.jpg" title="" alt="">
</div>
<div class="col-md-3">
<div class="row pt-5">
<div class="col-4 col-md-12 col-sm-4">
<img class="img-fluid pb-3" src="https://cdn.pixabay.com/photo/2013/02/21/19/14/firecracker-84715_960_720.jpg" title="" alt="">
</div>
<div class="col-4 col-md-12 col-sm-4">
<img class="img-fluid pb-3" src="https://cdn.pixabay.com/photo/2013/02/21/19/14/firecracker-84715_960_720.jpg" title="" alt="">
</div>
<div class="col-4 col-md-12 col-sm-4">
<img class="img-fluid pb-3" src="https://cdn.pixabay.com/photo/2013/02/21/19/14/firecracker-84715_960_720.jpg" title="" alt="">
</div>
</div>
</div>
</div>
</div>
Related
Column not splitting properly. I need the bottom picture to go under the same picture above.
Changed col and image size
<div class=" container mx-auto mt-5 p-0">
<div class="row m-0 ">
<div class="col-4 p-0"><a href="ourstory.html"><img src="Mainimages/Ourhistory.jpg" style="width:100%"
alt="Our History"></a>
</div>
<div class="col-8 p-0">
<img src="Mainimages/Promotions.jpg" style="width:100%" alt="Promotions">
</div>
<div class="w-100"></div>
<div class="col-8 p-0">
<img src="Mainimages/Promotions.jpg" style="width:100%" alt="Promotions">
</div>
</div>
</div>
In bootstrap col-6 is synonymous to 50% and col-12 is 100%
So technically to achieve your aim you do:
|--------------------div:col-12------------------------------|
|------div:col-6---------| |----------div:col-6-------------|
|---------------------------| |----------div:row--------------|
|---------img-------------| |-div:col-12-|-|-div:col-12-|
|---------------------------| |-----img----|-|----img--------|
Try the snippet below:
.s50{
height:50%;
}
.s50 img {
width:100%;
height:100%
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mx-auto mt-5 p-0">
<div class="row m-0 ">
<div class="col-6 p-0">
<a href="ourstory.html"><img src="https://pinimg.icu/wall/0x0/los-mejores-fondos-de-pantalla-para-hombres-tumblr-wallpaper-E7f21aa5c622192c35a8e92d039623fcc.jpg?t=5cf09dc88fee5" style="width:100%"
alt="Our History"></a>
</div>
<div class="col-6 p-0">
<div class="col-12 s50 p-0">
<img src="https://hackernoon.com/hn-images/1*lduEjOI-EQltoRbmKSICeA.jpeg" alt="Promotions">
</div>
<div class="col-12 s50 p-0">
<img src="https://d3n8a8pro7vhmx.cloudfront.net/3dna/pages/46410/meta_images/original/00-featured-bs4-bootstrap.jpg?1561992643" style="" alt="Promotions">
</div>
</div>
</div>
</div>
I'm not sure If you're looking for equal half's but you have to split the right hand side column into two rows again using divs to achieve this.
<div class="row">
<div class="col-md-6">
--First left image here--
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
-- second top right image here --
</div>
</div>
<div class="row">
<div class="col-md-12">
-- third bottom right image here --
</div>
</div>
</div>
</div>
We don't have your exact images sizes, but I've tried to put dummy images just show you example, If you want your page to display in the same alignment, you have to divide the div equally which sums up. You can set and divide the divs equally and make it responsive by inserting classes col-sm and col-md.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="feature-wrapper bg-primary pt-5 pb-5 mt-5 mt-lg-0">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 text-center mb-3 mb-md-0">
<a href="ourstory.html"><img src="https://dummyimage.com/100X40/000/fff" style="width:100%"
alt="Our History"></a> </div>
<div class="col-sm-12 col-md-4 text-center text-md-left text-uppercase mb-3 mb-md-0">
<img src="https://dummyimage.com/100X50/000/fff" style="width:100%" alt="Promotions">
</div>
<div class="col-sm-12 col-md-4 text-center mb-3 mb-md-0">
<img src="https://dummyimage.com/200X60/000/fff" style="width:100%" alt="Promotions">
</div>
</div>
</div>
</div>
I am trying to build this kind i image grid using Bootstrap but I have some issue with understanding how to create the code. Here is an final example.
Here is my code until now
.border { border: 1px solid red; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
</div>
<div class="col-md-4 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="516" title="someText" alt="someText">
</div>
<div class="col-md-4 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
</div>
</div>
<div class="row">
<div class="col-md-8 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
</div>
<div class="col-md-4 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
</div>
</div>
</div><!-- container -->
What you have is a row that has three columns in it. Two of those three columns have one column that have two rows.
Here is a basic example you can build off of.
.gallery .v-spacer {
margin-top: 30px; /* Default Bootstrap gutter (10px) x 2 */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row gallery">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<img class="img-responsive" src="http://placehold.it/600x400/FC0/">
</div>
</div>
<div class="row v-spacer">
<div class="col-sm-12">
<img class="img-responsive" src="http://placehold.it/600x400">
</div>
</div>
</div>
<div class="col-sm-4">
<img class="img-responsive" src="http://placehold.it/600x830">
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<img class="img-responsive" src="http://placehold.it/600x400">
</div>
</div>
<div class="row v-spacer">
<div class="col-sm-12">
<img class="img-responsive" src="http://placehold.it/600x400/FC0/">
</div>
</div>
</div>
</div>
Notice we continue to use .row and the column classes .col-**-** to maintain proper structure of the grid which use padding and negative margins to create the gutters (space) between the columns and their containers.
Edit You'll have a bit of an issue with the middle image if you try to make it responsive. The middle image will not always line up with the stacked images. This is because the total height of the stacked image columns is two variable heights plus a fixed height. The middle image won't be able to match that 100% because it's always a single variable height and won't be able to match the fixed height that's introduced in the stacked columns.
you should follow below grid structure
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="row">
<div class="col-md-12 border">
1
</div>
<div class="col-md-12 border">
2
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="row">
<div class="col-md-12 border long">
3
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="row">
<div class="col-md-12 border">
4
</div>
<div class="col-md-12 border">
5
</div>
</div>
</div>
</div>
</div>
see fiddle
can try with below code.
Demo: https://jsfiddle.net/uurzr45k/2/
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
I creating simple post list with thumbnails.
I have created this code:
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
<div class="news">
<div class="news-thumb text-center">
<img src="images/NewsThumb.png" alt="" class="img-responsive" />
</div>
<div class="news-excerpt">
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
<div class="news">
<div class="news-thumb text-center">
<img src="images/NewsThumb.png" alt="" class="img-responsive" />
</div>
<div class="news-excerpt">
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
but on FullHD (1920px) I getting values for col-sm-* - why?
http://prntscr.com/an1097
This is because there is no over-riding column offset above for viewports above col-sm. Meaning that your page will display as the 6 central columns with the three column offset - even on larger screens.
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3">
you will need to add the following (col-md-offset-0) to each of the parent divs to prevent the offset in -md and -lg and to allow the two divs to display side by side:
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3 col-md-offset-0">
I just tested this and it now works and displays the columns side by side - look at the code snippet in action (in full screen mode - the columns are adjacent and in the small window they stack vertically. Note that I added coloured backgrounds to demonstrate the point.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3 col-sm-offset-0" style="background:red">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
<div class="news">
<div class="news-thumb text-center">
<img src="images/NewsThumb.png" alt="" class="img-responsive" />
</div>
<div class="news-excerpt">
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3 col-sm-offset-0" style="background:blue">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
<div class="news">
<div class="news-thumb text-center">
<img src="images/NewsThumb.png" alt="" class="img-responsive" />
</div>
<div class="news-excerpt">
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
I have a problem and I can't find a good solution right now. What I want to achieve is this (on screen size >= medium):
In black boxes there will be images. The white color represents the user screen view. I would like for those two horizontal boxes to fully fit to the screen edges.
<link href="http://cdn.jsdelivr.net/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=1" alt="" />
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=2" alt="" />
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-xs-12 col-sm-6 col-md-4">
<!-- make it span to the right edge of the screen on resolution >= medium -->
<img class="img-responsive" src="http://placehold.it/1920x300&text=3" alt="" />
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<!-- make it span to the left edge of the screen on resolution >= medium -->
<img class="img-responsive" src="http://placehold.it/1920x300&text=4" alt="" />
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-xs-12 col-sm-6 col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=5" alt="" />
</div>
<div class="hidden-xs col-sm-6 col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=6" alt="" />
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-xs-12 col-sm-6 col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=7" alt="" />
</div>
<div class="hidden-xs hidden-sm col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=8" alt="" />
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=9" alt="" />
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">some more content that is in container class, the total width of those three images above should be equal to this container so it fits nicely</div>
</div>
</div>
I give you the basic grid with elements that I want to see based on user screen size.
Any help with this would be great.
BTW: this need to be in the container because there will be content above and below those images and it needs to be somehow aligned to be consistent.
I think this should work for you
<div class="container">
<div class="row">
<div class="col-sm-2 col-sm-offset-3"></div>
<div class="col-sm-2"></div>
<div class="col-sm-4"></div>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
</div>
<div class="row">
<div class="col-sm-2 col-sm-offset-3"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
</div>
</div>
You can use the col-md-offset-x class to achieve the gabs. For example a row with a gab at the beginning:
<div class="col-md-2 col-md-offset-2">
<img class="img-responsive" src="http://placehold.it/1920x300/" alt="" />
</div>
<div class="col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300/" alt="" />
</div>
<div class="col-md-2">
<img class="img-responsive" src="http://placehold.it/1920x300/" alt="" />
</div>
<div class="col-md-2">
<img class="img-responsive" src="http://placehold.it/1920x300/" alt="" />
</div>
Note that you created a grid with 5 'places'. This is not possible in standard bootstrap, as bootstrap's grid is based upon 12 'places' (12 modulo 5 = 2).
AFAIK, the only way to acheive this is with nesting and column offsets. Also, you have to use container-fluid if you want to fill the entire screen width. The use the grid columns to limit the width of the 3rd row. You're basically turning the 12 column grid into a 10 column grid.
http://codeply.com/go/k8LNUgjaa0
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-11 col-md-offset-2">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-11 col-md-offset-2">
<div class="row">
<div class="col-md-3 col-md-push-3">
</div>
<div class="col-md-3 col-md-push-3">
</div>
<div class="col-md-6 col-md-pull-9">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-11 col-md-offset-2">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
</div>
</div>
</div>
Hi you can use customized column like below
<style>
.col-md-offset-sp { margin-left:20% }
#media (min-width:992px) { .col-md-sp { position:relative;min-height:1px;padding-right:15px;padding-left:15px;float:left; width: 20%; }}
#media (min-width:992px) { .col-md-2sp { position:relative;min-height:1px;padding-right:15px;padding-left:15px;float:left; width: 40%; }}
</style>
<div class="container">
<div class="row">
<div class="col-md-sp col-md-offset-sp"><img src="http://placehold.it/250x150" /></div>
<div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
<div class="col-md-2sp"><img src="http://placehold.it/500x150" /></div>
<div class="col-md-2sp"><img src="http://placehold.it/500x150" /></div>
<div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
<div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
<div class="col-md-sp col-md-offset-sp"><img src="http://placehold.it/250x150" /></div>
<div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
<div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
</div>
</div>
Here col-md-sp and col-md-2sp take care of 5 column layout (width 20% & 40%). While col-md-offset-sp take care of margin for 5 column layout (margin-left 20%).
Note : other rules are just copied from bootstrap.css file
I'm not sure if I'm doing anything wrong but I'm getting a weird bug in a bootstrap grid when I resize my browser. It happens in a matter of a pixel and stops when I keep resizing. One of the images in the grid gets out of place and goes to the bottom. I'll attach a picture of the fail and another one of the normal.
Does anyone know what this bug is and how to fix it?
this is my code:
<section class="container-fluid">
<div class="row">
<div class="col-xs-12"> <img id="imgClickAndChange" src="img.jpg" onclick="changeImage(1)"/> </div>
</div>
<div class="row no-pad">
<div class="col-xs-12 col-md-6 col-lg-4">
<img class="grid" src="img1.jpg"/>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<img class="grid" src="img2.jpg"/>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<img class="grid" src="img1.jpg"/>
</div>
</div>
<div class="row no-pad">
<div class="col-xs-12 col-md-6 col-lg-4">
<img class="grid" src="img2.jpg"/>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<img class="grid" src="img1.jpg"/>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<img class="grid" src="img.jpg2"/>
</div>
</div>
</section>
Only css I used:
Btw it's a customized bootstrap (but the only thing I customized was the min width for a large screen from 1200px to 1900px and removed the grid glutter)
.grid { width: 100%;}
Thank you.
With Bootstrap, try applying the class img-responsive to your images to ensure they never exceed 100% width of their parent.
<img class="img-responsive" src="img1.jpg"/>
Documentation: http://getbootstrap.com/css/#images
If all the images are the same size, there is no issue:
https://jsbin.com/muzug/1/
https://jsbin.com/muzug/1/edit?html,css,output
Also, not necessary to have the col-xs-12, it will always be 100% under the last min-width class used.
Added a rounding error correction.
CSS:
.row.no-pad img {width:100.1%;}
.row.no-pad [class*="col-"] {padding:0;margin-bottom:-1px}
HTML
<section class="container-fluid">
<div class="row no-pad">
<div class="col-md-6 col-lg-4">
<img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
</div>
</div>
</div>