Bootstrap grid custom layout - html

I have been learning this design
<section>
<div class="container">
<div class="row">
<div class="row">
<div class="col-lg-12 col-md-12">
<img src="image.png" alt="" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6">
<img src="image.png" alt="" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6">
<img src="image.png" alt="" class="img-fluid">
</div>
<div class="col-lg-6 col-md-6">
<img src="image.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</section>
I am getting the below design
Could you please help me on this design and let me know where am i going wrong?
Thank you


<section>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<img src="image.png" alt="" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6">
<img src="image.png" alt="" class="img-fluid">
</div>
<div class="col-lg-6 col-md-6">
<div class="row">
<div class="col-lg-12 col-md-12">
<img src="image.png" alt="" class="img-fluid">
</div>
<div class="col-lg-12 col-md-12">
<img src="image.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</section>

Related

How to fix equal column the height problem in bootstrap [duplicate]

This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 2 years ago.
I'm new to bootstrap. I'm trying to create a gallery of some amazing arts. But, I'm facing some issues. All of the columns are taking up equal height even though the image isn't that large. How can I remove the extra space?
<div class="container-fluid">
<div class="row content" id="images">
<div class="col-md-4">
<img src="..\images\allyson-beaucourt-HaD6zYONkg0-unsplash.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-4">
<img src="..\images\annie-spratt-52hSxHwXE7I-unsplash.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-4">
<img src="..\images\amr-taha-ig_Qc8qoTSI-unsplash.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-4">
<img src="..\images\annie-spratt-Pzyyzaiy-LE-unsplash.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-4">
<img src="..\images\arno-senoner-FOM8031NAG8-unsplash.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-4">
<img src="..\images\bp-miller-f6BffCg5Ymc-unsplash.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
this is how I want it to look.

This can be helpful
<div class="container-fluid">
<div class="row">
<div class="col-md-6 content" id="images">
<div class="col-md-12 ">
<img src="..\images\allyson-beaucourt-HaD6zYONkg0-unsplash.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-12 ">
<img src="..\images\annie-spratt-52hSxHwXE7I-unsplash.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-12 ">
<img src="..\images\amr-taha-ig_Qc8qoTSI-unsplash.jpg" alt="" class="img-fluid">
</div>
</div>
<div class="col-md-6 content" >
<div class="col-md-12 " style="max-height: 50%">
<img src="..\images\annie-spratt-Pzyyzaiy-LE-unsplash.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-12 " style="max-height: 50%">
<img src="..\images\arno-senoner-FOM8031NAG8-unsplash.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
see more on bootstrap grid

Organizing images in the bootstrap grid layout

Hi guys I need help in organizing a group of images using the bootstrap grid layout.
In the image there is the result I want reach: https://i.stack.imgur.com/RuJud.png
My code produces this result: https://i.stack.imgur.com/ZDa2Z.png
The position of the images is wrong, can you help me watching my code?
<div class="container">
<div class="row game-group-titles">
<div class="col-md-6">
<h4>GIOCHI PREFERITI</h4>
<div class="row">
<div class="col-md-12 giocogrosso">
<img src="../lggioco.png" alt="">
</div>
</div>
<div class="row">
<div class="col-md-6 giocopiccoloo">
<img src="../giocoo.png" alt="">
</div>
<div class="col-md-6 giocopiccolo">
<img src="../giocoo.png" alt="">
</div>
</div>
<div class="row">
<div class="col-md-6 giocopiccoloo">
<img src="../giocoo.png" alt="">
</div>
<div class="col-md-6 giocopiccolo">
<img src="../giocoo.png" alt="">
</div>
</div>
</div>
<div class="col-md-6">
<h4>CURRENTLY PLAYING</h4>
<div class="row">
<div class="col-md-12 giocogrosso">
<img src="../lggioco.png" alt="">
</div>
</div>
<div class="row">
<div class="col-md-6 giocopiccoloo">
<img src="../giocoo.png" alt="">
</div>
<div class="col-md-6 giocopiccolo">
<img src="../giocoo.png" alt="">
</div>
</div>
<div class="row">
<div class="col-md-6 giocopiccoloo">
<img src="../giocoo.png" alt="">
</div>
<div class="col-md-6 giocopiccolo">
<img src="../giocoo.png" alt="">
</div>
</div>
</div>
</div>
</div>

