With Bootstrap 4, I am making a horizontal card for classified ad and want in the header to title of the ad to be on the left and price on the right. Using django template:
<section class="card">
<div class="row no-gutters">
<div class="col-sm-4">
<img src="{{ad.thumbnail.url}}" alt="" class="img fluid card-img ad-image-list">
</div>
<div class="col-sm-8">
<div class="card-body">
<header class="d-flex justify-content-between">
<h6>{{ad.title}}</h6>
<h6> {{ad.price}}$ </h6>
<hr>
</header>
<p class="card-text">{{ad.description}}</p>
</div>
</div>
</div>
</section>
I get this:
Why doesnt wanna apply <header class"d-flex justify-content-between"> ?
Because you're using <hr> in flex container and <hr> going to right. Just remove the hr inside header.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<section class="card">
<div class="row no-gutters">
<div class="col-sm-4">
<img src="https://picsum.photos/id/536/354" alt="" class="img fluid card-img ad-image-list">
</div>
<div class="col-sm-8">
<div class="card-body">
<header class="d-flex justify-content-between">
<h6>Title</h6>
<h6>Price</h6>
</header>
<hr>
<p class="card-text">{{ad.description}}</p>
</div>
</div>
</div>
</section>
Related
I'm trying to code an HTML5 landing page with bootstrap.
I'm dividing screen into 2 md-cols with an image in each column.
I want to put a text over each image and flipping effect on hover than brings 4 more logo images with links to external pages.
Below is what I got so far:
<main class="p-3 my-auto">
<div class="row">
<div class="col-md-6 mb-5">
<div class="imgContent w-100 p-1 bg-light rounded-3">
<img src="img/eye.jpg" class="img-fluid"/>
</div>
<div class="links">
<div class="row">
<div class="col-xs-2">logo1</div>
<div class="col-xs-2">logo2</div>
</div>
<div class="row">
<div class="col-xs-2">logo3</div>
<div class="col-xs-2">logo4</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="imgContent w-100 p-1 bg-light rounded-3">
<img src="img/joint.jpg" class="img-fluid"/>
</div>
<div class="links">
<div class="row">
<div class="col-xs-2">logo1</div>
<div class="col-xs-2">logo2</div>
</div>
<div class="row">
<div class="col-xs-2">logo3</div>
<div class="col-xs-2">logo4</div>
</div>
</div>
</div>
</div>
</main>
Any idea?
Thanks in advance
I have this layout made with bootstrap each witdth is 4 units
This is what im trying to achive
Basically I want last elements to stretch to fill.
If there were only four elements last one should be full width.
My attempt
I tried to add flex-fill and flex-grow-1 to each column but it doesn't seem to change anything.
Can I achive this effect whithout js?
Code
<div class="container">
<div class="d-flex justify-content-around row">
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">One</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Two</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Three</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Four</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Five</div>
</div>
</div>
</div>
</div>
</div>
Assuming you want the default columns to have width 4, like col-md-4, I can suggest the following approach:
Do not specify column width in the HTML and justify the content evenly:
<div class="container">
<div class="d-flex justify-content-evenly row">
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">One</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Two</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Three</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Four</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Five</div>
</div>
</div>
</div>
</div>
</div>
Then set the minimum size of all columns:
.my-2 {
flex-basis: 33.3%;
min-width: 33.3%;
}
Use equal-width utility of bootstrap. Divide the area in 2 rows with same width (col-md-8 here) and then place as many divs of equal width.
Sample below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="d-flex justify-content-around row">
<!-- row-1 -->
<div class="row col-md-8">
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">One</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Two</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Three</div>
</div>
</div>
</div>
</div>
<!-- row-2 -->
<div class="row col-md-8">
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Four</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Five</div>
</div>
</div>
</div>
</div>
</div>
You can create using 'Equal-width', for more details go through the Bootstrap 4 Grid System.
https://getbootstrap.com/docs/4.0/layout/grid/#equal-width
Bootstrap comes up with a lot of different solutions to achieve multiple views. What you've been trying so far was almost correct. However, your last col ist currently just looking a bit wrong. You might exchange your last cols classes by the following.
<div class="my-2 col flex-grow">
This does simply 2 things.
Using col you're letting flexbox decide how much space to take
Adding flex-grow you're telling flexbox to use and fill up any left space
I have the following (kind of) code :
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" style="min-height: 100vh;">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
header
</div>
</div>
<div class="row">
<div id="logo-frame" class="col d-flex justify-content-center align-items-center">
<img src="https://via.placeholder.com/1000x300" class="img-fluid overflow-auto">
</div>
</div>
<div class="row">
<div class="col">
footer
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
side
</div>
</div>
</div>
</div>
</div>
The image is of loaded dynamically and can be of any size and aspect ratio.
I want the div #logo-frame to :
take up all vertical space available (the container has min-height: 100vh but I'm not sure how to have the div eat it all up with flexbox) and pad the image with whitespace if required
have the image inside centered horizontally and vertically (I think I got it covered with justify-content-center align-items-center)
show a scrollbar if the height becomes too big to show the image (e.g with https://via.placeholder.com/1000x2000) but only on the image, not on the full page (I think the overflow-auto is enough, but not sure...)
How can I achieve this behavior easily with flexbox ?
Thanks
UPDATE
The following code is working.
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" style="height : 100vh">
<div class="row h-100">
<div class="col-8 h-100">
<div class="card h-100">
<div class="card-body d-flex flex-column h-100">
<div class="row">
<div class="col">
header
</div>
</div>
<div class="row h-100 overflow-auto">
<div id="logo-frame" class="col d-flex justify-content-center align-items-center">
<img src="https://via.placeholder.com/1000x300" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col">
footer
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
side
</div>
</div>
</div>
</div>
</div>
</div>
Can someone help me understand :
if it is possible to not have to cascade down the h-100 ?
why if I put min-height:100vh instead of height:100vh, it does not work ?
why if I don't put d-flex flex-column on the card-body element, it does not work
if there's a better way to make this work ?
Have you considered using the "max-height" css attribute in the parent container in conjunction with an auto scroll on overflow?
Update per your request
<!-- Add Slimscroll library -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.js" rel="stylesheet" />
Refactored Markup
<div class="container-fluid" style="min-height: 100vh;">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
header
</div>
</div>
<div class="row">
<!-- as indicated in style attribute: Add a class w/these attribs/values -->
<div id="logo-frame" style="max-height: 1000px; overflow: hidden;" class="col d-flex justify-content-center align-items-center">
<!-- you might need to remove the css selector: overflow-auto from the class attrib (Test it) -->
<img src="https://via.placeholder.com/1000x1200" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col">
footer
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
side
</div>
</div>
</div>
</div>
Instantiate Slimscroll on load
$(document).ready(function () {
$('#logo-frame').slimScroll({
// According to slimscroll documentation - leave height empty
height: '',
width: '100%',
alwaysVisible: false
});
})
so here is my html :
<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">
<div class="col-lg-9 col-md-12">
<div class="container">
<div class="row bg-white">
<div class="col-lg-4 col-md-6 p-2">
<div class="card">
<div class="card-img">
<img src="#image" class="img-fluid">
</div>
<div class="card-img-overlay">
<div class="card-title">
<h5>Title</h5>
</div>
<div class="card-text">
some texts
<div class="dlbut p-2">
<center>
<h5>link</h5>
</center>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 p-2">
<div class="card">
<div class="card-img">
<img src="#image" class="img-fluid">
</div>
<div class="card-img-overlay">
<div class="card-title">
<h5>Title</h5>
</div>
<div class="card-text">
some texts
<div class="dlbut p-2">
<center>
<h5>link</h5>
</center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
as you can see i have a column which is set to col-lg-9 col-md-12 which i'm using it to have some sort of post loop in it. and each post gonna be the col-lg-4 col-md-6.
the problem is the first column works fine, it's full screen on medium sized devices but the second column doesn't act like it is expected on small devices. i set it col-md-6 so it will be half of the screen wide on tablets for example and be full screen on mobile phones. but it won't.it will be half of the screen wide on small screens as well.
i also tried to add col-sm-12 but same results again.
i looked diffrent topics,... most people didn't use .row which that isn't my case.
also i tried it without the second container and i got same results.
few days ago i bought a license ,also if you like to use it free you can use it some days and can assist you : pingendo.com
is nice bootstrap but ,sometimes to speed up the things you should get some improvements
..anyway the thinks can look good like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="theme.css" type="text/css">
</head>
<body>
<!--
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
<div class="row " draggable="true">
<div class="col-md-12">
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-12">
<div class="container">
<div class="row bg-white">
<div class="col-lg-4 col-md-6 p-2">
<div class="card">
<div class="card-img">
<img src="#image" class="img-fluid">
</div>
<div class="card-img-overlay">
<div class="card-title">
<h5>Title</h5>
</div>
<div class="card-text"> some texts <div class="dlbut p-2">
<center>
<h5>link</h5>
</center>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 p-2">
<div class="card">
<div class="card-img">
<img src="#image" class="img-fluid">
</div>
<div class="card-img-overlay">
<div class="card-title">
<h5>Title</h5>
</div>
<div class="card-text"> some texts <div class="dlbut p-2">
<center>
<h5>link</h5>
</center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>-->
<!-- i did this with my Pingendo.com licensed -->
<div class="row" draggable="true">
<div class="col-md-6 col-12 col-sm-12 col-lg-6" >
<div class="card" >
<img class="card-img-top" src="https://picsum.photos/600/600?image=1074" alt="Card image">
<div class="card-body text-center">
<h4 class="card-title">John Catel</h4>
<p class="card-text">Some example text.</p>
See Profile
</div>
</div>
</div>
<div class="col-md-6 col-12 col-sm-12 col-lg-6">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/600/600?image=1074" alt="Card image">
<div class="card-body text-center">
<h4 class="card-title">John Catel</h4>
<p class="card-text">Some example text.</p>
See Profile
</div>
</div>
</div>
</div>
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Have you tried bootstrap 4 with
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
So I have this section which ocupies the whole width of the screen but the text in it is contained in a container and aligns properly.
The section below that one is divided in two columns, and im interested in putting a text in the left column that aligns with the text above it but so far have been unable to do so.
This is the result I'm getting:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
<div class="d-flex align-items-center bg-primary" style="min-height: 450px">
<div class="container">
<h1 class="">TITLE TEXT</h1>
</div>
</div>
</section>
<section id="">
<div class="subhead bg-primary">
<div class="row">
<div class="col-sm bg-secondary" style="min-height: 400px">
<div class="container">
<h3>TITLE</h3>
</div>
</div>
<div class="col-sm bg-warning" style="min-height: 400px"></div>
</div>
</div>
</section>
And the HTML I'm currently stuck with(The css was just added in the HTML for testing)
Tank you for any help provided and if you need anything more please just tell me.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
<div class="row bg-primary" style="min-height: 450px">
<div class="col-6 d-flex align-items-center">
<div class="container">
<h1 class="text-center">TITLE TEXT</h1>
</div>
</div>
</div>
</section>
<section id="">
<div class="subhead bg-primary">
<div class="row" style="min-height: 400px">
<div class="col-6 d-flex align-items-center bg-secondary">
<div class="container">
<h3 class="text-center">TITLE</h3>
</div>
</div>
<div class="col-6 bg-warning"></div>
</div>
</div>
</section>
.text-to-center{ display:flex}
h1,h3{ margin:auto;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
<div class="row bg-primary" style="min-height: 450px">
<div class="col-12 d-flex align-items-center">
<div class="container text-to-center">
<h1 class="text-center">TITLE TEXT</h1>
</div>
</div>
</div>
</section>
<section id="">
<div class="subhead bg-primary">
<div class="row" style="min-height: 400px">
<div class="col-6 d-flex align-items-center bg-secondary">
<div class="container text-to-center">
<h3 class="text-center">TITLE</h3>
</div>
</div>
<div class="col-6 bg-warning"></div>
</div>
</div>
</section>