I'm facing a bit of a challenge trying to display 3 images in a row with a responsive layout using bootstrap. It seems like it should be easy, but I find it tricky.
My goal is to create a page on my website that looks similar to this example - https://i.sstatic.net/AnmEr.png
I want my website's gallery page to achieve something like what you see here:
If you need help creating a site structure with bootstrap, check out this helpful resource: https://www.w3schools.com/bootstrap/
.image-box img {
width: 100%;
height: auto;
object-fit: cover;
}
.image-box {
max-height: 235px;
overflow: hidden;
height: 100%;
margin: 50px 0;
}<html><head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head><body><div class="container">
<div class="row">
<div class="col-md-4">
<div class="image-box">
<img src="https://images.unsplash.com/photo-1469317835793-6d02c2392778?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" alt="">
</div>
</div>
<div class="col-md-4">
<div class="image-box">
<img src="https://images.unsplash.com/photo-1452827073306-6e6e661baf57?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=967&q=80" alt="">
</div>
</div><div class="col-md-4">
<div class="image-box">
<img src="https://images.unsplash.com/photo-1469317835793-6d02c2392778?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" alt="">
</div>
</div>
</div>
</div></body></html>My design using Bootstrap 4.0.0 scripts and stylesheets.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three images</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.col-sm-4 img{width:100%;border:2px solid #fff;outline:2px solid #000}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4"><img src="image-link-1"></div>
<div class="col-sm-4"><img src="image-link-2"></div>
<div class="col-sm-4"><img src="image-link-3"></div>
</div>
</div>
</body>
</html>
Above is the complete file to copy/paste, below is the snippet for running and testing:
.col-sm-4 img{width:100%;border:2px solid #fff;outline:2px solid #000}
.col-sm-4 img{margin-top:20px;margin-bottom:20px}/* just to make the snippet clearer */Include necessary links and scripts
Use appropriate classes like col-xs-4 if needed.
Render images within columns for a responsive layoutLooking to create a rating system using Angular. The square should turn green if there are more likes than dislikes, and red vice versa (check out the stackblitz link for reference). Check it out here: View demo I've tried debugging my code with con ...
I'm struggling to implement a mobile menu for my website. After adding the necessary code, when I view the page in a mobile viewport, all I see are two sets of periods ("..."). However, unlike in the code snippet provided, the list does appear on the ...
I'm in the process of creating a top navigation bar with dropdown functionality that appears when hovering over certain navigation items. Here's how it currently looks: $(document).ready(function(){ $('[data-toggle="tooltip"]').t ...
<div class="profile"> <img src="image/JaeHeadShot.jpg" alt="Head Shot"/> <h1> Jae Hong </h1> </div> .profile{ border: 2px solid rgba(0,0,0,0.3); text-align:center; padding: 30px; } img.profile{ width:423; height ...
I recently designed a basic website and everything was running smoothly until I decided to insert a new ul division in the HTML page as a spacer between two elements: <div> <ul> <li><a></a></li> </u ...
On my webpage, I have draggable and resizable DIVs that I want to save the state of so they remain the same after a page refresh. This functionality is seen in features like Facebook chat where open windows remain open even after refreshing the page. Can ...
What I am searching for: file.txt: Name: John email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abcdefghij">[email protected]</a> Here is my code snippet: <?php $myFile = "file.txt"; $txt = &apos ...
It seems like there is an issue in Safari 9.1.3 where the border width on elements with a specific combination of styles is causing unexpected outcomes. Essentially, I am using a transform on an absolutely positioned element to achieve horizontal centering ...
My mat-table contains data and checkboxes. The checkboxes should only be checked when the element.select property is true. However, when I use [(ngModel)]="element.select", all the checkboxes end up getting checked. Below you can find the code snippet: &l ...
Let's consider this scenario sample.html <script> function identifyCaller() { console.log(???); // what should be placed here to determine the caller? } <iframe src="frame1.html"></iframe> <iframe src="frame2.html"></if ...
Is there a way to incorporate this JavaScript into the "price" text value? Below is the code snippet: <script> function myFunction() { var x = document.getElementById('car-select')[document.getElementById('car-selec ...
My objective is: https://i.sstatic.net/UIPsq.png However, the current layout appears like this (the issue isn't the bottom margins, I've already decided they should be smaller): https://i.sstatic.net/GbLFE.png The problem lies in the gutter s ...
Can you explain why IE11 incorrectly sizes a fixed positioned element when its parent has a relative position with specific dimensions, border-radius, and hidden overflow? In this scenario, the fixed element ends up taking on the size of its parent instead ...
Within my React app, there is a text input field situated inside a form that displays in its default gray color before any interaction: https://i.stack.imgur.com/FdNos.png Once the input field is clicked on, it changes to white as shown here: https://i.s ...
My current div structure is as follows: <div class="class-a" [ngClass]="{'class-b': !person.something}"> However, I now need to add an additional condition... I want the div to have class-a if one condition is met, class-b if another con ...
Check out this example of an HTML email <div style="width:650px;"> <div class="begining"> <p> Dear <span>' . $name . '</span><br/>Thank you for your booking </p> & ...
I am currently working on updating a row using jQuery Ajax. Whenever the Edit button is clicked, it switches the <tr> element to <input type='text'>. I have utilized the .Change method which triggers successfully, but my goal is to r ...
I have successfully created an iframe using regular javascript. Inside the iframe is a Jquery function along with JQuery itself and it functions correctly within the iframe. However, I am now looking to execute this function from the parent page instead of ...
I am working with the following snippet of HTML code: <select id="c0" name="countries" onchange="show_other()"> <option value="1">something</option> <div id="c1"> </div> </select> Within this code, I have the i ...
I am currently working on a Groovy script that involves parsing HTML from a Swedish website, and I need to extract the special characters Å, Ä, and Ö. Although this is just an example and not the actual site I am scraping, the problem remains the same. ...