Not sure if this is what you were looking for
.row {
background: blue;
max-width: 410px;
}
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col, > [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
<h4>GIOCHI PREFERITI</h4>
<div class="row no-gutters">
<div class="col-12 giocogrosso">
<img src="http://via.placeholder.com/410x190" alt="">
</div>
<div class="col-xs-6 giocopiccoloo">
<img src="http://via.placeholder.com/205x95" alt="">
</div>
<div class="col-xs-6 giocopiccoloo">
<img src="http://via.placeholder.com/205x95" alt="">
</div>
<div class="col-xs-6 giocopiccoloo">
<img src="http://via.placeholder.com/205x95" alt="">
</div>
<div class="col-xs-6 giocopiccolo">
<img src="http://via.placeholder.com/205x95" alt="">
</div>
</div>

How to make images in grid responsive in mobile/smaller view?

Im trying to make images resizable/responsive and Ive been trying everything-setting the image surrounding div to a par. size in px and giving the images a percentage as well as all kind of other things like min/max-width, looked up solutions online etc but nothing works. Any ideas?
html:
<section id="skills" class=" skillsSection">
<div class="container">
<div class="row skillsHeader">
<div class="col-lg-12 text-center">
<div class="vertical">
<h3 class="H2">
<span>SKILLS</span>
</h3>
</div>
</div>
</div>
<div class="row skillsRow">
<div class="col-md-3 skills-item wow zoomIn">
<img src="images/..." class="img-responsive" alt="">
</div>
<div class="col-md-3 skills-item wow zoomIn">
<img src="images/..." class="img-responsive" alt="">
</div>
<div class="col-md-3 skills-item wow zoomIn">
<img src="images/..." class="img-responsive" alt="">
</div>
<div class="col-md-3 skills-item wow zoomIn">
<img src="images/..." class="img-responsive" alt="">
</div>
<div class="col-md-3 skills-item wow zoomIn">
<img src="images/..." class="img-responsive" alt="">
</div>
<div class="col-md-3 skills-item wow zoomIn">
<img src="images/..." class="img-responsive" alt="">
</div>
<div class="col-md-3 skills-item wow zoomIn">
<img src="images/..." class="img-responsive" alt="">
</div>
</div>
</div>
</section>
css:
skills-item img {
width: 50px;
}
.img-responsive{
width: 100%;
height:auto;
}

Bootstrap CSS Grid Customize

I wanted to create an image grid with one full image on the left and 4 thumbnail images on right of the big image. Something like what I've done here:
https://codepen.io/ashwindkini/pen/qabRok
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="https://placehold.it/450x450" alt="" />
</div>
<div class="row">
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
</div>
How do I prevent the second set of images (thumbnails) from increasing the size of row?

Are you able to make the larger image actually a larger image so that it scales responsively in comparison with the smaller "thumbnails"?
It would help to remove padding from the columns so that the width of the image (forced by column padding) doesn't limit the height of the image.
Everything can go in a single row..
<div class="container">
<div class="row">
<div class="img col-sm-6 col-md-6">
<img src="//placehold.it/600/666" class="center-block img-responsive" alt="big image">
</div>
<div class="img col-xs-6 col-sm-6 col-md-3">
<img src="//placehold.it/450/EEE" class="img-responsive" >
</div>
<div class="img col-xs-6 col-sm-6 col-md-3">
<img src="//placehold.it/450" class="img-responsive" >
</div>
<div class="img col-xs-6 col-sm-6 col-md-3">
<img src="//placehold.it/450" class="img-responsive" >
</div>
<div class="img col-xs-6 col-sm-6 col-md-3">
<img src="//placehold.it/450/444" class="img-responsive" >
</div>
</div>
</div>
http://www.codeply.com/go/y9nZTlXSWT

The "row" element should not be a direct child of another row element. You should put it as a child of another col-md-6.
Here's the example:
https://codepen.io/anon/pen/dpGvOJ
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="https://placehold.it/450x450" alt="" />
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
</div>
</div>
</div>
</div>

How to display two images on one line Bootstrap 3

Hello i m new to bootstrap and i want to know how to display two images on one line and keep the responsive function.Can you give me an example ?
<div class="col-xs-12 col-md-8">
<img src="images/l.jpg" class="img-responsive" alt="Logo">
</div>

Sure, for BS2:
<div class="row-fluid">
<div class="span6"><img src="yourimage"/></div>
<div class="span6"><img src="yourimage"/></div>
</div>
For BS3:
<div class="row">
<div class="col-xs-6 col-md-6"><img src="yourimage"/></div>
<div class="col-xs-6 col-md-6"><img src="yourimage"/></div>
</div>
EDIT: 01/03/2017
For BS4 (w/ FLEXBOX):
<div class="row">
<div class="col"><img src="yourimage"/></div>
<div class="col"><img src="yourimage"/></div>
</div>
Another solution is to float the images to the left:
<img class="pull-left" src="yourimage"/>
<img class="pull-left" src="yourimage"/>

It should be something like that
<div class="col-xs-12 col-md-8">
<div class="row">
<div class="col-xs-4 col-md-4">
<img src="images/l.jpg" class="img-responsive" alt="Logo">
</div>
<div class="col-xs-4 col-md-4">
<img src="images/2.jpg" class="img-responsive" alt="Logo">
</div>
<div class="col-xs-4 col-md-4">
<img src="images/2.jpg" class="img-responsive" alt="Logo">
</div>
</div>
</div>