I'm using bootstrap and I have a row with 1 column and another row with 2 columns.
All items have one picture in it, and should take up all the avaible space inside the column.
So far I can't get the first image on the first row to fill the div width,this image resizes correctly when I reduce the window, but when I enlarge it, the picture will
resize to its original maximum size when I want it to be always same as the div width
Here is the snippet : https://jsfiddle.net/gd0obgg9/
Here is the code :
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Portfolio Item
</h1>
</div>
</div>
<div class="row">
<div></div>
<div class="col-md-12">
<img class="img-responsive" src="http://placehold.it/550x200" alt="">
</div>
<div></div>
</div>
<div class="row">
<hr>
<div class="col-sm-6 col-xs-12">
<a href="#">
<img class="img-responsive portfolio-item" src="http://placehold.it/300x300" alt="">
</a>
</div>
<div class="col-sm-6 col-xs-12">
<a href="#">
<img class="img-responsive portfolio-item" src="http://placehold.it/300x300" alt="">
</a>
</div>
</div>
</div>
</body>
I want my 550x200 to fill enterely the width
Any advice ? thanks
If I understood you correctly, to give the image full width use:
.img-responsive {
width: 100%;
}
Note that this will, in some cases, distort the image to cover the full div
In my test:
Update your css to set the width of img elements inside your columns to 100%.
you should add width:100% to your img
here the new code
<body>
<!-- Page Content -->
<div class="container">
<!-- Portfolio Item Heading -->
<div class="row">
<div class="col-lg-12 col-xs-12 col-md-12">
<h1 class="page-header">Portfolio Item
<small>Item Subheading</small>
</h1>
</div>
</div>
<!-- /.row -->
<!-- Portfolio Item Row -->
<div class="row">
<div>
</div>
<div class="col-md-12">
<img class="img-responsive" style="width:100%" src="http://placehold.it/550x200" alt="">
</div>
<div>
</div>
</div>
<!-- /.row -->
<!-- Related Projects Row -->
<div class="row">
<hr>
<div class="col-sm-6 col-xs-12">
<a href="#">
<img class="img-responsive portfolio-item" src="http://placehold.it/300x300" alt="">
</a>
</div>
<div class="col-sm-6 col-xs-12">
<a href="#">
<img class="img-responsive portfolio-item" src="http://placehold.it/300x300" alt="">
</a>
</div>
</div>
</div>
</body>
Related
good day, I have a goal of aligning all images and test in my 12 grid bootstrap column. i divided it in 6, 4, and 2 but the icons in the 2 column does not match the length with the other columns. i have images of the current one and the layout that i intended to create.
<div class="container-full col-md-12">
<div class="row">
<div class="col-md-6">
<img src="img/pic1.jpg" class="display_img">
</div>
<div class="col-md-4">
<h1 class="text-center">A Wealth of Deals for Wellness</h1>
</div>
<div class="col-md-2">
<img src="img/link_beauty.png">
<img src="img/link_health.png">
<img src="img/link_wellness.png">
<img src="img/link_partners.png">
</div>
</div>
</div>
You can add class="img-responsive" class to <img> tag for creating the images responsive. Please see the below updated code:
<div class="container-full col-md-12">
<div class="row">
<div class="col-md-6">
<img src="img/pic1.jpg" class="display_img img-responsive">
</div>
<div class="col-md-4">
<h1 class="text-center">A Wealth of Deals for Wellness</h1>
</div>
<div class="col-md-2">
<img src="img/link_beauty.png" class="img-responsive">
<img src="img/link_health.png" class="img-responsive">
<img src="img/link_wellness.png" class="img-responsive">
<img src="img/link_partners.png" class="img-responsive">
</div>
</div>
</div>
I am trying to create this:
I have the left and right image and the monkey image.
I was trying to create a row and make the left image col-3, the right image col-3 and the monkey and text col-6 in the middle.
Everything is stacking up on each other, comes out of the screen and not working. How can I make this sort of thing?
<section class="hero-area">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-xs-3">
<img src="images/hero-left.svg" class="" alt="">
</div>
<div class="col-xs-6 col-md-126>
<h1 class="">
<b>monKey</b> Generator</h1>
<br>
<h2 class="">Generate a
<b>unique monkey</b> avatar
<br> from a
<b>Banano public key</b>
</h2>
<img src="https://bananomonkeys.herokuapp.com/image?address=ban_3tapge8i4kw9wa4irgda7epm4gaurr4rnp7ybjziphkt48afd6ba5pnaegs6"
class="" alt="">
</div>
<div class="col-md-3 col-sm-3">
<img src="images/hero-right.svg" class="" alt="">
</div>
</div>
</div>
</section>
There are couple of typos in your snippet above eg: col-md-126 and missing " after that. Also bootstrap 4 does not have xs on cols so using just col-3 col-6 col-3 would do the job.
See the snippet below.
img {
width:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<section class="hero-area">
<div class="container-fluid">
<div class="row">
<div class="col-3">
<img src="images/hero-left.svg" alt="monkey left">
</div>
<div class="col-6">
<h1>
<b>monKey</b> Generator
</h1>
<br>
<h2>Generate a
<b>unique monkey</b> avatar
<br> from a
<b>Banano public key</b>
</h2>
<img src="https://bananomonkeys.herokuapp.com/image?address=ban_3tapge8i4kw9wa4irgda7epm4gaurr4rnp7ybjziphkt48afd6ba5pnaegs6" />
</div>
<div class="col-3">
<img src="images/hero-right.svg" class="" alt="monkey right">
</div>
</div>
</div>
</section>
I'm using bootstrap cards to build this layout on desktop:
So far so good, at this width everything is ok as well:
But from this width to desktop width the container is not filled:
The HTML to build the card with the images is:
<div class="card h-60">
<div>
<div class="row box">
<div class="box-content formal">
<div class="col-md-12">
<img class="imageban" src="img/crm.png" />
<span><b>CRM</b></span>
</div>
</div>
<div class="box-right">
<a href="#">
<img class="img-responsive" src="img/img1.jpg"/>
</a>
</div>
</div>
</div>
<div>
<div class="row box">
<div class="box-content report">
<div class="col-md-12">
<img class="imageban" src="img/report.png" />
<span><b>Report</b></span>
</div>
</div>
<div class="box-right">
<a href="#">
<img class="imageban" src="img/img4.jpg"/>
</a>
</div>
</div>
</div>
<div>
<div class="row box">
<div class="box-content formal">
<div class="col-md-12">
<img class="img-responsive" src="img/formal_notices.png" />
<span><b>Formal Notices</b></span>
</div>
</div>
<div class="box-content text">
<a href="#">
Open the Formal <br>Notice Document <br>Library
</a>
</div>
</div>
</div>
</div>
And the CSS is only this line:
.row.box{
max-width: 345px;
}
I'm stuck in this, any help would be nice. Thanks.
You can remove the class .box and use the Bootstrap classes instead col-md-4 col-xs-12.
I have a mysqli_fetch_assoc that return me images. I need put all of these images centered horizontally. I try use center-block on all of this, but only center one and the others images goes down.
For example:
If mysql give me 2 images:
<body>
<div class="col-xs-12">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30" class="center-block">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30" class="center-block">
</div>
</body>
https://jsfiddle.net/ff4rj8zs/
If mysql give me 3 images:
<body>
<div class="col-xs-12">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30" class="center-block">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30" class="center-block">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30" class="center-block">
</div>
</body>
https://jsfiddle.net/96czjmoh/
As you can see, the images goes down, and don't stay in the same line. I need that all images stay centered in the same line independent of the quantity.
Thanks!
Use this:
<body>
<div class="col-xs-12 text-center">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30">
</div>
</body>
See: https://jsfiddle.net/ff4rj8zs/3/
Is this what you're after?
<div class="col-xs-12 text-center">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3-">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30">
</div>
<div class="col-xs-12 col-sm-4 col-md-3-">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30">
</div>
<div class="col-xs-12 col-sm-4 col-md-3-">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30">
</div>
</div>
</div>
In my nested column (col-md-6) I included two rows. Unfortunately the (smaller) pictures in the second row do not horizontally align to the left with the first column and the rest of the whole page content. Is there any different margin in col-md-4 than in col-md-12 or is is there any other reason?
Thank you!
<div class="col-md-6 col-md-height">
<div class="row">
<div class="col-md-12">
<a href="images/e1/expose1.jpg" data-lightbox="roadtrip">
<img src="images/e1/expose1.jpg" class="center-block img-responsive" width="100%">
</a>
blabla
</div>
</div>
<div clas="row">
<div class="col-md-4">
<a href="images/e1/s1.jpg" data-lightbox="roadtrip">
<img src="images/e1/s1.jpg" class="img-responsive">
</a>
</div>
<div class="col-md-4">
<img src="images/e1/s2.jpg" class="img-thumbnail">
</div>
<div class="col-md-4">
<img src="images/e1/s3.jpg" class="img-thumbnail" >
</div>
</div>
</div>
It maybe because of the img-thumbnail class you are using on the last two images.
Try converting them to img-responsive