Can I use bootstrap grid with no gutter? I want 3 columns with one row http://prntscr.com/6gpmhm
I had posted the markup about css I am using default css of framework
<section class="team-block">
<div class="row">
<div class="col-sm-4">
<img src="images/photo-01.jpg" height="534" width="534" alt="image description">
</div>
<div class="col-sm-4">
<img src="images/photo-02.jpg" height="267" width="266" alt="image description">
<img src="images/photo-10.jpg" height="267" width="266" alt="image description">
<img src="images/photo-03.jpg" height="267" width="266" alt="image description">
<img src="images/photo-04.jpg" height="267" width="266" alt="image description">
</div>
<div class="col-sm-4">
<img src="images/photo-05.jpg" height="534" width="534" alt="image description">
</div>
</div>
</section>
For the images to stack on one column, you need to remove px widths and re-define rows like this:
<div class="col-sm-4">
<div class="row">
<div class="col-sm-6">
<img src="images/photo-02.jpg" class="img-responsive" alt="image description">
</div>
<div class="col-sm-6">
<img src="images/photo-10.jpg" class="img-responsive" alt="image description">
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img src="images/photo-03.jpg" class="img-responsive" alt="image description">
</div>
<div class="col-sm-6">
<img src="images/photo-04.jpg" class="img-responsive" alt="image description">
</div>
</div>
</div>
You can add this to your css to remove the gutter:
.col-sm-4 {
padding: 0px;
}
.col-sm-6 {
padding: 0px;
}
You have to use external class for it.
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
Related
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>
I have a container-fluid that contains 3 row
Row 1: 4 images
Row 2: 4 images
Row 3: 3 images
I am trying to center Row 3, I tried adding Row 3 inside another class called "container" and tried the "left, right" in css but did not work, may you please help?
.b3 {
padding-bottom: 20px;
}
.client-section {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.img-responsive {
padding-bottom: 10px;
}
#clients {padding-top:10px;padding-bottom:50px;color: #7e7e7e; background-color:#151515;}
<section class="container-fluid client-section" id="clients">
<div class="row">
<div>
<b class="col-lg-10
col-md-10
col-sm-10
col-xs-10
col-lg-push-1
col-md-push-1
col-sm-push-1
col-xs-push-1 b2 b3">Clients</b>
</div>
</div>
<div class="col-lg-10
col-md-10
col-sm-10
col-xs-10
col-lg-push-1
col-md-push-1
col-sm-push-1
col-xs-push-1">
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
<div class="row center">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
</div>
</section>
Is this your solution
.b3 {
padding-bottom: 20px;
}
.client-section {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.img-responsive {
padding-bottom: 10px;
}
.center .img-responsive{
margin:0 auto;
display:block;
}
#clients {padding-top:10px;padding-bottom:50px;color: #7e7e7e; background-color:#151515;}
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
<div class="row center">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
The last row have 9, need to be 12, replace 3 by 4.
<div class="row">
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
And change the css by this:
.img-responsive {
padding-bottom: 10px;
display:block;
margin-left: auto;
margin-right: auto
}
you can use bootstrap class text-center
or you can just add this css
.center{
text-align: center;
}
.b3 {
padding-bottom: 20px;
}
.client-section {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.img-responsive {
padding-bottom: 10px;
}
#clients {padding-top:10px;padding-bottom:50px;color: #7e7e7e; background-color:#151515;}
.center{
text-align: center;
}
<section class="container-fluid client-section" id="clients">
<div class="row">
<div>
<b class="col-lg-10
col-md-10
col-sm-10
col-xs-10
col-lg-push-1
col-md-push-1
col-sm-push-1
col-xs-push-1 b2 b3">Clients</b>
</div>
</div>
<div class="col-lg-10
col-md-10
col-sm-10
col-xs-10
col-lg-push-1
col-md-push-1
col-sm-push-1
col-xs-push-1">
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
<div class="row center">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
</div>
</section>
I want to align my images like bootstrap, I can't do it with bootstrap because user have the option to resize the images and using Bootstrap class "col-md, col-xs, etc." user can't resize the image width, I tried creating a div with width:100% and then I add width:25% to each image (I want 4 images per row), and the image is in the correct size but not in the correct position.
This is what I have at the moment:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<h2>Without Bootstrap</h2>
<div class="">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
</div>
</div>
Here is an example of what I want vs what I have
Code
Thanks in advance.
If you add a class to your divs that contain the images, you can use:
display: inline-block;
I added CSS to your file:
.blockRow {
display: inline-block;
padding-right: 2.2em;
}
and HTML:
<div class="container">
<h2>With Bootstrap</h2>
<div class="row">
<div class="col-sm-3 col-md-3 col-xs-3">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="col-sm-3 col-md-3 col-xs-3">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="col-sm-3 col-md-3 col-xs-3">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="col-sm-3 col-md-3 col-xs-3">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
</div>
<hr />
<h2>Without Bootstrap</h2>
<div class="blockRow">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="blockRow">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="blockRow">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="blockRow">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
</div>
You'll have to play around with the padding to get it how you want it to look: http://codepen.io/anon/pen/pEobEg
I just started learning HTML and CSS and am running into images misalignment and trying to make them the same size. How can I fix this?
This is the current HTML:
<div class="container text-center">
<h3>Find Your University</h3><br>
<div class="row">
<div id="cities">
<div class="col-sm-4">
<img src="https://media.timeout.com/images/100644443/image.jpg" class="img-responsive" style="width:100%" alt="London">
</div>
<div class="col-sm-4">
<img src="http://www.gaiasg.com/img/si1.jpg" class="img-responsive" style="width:100%" alt="Singapore">
</div>
<div class="col-sm-4">
<img src="http://images.trvl-media.com/media/content/shared/images/travelguides/Argentina-8-smalltabletRetina.jpg" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-4">
<img src="http://www.travelstart.com.ng/blog/wp-content/uploads/2014/02/Lagos.jpg" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-4">
<img src="https://www.sohohousechicago.com/system/files/082014/53e8a9c2f9426120f600002e/xlarge/063696_002.jpg?1424778295" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-4">
<img src="http://www.tnetnoc.com/dealsImages/landingPages/destinationLandingPages/other/Sydney-345x225.1.jpg" class="img-responsive" style="width:100%" alt="Image">
</div>
</div>
</div>
And the CSS:
#cities .col-md-3 {
height:570px;
overflow:hidden;
}
you need to use another row for each 3 images:
<div class="container text-center">
<h3>Find Your University</h3><br>
<div id="cities">
<div class="row">
<div class="col-sm-4">
<img src="https://media.timeout.com/images/100644443/image.jpg" class="img-responsive" style="width:100%" alt="London">
</div>
<div class="col-sm-4">
<img src="http://www.gaiasg.com/img/si1.jpg" class="img-responsive" style="width:100%" alt="Singapore">
</div>
<div class="col-sm-4">
<img src="http://images.trvl-media.com/media/content/shared/images/travelguides/Argentina-8-smalltabletRetina.jpg" class="img-responsive" style="width:100%" alt="Image">
</div> </div>
<div class="row">
<div class="col-sm-4">
<img src="http://www.travelstart.com.ng/blog/wp-content/uploads/2014/02/Lagos.jpg" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-4">
<img src="https://www.sohohousechicago.com/system/files/082014/53e8a9c2f9426120f600002e/xlarge/063696_002.jpg?1424778295" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-4">
<img src="http://www.tnetnoc.com/dealsImages/landingPages/destinationLandingPages/other/Sydney-345x225.1.jpg" class="img-responsive" style="width:100%" alt="Image">
</div>
</div>
</div>
I don't think that you need a div for every image. Enough to have one main container for them. Try to set 2 different classes, on one of them use float:left and on the other float:right , that way they will be in the same line.
Try looking at this page http://www.w3schools.com/html/html_images.asp "image floating" and test it out to understand how it works.
I am trying to display 3 images in a row with a title, some text underneath the title and a button. I have tried doing this in bootstrap only to get the text moving all over the place. This seems like the only way I could get the text to stay put, but now as you can see my images are stacked on top of each other rather than next to each other. Any help would be appreciated!
<section class="part2">
<div class="container">
<div class="row">
<div class="text-center">
<img alt="" class="resize-image" id="image1" src="/wp-content/themes/creativeforces/images/kid2.jpg">
<p>Teach</p>
<img alt="" class="resize-image" id="image2" src="/wp-content/themes/creativeforces/images/kid2.jpg">
<p>Read</p>
<img alt="" class="resize-image" id="image3" src="/wp-content/themes/creativeforces/images/kid2.jpg">
<p>Play</p>
</div>
</div>
</div>
this is what it looks like now
i am trying to get it to look something like this
You will need to add grids to your rows. This should work
<section class="part2">
<div class="container">
<div class="row">
<div class="col-md-4">
<img alt="" class="resize-image center-block" id="image1" src="/wp-content/themes/creativeforces/images/kid2.jpg" />
<p class="text-center">Teach</p></div>
<div class="col-md-4"><img alt="" class="resize-image center-block" id="image2" src="/wp-content/themes/creativeforces/images/kid2.jpg" />
<p class="text-center">Read</p></div>
<div class="col-md-4"><img alt="" class="resize-image center-block" id="image3" src="/wp-content/themes/creativeforces/images/kid2.jpg" />
<p class="text-center">Play</p></div>
</div>
</div>
</section>
Please use this example. You need to use bootstrap grid classes like "col-md-x" where x is number from 1 to 12.
<section class="part2">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<img alt="" class="resize-image" id="image2" src="/wp-content/themes/creativeforces/images/kid2.jpg">
<p>Read</p>
</div>
<div class="col-md-4 text-center">
<img alt="" class="resize-image" id="image1" src="/wp-content/themes/creativeforces/images/kid2.jpg">
<p>Teach</p>
</div>
<div class="col-md-4 text-center">
<img alt="" class="resize-image" id="image3" src="/wp-content/themes/creativeforces/images/kid2.jpg">
<p>Play</p>
</div>
</div>