Problem
So, I am trying to fit 3 images in a row. Every Image has a different dimension.
So, I tried adding the thumbnail class hoping that it would make all images the same size but it only added the border but never changed the image size.
What I want
I want all images the same size.
Code
(The code is for one image since all images have the same code)
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo1423034816855245e5820ff8cdpr=1&auto=format&fit=crop&w=1500&h=2000&q=80&cs=tinysrgb&crop="alt="Something in france!">
</div>
</div>
you could do it something like this, apply width: 100%; and height: auto; to img
see fiddle for working demo
img{
max-width: 100%;
border: 1px solid red;
width: 100%;
height: 200px; // adjust it based on your need
}
<div class="row">
<div class="col-md-4 col-sm-4">
<img src="http://placehold.it/500x150" />
</div>
<div class="col-md-4 col-sm-4">
<img src="http://placehold.it/100x50" />
</div>
<div class="col-md-4 col-sm-4">
<img src="http://placehold.it/200x150" />
</div>
</div>
Some images are affected differently with the thumbnail tag. That is because some images have a larger width than the height (ex: 480 x 670).
Example
<html lang="en">
<head>
<title>Image Gallery</title>
<link href="bootstrap.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="Image Gallery.css">
</head>
<body>
<div class="row">
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1423034816855-245e5820ff8c?dpr=1&auto=format&fit=crop&w=1500&h=2000&q=80&cs=tinysrgb&crop=" alt="Something in france!">
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1441790844170-ec5dc89c7eae?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="A sad monkey">
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1464039397811-476f652a343b?dpr=1&auto=format&fit=crop&w=1500&h=1003&q=80&cs=tinysrgb&crop=" alt="A forest!">
</div>
</div>
</div>
</div>
<script src="bootstrap.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</body>
Related
I want to resize and rounded the image in a bootstrap-5 card but i don't know how to do that using bootstrap-5 or css3, I want the image to be smaller and rounded on a center of this card.
My Template:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<div class="container">
<div class="row justify-content-center">
<div class="col">
<div class="card text-center">
<img class="rounded" src="https://3.imimg.com/data3/LE/LH/GLADMIN-37134/school-badges-500x500.jpg" alt="">
<h1 class="text-primary">{{board.school_name}}</h1>
<p>{{board.school_address}}, {{board.location}}</p>
<p>P O Box: {{board.p_o_box}}</p>
</div>
</div>
</div>
</div>
your image is a bad choice as it has a white border around the actual graphic. but see here. i added a .thumb class with a width/height. a align-items-center on the .row and a .rounded-circle on the image.
.thumb {
width: 100px;
height: auto; // if the image is square, this will be 100px automatically
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<div class="container">
<div class="row justify-content-center">
<div class="col">
<div class="card align-items-center">
<img class="rounded-circle thumb" src="https://dummyimage.com/300x300/000/fff.jpg" alt="ff">
<h1 class="text-primary">{{board.school_name}}</h1>
<p>{{board.school_address}}, {{board.location}}</p>
<p>P O Box: {{board.p_o_box}}</p>
</div>
</div>
</div>
</div>
I am working with bootstrap. There for I am using the grid system as shown in the following code snippet:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="background-color: aliceblue;">
<div class="col-lg">
First
</div>
</div>
<div class="row" style="background-color: red;">
<div class="col-lg">
Second
</div>
</div>
So I want the first row to fill 90% of the screen and the second row 10%. How can I do that?
Thanks for your help
specify viewport as height. viewport is the part of the website that is visible to the browser window
<div class="row" style="background-color: aliceblue; height: 90vh;"> </div>
<div class="row" style="background-color: red; height: 10vh;"> </div>
First, set the height of the Body and the Container (parent of rows) to 100%.
html, body {
height: 100%;
}
.fill {
min-height: 100%;
height: 100%;
}
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<body>
<div class="container-fluid fill">
<div class="row-fluid vh-40" style="background-color: blue;">
<div class="col-lg">
d90
</div>
</div>
<div class="row-fluid vh-10" style="background-color: red;">
<div class="col-lg">
d10
</div>
</div>
</div>
</body>
More informations :
https://getbootstrap.com/docs/4.4/layout/grid/
https://getbootstrap.com/docs/4.4/utilities/sizing/
In responsive, use vh (height relative to the viewport).
Good continuation.
_Teddy_
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 two bootstrap columns with col-xs-8 and col-xs-4. Both contain image of same height. When I try to reduce the width of browser the second image is becoming shorter compare to first. I want both in same height. Code is shown below. Thanks in advance.
.offer-row .col-xs-8{padding-right: 8px;}
.offer-row .col-xs-4{padding-left:7px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row offer-row">
<div class="col-xs-8">
<img src="http://via.placeholder.com/825x500" class="img img-responsive">
</div>
<div class="col-xs-4">
<img src="http://via.placeholder.com/410x500" class="img img-responsive">
</div>
</div>
The size will reduce, as the screen size reduces, for preventing that you have to write media-query and make your web page responsive.For example in how to write media query, go through given link.
How to write media query for maiking reponsive websites
This will make height fixed.
.img-fix{
max-width:100%;
height:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="row offer-row">
<div class="col-xs-8">
<img src="http://via.placeholder.com/825x500" class="img img-fix">
</div>
<div class="col-xs-4">
<img src="http://via.placeholder.com/410x500" class="img img-fix">
</div>
</div>
</body>
I solve the problem by adding the following css
.row-eq-height {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}.offer-row .col-sm-4{padding-left:7px;overflow-y: hidden;}
.offer-row .col-sm-4 img{min-height:100%; }
.offer-row .col-xs-8{padding-right: 8px;}
.offer-row .col-xs-4{padding-left:7px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="row offer-row row-eq-height">
<div class="col-xs-8">
<img src="http://via.placeholder.com/825x500" class="img img-fix">
</div>
<div class="col-xs-4">
<img src="http://via.placeholder.com/410x500" class="img img-fix">
</div>
</div>
</body>
I am trying to make below layout using bootstrap grid. There is a container <div class="row"> and half width two divs in that (<div1> and <div2>). The <div1>'s height would be changeable as content size. And again, the <div2> should have two child divs(<div2-1>, <div2-2>) that half height of <div1> each. How can I make this layout with Bootstrap grid?
I tried like that, but not working. :
<div class="row">
<div class="col-md-6" id="div1">
Some content...
</div>
<div class="col-md-6" id="div2">
<div id="div2-1" style="height:50%;">
</div>
<div id="div2-2" style="height:50%;">
</div>
</div>
</div>
Try this...
div {
border: 1px solid black;
}
#div2-1,
#div2-2 {
height: 50%;
border: 1px solid red !important;
}
#div1,#div2{
height:50px;
}
#div2.col-xs-6
{
padding:0px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-6" id="div1">
Some content...
</div>
<div class="col-xs-6" id="div2">
<div id="div2-1">
</div>
<div id="div2-2">
</div>
</div>
</div>
</div>
Using Bootstrap 4
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-6 bg-primary" style="min-height: 500px;"></div>
<div class="col-md-6">
<div class="row h-100 flex-column">
<div class="col-md-6 mw-100 bg-danger"></div>
<div class="col-md-6 mw-100 bg-success"></div>
</div>
</div>
</div>
<style>
/* just for displaying correctly without content */
[class*='col'] {
min-height: 200px;
}
</style>
you can use jQuery if you want height of colunmn to be auto and also the inside divs to be half of it.
But you might want to keep the divs overflow-y to auto if one div has content more than it can hold.
$(document).ready(function() {
var totHeight = $("#col").height();
$("#div-1").css("height", totHeight / 2);
$("#div-2").css("height", totHeight / 2);
})
body * {
color: #ccc;
}
#div-1,
#div-2 {
overflow-y: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="row">
<div class="col-sm-6" id="col">
<div id="div-1" style="background-color:red;">
Content
<br>Content
</div>
<div id="div-2" style="background-color:blue;">
Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
</div>
</div>
<div class="col-sm-6"></div>
</div>
</body>
hello try the below fiddle hope it helps also add the custom style if you want to
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6">
<div id="navigation">
<label>side Column</label>
</div>
</div>
<div class="col-xs-6 col-sm-6">
<div id="text1">
<label>First Divider</label>
</div>
<div id="text2">
<label>second Divider</label>
</div>
</div>
</div>
</div>
fiddle demo
//Try this one...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<section>
<div class="col-md-12 bg-warning" border="1">
<div class="row" border="1">
<div class="col-md-6" border="1">
<h3>First Column</h3>
</div>
<div class="col-md-6" border="1">
<div class="row bg-danger">
<h3>Second Column First Row<h3>
</div>
<div class="row bg-success">
<h3>Second Column Second Row</h3>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="shared/jquery.js" type="text/javascript"></script>
<script src="shared/shiny.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="shared/shiny.css"/>
</head>
<style>
.cn {
background-color: antiquewhite;
height: 50%;
top: 50%;
position: relative;
}
.video-player-container{
height: 500px;
background-color: gray;
}
.video-container{
min-height: 350px;
}
</style>
<body>
<h1>HTML UI</h1>
<div class="col-lg-12 video-player-container">
<div class="cn"></div>
</div>
</body>
</html>
Suprisingly super easy with Bootstrap 5 flex
Probably i am missing something
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row">
<div class="col-md-6 bg-primary" style="min-height: 500px;">Some main content</div>
<div class="col-md-6">
<div class="row h-100 flex-column">
<div class="flex-fill bg-danger">Part 1</div>
<div class="flex-fill bg-success">Part 2</div>
</div>
</div>
</div>