I have a bootstrap container which shows some images a two column layout. Since not all images have the same aspect ratio, it would be a pain to cut the images to the right ration. better to solve it in code.
My goal is to have all images of a container the same height. and the bigger image will resize to the height of the smaller. then the padding between images will be dynamic. I hope it is clear what I mean by this, otherwise let me know.
A hint from you is highly appreciated
-endo
Here is an example:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container container-fluid">
<div class="row w-100">
<div class="col-lg-12">
<figure>
<img sizes="auto" alt="" src="http://placekitten.com/g/1500/1000" width="100%">
</figure>
</div>
</div>
<div class="row w-100 h-100">
<div class="col-8">
<figure>
<img class="img-responsive" sizes="auto" alt="" src="http://placekitten.com/g/4523/2262" width="100%">
</figure>
</div>
<div class="col-4">
<figure>
<img class="img-responsive" sizes="auto" alt="" src="http://placekitten.com/g/2100/3000" width="100%">
</figure>
</div>
</div>
<div class="row w-100">
<div class="col-lg-12">
<figure>
<img sizes="auto" alt="" src="http://placekitten.com/g/1500/1000" width="100%">
</figure>
</div>
</div>
</div>
Related
I am trying to make my portfolio responsive but having some issues with bootstrap.
I have 4 divs which should take up the width of the screen evenly. I have a class of row d-none d-sm-block on it. This should hide this set of divs and toggle my mobile view when the screen falls below 576 pixels. This seems to be working.
I also have a col-sm-3 on each of the 4 divs. This is looks like the problem. It supposed to take up the width evenly and it does - Until you get to a width of 770 pixels or below then the divs stack in 4 rows instead of one. When the width of the screen gets to about 760 pixels
Upon inspection it looks like the column is taking up the whole width of the screen for some reason. I can't figure out what the issue is. The entire website can be found on heroku. You'd have to scroll down to "Main Technology Stack":
https://mighty-ocean-12133.herokuapp.com/
Here's a code snippet of what I have:
<div className="container">
<div className="row d-none d-sm-block">
<div style={{cursor: "pointer"}} className="col-sm-3" onMouseOver={this.openBox.bind(this,'ReactJS')} onMouseLeave={this.fadeIn.bind(this, 'ReactJS')}>
<img width="100%" height="100%" src="/assets/ReactJS.png" alt=""></img>
</div>
<div style={{cursor: "pointer"}} className="col-sm-3" onMouseOver={this.openBox.bind(this,'AngularJS')} onMouseLeave={this.fadeIn.bind(this, 'AngularJS')}>
<img width="100%" height="100%" src="/assets/AngularJS.png" alt=""></img>
</div>
<div style={{cursor: "pointer"}} className="col-sm-3" onMouseOver={this.openBox.bind(this,'Java')} onMouseLeave={this.fadeIn.bind(this, 'Java')}>
<img width="100%" height="100%" src="/assets/Java.jpg" alt=""></img>
</div>
<div style={{cursor: "pointer"}} className="col-sm-3" onMouseOver={this.openBox.bind(this,'Accessibility')} onMouseLeave={this.fadeIn.bind(this, 'Accessibility')}>
<img width="100%" height="100%" src="/assets/Accessibility.png" alt=""></img>
</div>
</div>
<div className="row d-block d-sm-none">
<div style={{cursor: "pointer"}} className="col-md-3">
<img src="/assets/ReactJS.png" alt=""></img>
</div>
<div style={{cursor: "pointer"}} className="col-md-3">
<img src="/assets/AngularJS.png" alt=""></img>
</div>
<div style={{cursor: "pointer"}} className="col-md-3">
<img src="/assets/Java.jpg" alt=""></img>
</div>
<div style={{cursor: "pointer"}} className="col-md-3">
<img src="/assets/Accessibility.png" alt=""></img>
</div>
</div>
</div>
Any other random comments on my portfolio is appreciated as well.
Simply use d-flex flex-row with combination of justify-content-around or justify-content-between
I have used Bootstrap 4 here.
<body>
<div class="container-fluid bg-light">
<div class="col-12">
<div class="row d-flex flex-row justify-content-around">
<div class="border border-dark">
<img src="./images/reactjs.png" alt="" />
</div>
<div class="border border-dark">
<img src="./images/angularjs.png" alt="" />
</div>
<div class="border border-dark">
<img src="./images/java.png" alt="" />
</div>
<div class="border border-dark">
<img src="./images/accessibility.png" alt="" />
</div>
</div>
</div>
</div>
</body>
Hope it will help you.
I am designing the asp.net bootstrap form. I have one div in it.
Code:
<div id="gallery">
<a href="aboutus.aspx">
<img src="images/layout/exportsatdubai.jpg" class="img-responsive" width="900" title="" alt="" rel="a" />
</a>
<a href="http://expogr.com/" target="_blank">
<img src="images/layout/777x282-africa-1.jpg" class="img-responsive" width="900" title="" alt="" rel="a" />
</a>
<a href="addlisting.aspx">
<img src="images/layout/becomeAMember.jpg" class="img-responsive" width="900" title="" alt="" rel="a" />
</a><a href="dubaiexhibitions.aspx">
<img src="images/layout/dubaiexportersexhibitions.jpg" class="img-responsive" width="1000" title="" alt=""
rel="a" />
</a>
</div>
Css:
#gallery
{
position: relative;
height: 282px;
}
I wanted to make this div responsive using Bootstrap grid system. I am confused with div ie. How to apply grid system on div?
<div class="row">
<div class="col-sm-12">
<div class="gallery">
------contents------
</div>
</div>
</div>
Is it like this? I am new to Bootstrap. I just wanted to know how to apply grid system to div.
You can use the bootstrap grid like this.
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="aboutus.aspx">
<img src="images/layout/exportsatdubai.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="http://expogr.com/" target="_blank">
<img src="images/layout/777x282-africa-1.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="addlisting.aspx">
<img src="images/layout/becomeAMember.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="dubaiexhibitions.aspx">
<img src="images/layout/dubaiexportersexhibitions.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
</div>
</div>
You can follow this link for further details. Bootstrap Grid
A general way to use grid system is
<div class="container">
<div class="row">
<div class="col-sm-3">Content1</div>
<div class="col-sm-3">Content2</div>
<div class="col-sm-3">Content3</div>
<div class="col-sm-3">Content4</div>
</div>
</div>
Every column will have equal width and it will act responsive. You don't need to set height or width of divs inside these columns unless you intentionally want it. If you can provide more details what exactly do you want , i can try to help more.
you can use the grid system of 12 spans and as many rows as you want as you have different spanning of images for different rows like this:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12"></div>
<a href="aboutus.aspx">
<img src="images/layout/exportsatdubai.jpg" class="img-responsive" alt=""/>
</a>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">...</div>
<div class="col-xs-6 col-md-6">...</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">...</div>
<div class="col-xs-6 col-md-6">.....</div>
</div>
.....
.....
and so on
</div>
I have the following code
<% include partials/header %>
<div class="container">
<header class="jumbotron">
<div class="container">
<h1>Welcome to YelpCamp!</h1>
<p>View our handpicked campgrounds from all over the world!</p>
<p><a class="btn btn-primary btn-large" href="/campgrounds/new">Add New Campsite</a></p>
</div>
</header>
<div class="row text-center" >
<% campgrounds.forEach(function(campground){ %>
<div class="col-lg-3 col-md-4 col-xs-6 img-thumbnail p-0 ">
<img class="img-fluid" src="<%= campground.image %>">
<caption> <%= campground.name %> </caption>
</div>
<% }) %>
</div>
Back
</div>
<% include partials/footer %>
I'm reading from a campgrounds list and adding them to a Bootstrap grid.
However, the elements have no spacing between them. In Bootstrap 3 those gaps were automatic when using thumbnail (not available in 4).
If I add a margin mx-3, for example, to
`class="col-lg-3 col-md-4 col-xs-6 img-thumbnail"`
this is added to the total width and the lest item is displaced.
How can I add spacing between columns?
Bootstrap 4 can also give you automatic spacing. Assuming you use the right components for your needs.
The right component in your case would be the figure component. With the classes figure-img img-thumbnail applied to the images.
And for image captions, you should use these (instead of what you tried to use):
<figcaption class="figure-caption">Your Image Caption</figcaption>
The justify-content-center class on the row will center the thumbnails if you happen to have an uneven number of them or if you decide to add col-md-4 to the columns.
Click "run code snippet" below and expand to full page for testing:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<header class="jumbotron pl-5">
<h1>Welcome to YelpCamp!</h1>
<p>View our handpicked campgrounds from all over the world!</p>
<p><a class="btn btn-primary btn-large" href="/campgrounds/new">Add New Campsite</a></p>
</header>
<div class="row justify-content-center text-center">
<div class="col-6 col-lg-3">
<figure class="figure">
<img src="https://placeimg.com/800/400/animals" class="figure-img img-thumbnail">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
</div>
<div class="col-6 col-lg-3">
<figure class="figure">
<img src="https://placeimg.com/800/400/people" class="figure-img img-thumbnail">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
</div>
<div class="col-6 col-lg-3">
<figure class="figure">
<img src="https://placeimg.com/800/400/tech" class="figure-img img-thumbnail">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
</div>
<div class="col-6 col-lg-3">
<figure class="figure">
<img src="https://placeimg.com/800/400/arch" class="figure-img img-thumbnail">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
</div>
</div>
</div>
Also: You should avoid nesting Bootstrap containers unless absolutely necessary which is almost never the case.
I am currently trying to use Bootstrap to get two columns: One width 1/3 size and one with 2/3 size.
What I have is a container, and in it a row:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
asfas asijnafninasifn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn
</div>
<div class="col-md-8">
<img id="Image-Maps-Com-image-maps-2017-08-25-161100-img" src="image.png" alt="" usemap="#image-maps-2017-08-25-161100" width="6460" height="3455" border="0" class="map" />
<map id="ImageMapsCom-image-maps-2017-08-25-161100" name="image-maps-2017-08-25-161100"></map>
</div>
</div>
</div>
So the expected result for me (in my understanding) would be 1/3 of the page with the text and linebreaks and 2/3 (on the right side) would be the image with the image-map on it.
But: the result is both underneath, so in one line there is this thex text (within col-md-4) and on the next line there is the image (within col-md-8). Where is the problem?
Info: My viewport is big enough and even changing is to xs doesn't change the result.
As written in your comments, this DOES work:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
asfas asijnafninasifn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn
</div>
<div class="col-md-8">
<img id="Image-Maps-Com-image-maps-2017-08-25-161100-img" src="https://upload.wikimedia.org/wikipedia/commons/3/33/Su%C3%ADno_alta.jpg" alt="" usemap="#image-maps-2017-08-25-161100" width="6460" height="3455" border="0" class="map" style="max-width: 100%; height: auto !important" />
<map id="ImageMapsCom-image-maps-2017-08-25-161100" name="image-maps-2017-08-25-161100"></map>
</div>
</div>
</div>
For small screen use col-sm-4 and col-xs-4 because col-md-4 taking 992px and up screen. One important thing for image, give img-reponsive class.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
asfas asijnafninasifn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn
</div>
<div class="col-md-8 col-sm-8 col-xs-8">
<img id="Image-Maps-Com-image-maps-2017-08-25-161100-img" src="https://dummyimage.com/600x200/000/fff&text=sample+image" alt="" usemap="#image-maps-2017-08-25-161100" border="0" class="map img-responsive" />
<map id="ImageMapsCom-image-maps-2017-08-25-161100" name="image-maps-2017-08-25-161100"></map>
</div>
</div>
</div>
I have 3 images within a row. Between each column, i'd like to add an arrow pointing to the next image.
How can I do this, while keep the existing images centered (so the middle one is in the middle of the page), and so it degrades nicely on smaller screens (disappears for instance)?
html:
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="col-sm-12" style="text-align: center;">EASY TO USE</h1>
<hr>
</div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-3">
<img class="img" src="../assets/img/indevice/step1htc.mini.24.png" height="350px" width="240px" alt="">
</div>
<div class="img col-sm-1"><img class="img" src="../assets/img/arrow.png" alt=""></div>
<div class="col-sm-3">
<img class="img" src="../assets/img/indevice/step2htc.mini.24.png" height="350px" width="240px" alt="">
</div>
<div class="img col-sm-1"><img class="img" src="../assets//img/arrow.png" alt=""></div>
<div class="col-sm-3">
<img class="img" src="../assets/img/indevice/step3htc.mini.24.png" height="350px" width="240px" alt="">
</div>
</div>
</div>
</body>
</html>
EDIT: For clarification, I want to add arrows between the existing images in the html code above. The html/css above is already centered. Howver, i'd like to add 2 arrows between the 3 existing images.
EDIT: Please see this image to understand what I mean: http://imgur.com/YT2hnw4
EDIT: Changed html to show a full example, including css call.
Here you go
<div class="container">
<div class="row">
<h1 class="centered" style="text-align: center;">EASY TO USE</h1>
<hr>
<div class="col-md-3" style="margin-left:4.17%;">
<img class="img" src="image" height="350px" width="240px" alt="">
</div>
<div class="img col-md-1">
<img class="img" src="../assets/img/arrow.png" alt="">
</div>
<div class="col-md-3">
<img class="img" src="image" height="350px" width="240px" alt="">
</div>
<div class="img col-md-1">
<img class="img" src="../assets//img/arrow.png" alt="">
</div>
<div class="col-md-3">
<img class="img" src="image" height="350px" width="240px" alt="">
</div>
</div>
</div>
All i did is removed the extra col-md-1 class and instead added the margin of the same equivalance to the 1st element so that it stay in the center.