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>
Related
I'm making a preloader and i'm struggling with the rows. I want my grey rectangle to be filled with 3 rows of 33% height.
Then I need:
in the row 1, a svg logo
in the row 2, a loader
in the row 3, some text
Here's what I want:
Here's my code :
#loader-modal {
width: 100vw;
height: 100vh;
position: fixed;
background-color: rgba(0,0,0, 0.9);
z-index: 100000;
}
.rectangle-chargement {
width: 25%;
height: 50%;
top: 25%;
left: 37.5%;
position: absolute;
background-color: #E2E2E2;
border-radius: 0.15rem;
}
<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">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<div id="loader-modal">
<div class="d-flex justify-content-center mx-auto rectangle-chargement">
<div class="container">
<div class="row">
<div class="col-12">
<!--<svg width="100%" >My SVG</svg>-->
</div>
</div>
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-center" id="loader-circulaire">
<div id="chargement-loader"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<p class="d-flex justify-content-center mx-auto patienter-chargement">Veuillez patienter ...</p>
</div>
</div>
</div>
</div>
</div>
Do you guys know a cleaner way to do it ? (and a working one of course)
You can certainly hard code the heights, but since you ask if there is any cleaner way to do it, my opinion is to use flexbox with column flow direction, and let flexbox children grow by setting their flex-grow to 1.
This way doesn't require you to hard code the height for each row, and allows you to have as many rows as you "want".
<div class="rectangle-chargement d-flex flex-column">
<div class="rectangle-chargement-row flex-grow-1">
Logo
</div>
<div class="rectangle-chargement-row flex-grow-1">
Loader
</div>
<div class="rectangle-chargement-row flex-grow-1">
Some text
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/sngkbLcq/32/
If you want to "centralize" the content in each row, you can mark each row as flexbox as well, and set its justify-content and align-items to center.
<div class="rectangle-chargement d-flex flex-column">
<div class="rectangle-chargement-row flex-grow-1
d-flex justify-content-center align-items-center">
Logo
</div>
<div class="rectangle-chargement-row flex-grow-1
d-flex justify-content-center align-items-center">
Loader
</div>
<div class="rectangle-chargement-row flex-grow-1
d-flex justify-content-center align-items-center">
Some text
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/sngkbLcq/36/
I'm trying to accomplish what has been straightforward in the world of pixels before I jumped into a responsive design. I'm using bootstrap 4 and want a very simple layout. It is comprised of
navbar
main container-fluid div
div using 85% of main div
div using 15% of main div
I've found lots of examples showing how simple this is, but it just isn't working for me. Here's my html:
<div class="container-fluid h-100 d-flex flex-col" id="mainWindow" >
<!-- div container for the map. -->
<div class="row h-75" style="background-color: yellow;">
map<br>
</div>
<div class="row h-25" style="background-color: green;">
chat<br>
</div>
</div> <!-- mainWindow -->
But what I see is
navbar
No yellow div and a small piece of the green div
What am I missing?
Is this you want ??
html,
body {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid d-flex h-100 flex-column">
<div class="row h-75" style="background-color: yellow;">
<div class="col-12">map</div>
</div>
<div class="row h-25" style="background-color: green;">
<div class="col-12">chat</div>
</div>
</div>
I want to create a grid system similar to this page using Bootstrap 4. I want to create a square box in a col-sm-4 and a longer rectangle next to it in a col-sm-8 of the same height. I'm having trouble creating a square box that is responsive. How can I do this?!
Current code:
<div class="container">
<div class="row section-box">
<div class="col-sm-4 text-center description-text">
first square box.
</div>
<div class="col-sm-8 description-image">
second rectangle box.
</div>
</div>
</div>
Things I've tried:
Using jQuery to set the height. This doesn't work with padding on the div, and isn't responsive.
This link where I managed to get a square box with a rectangle next to it, but as soon as text was added it was no longer a square.
You could use bootstrap 4 embed-responsive class and it's done
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row m-5">
<div class="col-1">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-1</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-2">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-2</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-3">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-3</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-4">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-4</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-5">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-5</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-6">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-6</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-7">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-7</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-8">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-8</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-9">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-9</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-10">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-10</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-11">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-11</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-12">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-12</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>
eventually, a pseudo element could help :
.col-sm-4:before,
.col-sm-8:before {
content: '';
width: 0;
}
.col-sm-4:before,
.col-sm-8:before,
.ib {
white-space: normal;
display: inline-block;
vertical-align: middle;
max-width: 100%;
}
.col-sm-4:before {
padding-top: 100%;
/* makes expand to a square */
}
.col-sm-8:before {
padding-top: 50%;
/* makes a rectangle half the height of a square */
}
[class^="col"] {
white-space: nowrap;
box-sizing: border-box;
box-shadow: inset 0 0 0 5px white;
padding: 0;
text-align: center;
background: url(http://lorempixel.com/400/200) tomato;
background-size: cover;
}
.row {
color: white;
text-shadow: 0 0 black, 0 0 2px black;
}
.col-sm-4 {
background: gray;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row section-box">
<div class="col-sm-4 text-center description-text p-0">
first square box.
</div>
<div class="col-sm-8 description-image p-0">
second rectangle box.
</div>
</div>
<div class="row section-box">
<div class="col-sm-8 description-image p-0">
<div class="ib">second<br> rectangle box.</div>
</div>
<div class="col-sm-4 text-center description-text p-0">
first square box.
</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>
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>