I am trying to build a responsive website.
and I want all of my divs to always be in the middle.
for some reason when I use flex attribute in my container the bootstrap card go offscreen:
any suggestions on how to handle it right?
Normal Screen
Normal
Moblie Screen :(
Mobile
My HTML CODE
<body>
<div class="container">
<div class="d-flex justify-content-center align-items-center">
<form action="" method="POST">
{% csrf_token %}
<div id="smain">
<h1> Lets Start</h1>
<div class="card-deck">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="{% static "/images/pc.jpg" %}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title bulk of the
card's content.</p>
Go somewhere
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="{% static "/images/dance.png" %}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example
text to build on the card title and makecontent.
</p>
<a href="#" class="btn btn-primary">Go
somewhere</a>
</div>
</div>
</div>
</div>
</form>
</div>
CSS
body {
background-image: url("{% static "images/unnamed1.jpg" %}");
background-size: cover;
background-repeat: no-repeat;
}
html,
body {
height: 100%;
}
.container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
Use margin on the children instead of justify-content: center; on the parent.
html,
body {
height: 100%;
}
.container {
height: 100%;
display: flex;
}
.container>div{
margin:auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class="container">
<div class="d-flex justify-content-center align-items-center">
<form action="" method="POST">
<div id="smain">
<h1> Lets Start</h1>
<div class="card-deck">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://picsum.photos/300/500" images="" pc.jpg "=" " %}"="" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title bulk of the card's content.</p>
Go somewhere
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://picsum.photos/300/500" images="" dance.png "=" " %}"="" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and makecontent.
</p>
<a href="#" class="btn btn-primary">Go
somewhere</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
Related
I have simple section with card with image and title. How can I fix image size inside the card, so it stays the same no matter what is the actual size of the original image?
<section class="page-section bg-primary">
<div class="container mx-auto mt-4">
<h2 class="page-section-heading text-center text-uppercase text-secondary mb-5 mt-5">Card section</h2>
<div class="row">
<div class="col-md-4">
<div class="card" style="width: 18rem;">
<img src="~/images/img.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
</div>
</div>
</div>
</div>
</div>
Just put the Width of the image 100% so it will take 100% of its father (card) width or you can also use the max-width exp:
<img style="max-width: 100%;"
Inside the tag
<img src="~/images/img.jpeg" class="card-img-top" alt="..." style="width:100%;">
or with css in a class:
css:
.myimage{
width:100%;
}
<img src="~/images/img.jpeg" class="card-img-top myimage" alt="...">
You can size between 1% - 100% to the parent div/tag.
I am using flex to contain cards using bootstrap but the cards are not shown to the full width of the screen. They are stacked up on the left half of the screen.
The HTML file is this:
<section class="projects" id="projects">
<div class="services-cards">
<div class="card" style="width: 14rem;">
<img class="card-img-top" src="images/undraw_develop_app_re_bi4i.svg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
Go somewhere
</div>
</div>
<div class="card" style="width: 14rem;">
<img class="card-img-top" src="images/undraw_for_review_eqxk.svg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
Go somewhere
</div>
</div>
<div class="card" style="width: 14rem;">
<img class="card-img-top" src="images/undraw_Success_factors_re_ce93.svg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
Go somewhere
</div>
</div>
</div>
</section>
And the css is as
.card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
padding:10px;
}
.services-cards{
display: flex;
flex-direction: row;
margin-top: 20px;
margin-left:30px;
margin-bottom: 90px;
justify-items:auto;
}
What am I doing wrong? I'm expecting that the content of the flexed (cards in this case) will be full width of the screen.
Right now it looks like this
enter image description here
Just use .justify-content-between or .justify-content-around on .service-cards. Between will put the first and last at the far edges and evenly distribute the items between them, while around will make all the spaces on outsides and between equal.
<section class="projects" id="projects">
<div class="services-cards justify-content-between">
{card} {equal-space} {card} {equal-space} {card}
</div>
</section>
Or
<section class="projects" id="projects">
<div class="services-cards justify-content-around">
{equal-space} {card} {equal-space} {card} {equal-space} {card} {equal-space}
</div>
</section>
I want to give image width and height(300px;300px;) in card:
<!-- Card Start From Here -->
<div class="card" style="width: 35rem;">
<img class="card-img-top" src="/demo/img/1.jpeg" alt="Card image cap" style="width:35rem;height:20rem;"/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<!-- Card Start From Here -->
The output has shrunk:
If I remove below line of code then the image will be so long but does not shrink:
style="width:35rem;height:20rem;"
I have tried:
object-fit:cover;(Check all properties like fill, scale-down)
Also tried some CSS:
<style>
.clsAutofit{
height:300px;
width:300px;
}
.clsImg{
max-width:100%;
max-height:100%;
}
</style>
<div class="clsAutofit">
<img src="/demo/img/1.jpeg" class="clsImg" />
</div>
<!-- This also not working in card -->
I also tried some properties:
<style>
img.one {
display: block;
object-fit: contain;
max-width:500px;
max-height:280px;
width: auto;
height: auto;
}
img.two {
object-fit: contain;
width: 535px;;
height: 535px;
}
.box {
width: 30%;
height: 200px;
border: 5px dashed #f7a239;
}
.containerTY {
width: 60%;
height: 500px;
}
.containerTYZ {
max-width: 100%;
}
.thumbnail {
width: 500px;
height: 400px;
}
.img4R {
width: 100%;
height: auto;
max-width: 50vw;
}
</style>
I tried but not able to make it yet.
Any idea or suggestion would be welcome.
your approach is okay.problem is,bootstrap class attributes tend to have !important.
so place your custom style.css under your bootstrap.css so it gets more priority than bs,
then use:
.my-image{
height : 300px !important;
width: 300px !important
}
bind the image with class .my-image, clear inline css styles,and check this.
.clsImg{
max-width:100%;
width: 100%;
height: auto;
object-fit:cover;
}
Using img-fluid for image and you also use w-25 w-50 w-100 for lg,md,sm etc devices
#media (min-width: 768px) {
.w-md-50{width:50% !important;}
}
#media (min-width: 992px) {
.w-lg-75{width:75% !important;}
}
<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">
<div class="row pt-5 w-100 mx-auto">
<!-- Card Start From Here -->
<div class="col-lg-4 col-md-6 col-sm-6 mb-4">
<div class="card p-4">
<div class="row">
<div class="col-6">
<img class="card-img-top img-fluid w-lg-75 w-md-50 w-100 text-center" src="https://i.ibb.co/Xyk1kJy/1-1.jpg" alt="Card image cap"/>
</div>
<div class="col-12">
<div class="card-body px-0 pb-0">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
<!-- Card Start From Here -->
<div class="col-lg-4 col-md-6 col-sm-6 mb-4">
<div class="card p-4">
<div class="row">
<div class="col-6">
<img class="card-img-top img-fluid w-lg-75 w-md-50 w-100 text-center" src="https://i.ibb.co/Xyk1kJy/1-1.jpg" alt="Card image cap"/>
</div>
<div class="col-12">
<div class="card-body px-0 pb-0">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
<!-- Card end From Here -->
<!-- Card Start From Here -->
<div class="col-lg-4 col-md-6 col-sm-6 mb-4">
<div class="card p-4">
<div class="row">
<div class="col-6">
<img class="card-img-top img-fluid w-lg-75 w-md-50 w-100 text-center" src="https://i.ibb.co/Xyk1kJy/1-1.jpg" alt="Card image cap"/>
</div>
<div class="col-12">
<div class="card-body px-0 pb-0">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
<!-- Card end From Here -->
</div>
</div>
I've created a custom "product card" for my site, and I want the images to take the parent's full width and height, regardless of the image's dimensions. I have tried max-width min-width max-height min-height and none seem to work. I can't think of any other solution. I'm attaching an image of what I'd like and what I'm achieving now.
https://codepen.io/paulamourad/pen/MdxedG
If you want to maintain aspect ratio and don't mind cropping:
.product-img-container {
width: 100%;
height: 260px;
display: inline-block;
position: relative;
overflow:hidden; //This will crop off image portions that overflow the container
}
.card-img-top {
width: 100%; /*If you specify only width, height will be calculated automatically
and aspect ratio is maintained. Similarly, if only height is specified, width is
calculated automatically */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius: 0px;
}
You can use the top and bottom in the .card-img-top to position the image.
It seems you are making a simple layout more complex.
You don't need to use position properties in this case. This will make simple layout more complex.
There are different scenarios how to use image more efficiently in webpages, like considering their height-width, and aspect ratio as well.
I have created a Snippet, hope so you will find it useful.
Bootstrap Cards Snippet
For dynamic product card images use the following CSS properties:
.card-img-top {
height: 100px; /* Change it based upon requirement */
object-fit: cover;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<h2>Bootstrap Cards Varation: </h2>
<h3>Same Aspect Ratio ―</h3>
<div class="row mb-5">
<div class="col-md-4">
<div class="card">
<img src="https://source.unsplash.com/random/1920x1080" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://source.unsplash.com/random/1920x1080" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://source.unsplash.com/random/1920x1080" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
<!-- row -->
<h3>Same height for image (Suitable for dynamic different size images) ―</h3>
<style>
.cstm-height-card .card-img-top {
height: 100px;
object-fit: cover;
}
</style>
<div class="row mb-5 cstm-height-card">
<div class="col-md-4">
<div class="card">
<img src="https://source.unsplash.com/random/1200x900" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://source.unsplash.com/random/1500x800" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://source.unsplash.com/random/1400x700" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
<!-- row -->
<div class="row">
<div class="col-md-6">
<div class="card mb-3">
<div class="row no-gutters align-items-center">
<div class="col-md-4">
<img src="https://source.unsplash.com/random/600x800" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-3">
<div class="row no-gutters align-items-center">
<div class="col-md-4">
<img src="https://source.unsplash.com/random/600x800" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- row -->
</div>
Use a div with a background image. Set its height to 100%, background-position to center, and background size to cover.
.card-img-top {
height: 100%;
background-size: cover;
background-position: center;
}
Works in bootstrap cards, I forked your pen. https://codepen.io/Jason_B/pen/RmdoaQ
How to create this card grid inside container(Bootstrap 4)?
I doesn't understand how i can put text in container if text in div(card).
<section class="second__offers">
<div class="container">
<div class="card-group">
<div class="card text-black">
<img class="card-img-top" src="img/service-1.jpg" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card title</h3>
<h4 class="card-subtitle">Card subtitle</h4>
<p class="card-text">This is a simple Card example</p>
About
</div>
</div>
<div class="card text-black">
<img class="card-img-top" src="img/service-2.jpg" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a simple Card example</p>
About
</div>
</div>
<div class="card text-black">
<img class="card-img-top" src="img/service-3.jpg" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a simple Card example</p>
About
</div>
</div>
</div>
<div class="card-group">
...
</div>
</div>
</section>
example:
Use background-image: instead of img tag (add class to each card and in css and the fit background-image:)
To your comment make container take 100% of width use container-fluid instead of container and set in css:
.container-fluid{
padding:0!important;
margin:0!important;
}
https://jsfiddle.net/nhybo32s/10/
.face{
background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.body{
background-image: url(https://material.angular.io/assets/img/examples/shiba2.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.card {border:none!important}
.container-fluid{
padding:0!important;
margin:0!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<section class="second__offers">
<div class="container-fluid">
<div class="card-group">
<div class="card text-black face">
<div class="">
<h3 class="card-title">Card title</h3>
<h4 class="card-subtitle">Card subtitle</h4>
<p class="card-text">This is a simple Card example</p>
About
</div>
</div>
<div class="card text-black body">
<div>
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a simple Card example</p>
About
</div>
</div>
<div class="card text-black">
<div>
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a simple Card example</p>
About
</div>
</div>
</div>
<div class="card-group">
...
</div>
</div>
</section>