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

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;
}

Related

Bootstrap grid custom layout

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>

How to increase height of first row image in bootstrap

I want to design like this in bootstrap css , picture
What i have tried is
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="img1.jpg">
</div>
<div class="col-md-6">
<img class="img-responsive" src="img3.jpg">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img5.jpg">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img2.jpg">
</div>
<div class="col-md-6">
<img class="img-responsive" src="img4.jpg">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img6.jpg">
</div>
</div>
The height of images img1.jpg,img4.jpg,img5.jpg need to increase as shown in image attcahed,
Is there any Experts in CSS?

Add the .img-fluid class to each of your images so they scale with the parent div's. That should work.
https://getbootstrap.com/docs/4.0/content/images/#responsive-images

You can achieve the desired layout with modification on your html code. Try this code.
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="img1.jpg">
<br>
<img class="img-responsive" src="img2.jpg">
</div>
<div class="col-md-6">
<img class="img-responsive" src="img3.jpg">
<br>
<img class="img-responsive" src="img4.jpg">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img5.jpg">
<br>
<img class="img-responsive" src="img6.jpg">
</div>
</div>

how to make this div/image using bootstrap grid system

I need to made this div in bootstrap 3 as shows in image...
I need to display 4 icons/images in one row and another 4 icons in another row in smaller screen/mobile view..i dont know any error in my code..
please help me to make this as shown as in image.
<section class="container-fluid">
<div class="row" style="background-color:#034ea2;">
<div class="col-md-2"></div>
<div class="col-md-1 text-center ">
<div class="im1">
<img src="/images/speaker.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Sound insultion</h6>
</div>
</div>
<div class="col-md-1 text-center" >
<div class="im1">
<img src="/images/renewable-energy.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Save energy</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/window.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Prevent Dust Buildup</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/stormy.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Storm Resistant</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/hotel-elevator.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Elegant Looks</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/umb.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Blocks Seepage</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/sun.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Thermal Insulation</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/maintenance.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Low maintenance</h6>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</section>
styles
.im1{
padding-top: 8px;
padding-left: 8px;
}
.siz{
width: 40px;
}
.textt{
font-size: 15px;
color:#ffffff;
font-family: 'Times New Roman', Times, serif !important;
}
Here is the image
how to make this image using bootstrap grid system...

I created a code for you. I hope it will help to you.
https://codepen.io/myco27/pen/OvMdGp
img{
width: 100%;
}
.img1{
width: calc(100% / 8);
float:left;
}
#media (max-width: 860px) {
.img1{
width: calc(100% / 4);
float:left;
}
}
<section class="container-fluid">
<div class="row" style="background-color:#034ea2;">
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
</div>
</section>

First bootstrap runs in a 12 grid sysytem that is defined or can be broken down into 2,3, or 4 segements...basically any divisor of 12. In your case, to get the first four images in a row (in a small device), we split the grid by 3 i.e "col-md-3" for each image wrapper and "col-lg-1" (for large devices) e.g using a snippet from your code
<div class="col-lg-1 col-md-3 text-center">
<div class="im1">
<img src="/images/hotel-elevator.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Elegant Looks</h6>
</div>
</div>
Then avoid splitting the grid at the main <div class="col-md-2"></div> wrapper, simply leave it as <div class="row justify-content-md-center"></div>.
This should work just fine.
NB: The number of images willbe only 8 in this container
For Your CSS is simply modify the following
.siz{
width: 100%;
}

Try This. it has 8 div in 1 row. as shown in image
<style>
.main{
background:#034da2;
}
</style>
<div class="col-md-12 main">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
</div>
</div>
</div>
</div>
</div>

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 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>