I'm working with columns in a Django app using Bootstrap for styling.
I have been able to use classes to produce a responsive configuration which stacks vertically beyond a specified breakpoint.
I now want to introduce a space or gutter between the columns that is maintained when the columns are stacked vertically.
<div class="container">
<div class="row justify-content-center" style="margin-top: -100px;">
<!-- LEFT -->
<div class="col-md-4 border rounded bg-light">
<div class="row justify-content-center">
<h5 class="text-center"> Some text here </h5>
</div>
<br>
</div>
<!-- RIGHT -->
<div class="col-md-4 border rounded bg-white">
<div class="row justify-content-center">
<h3 class="text-center"> Some text here</h3>
<h2 class="text-center">Some text here</h2>
<p class="text-center" style="font-size: 11px;">Some text here</p>
</div>
</div>
<br>
</div>
</div>
Normal sizing
Responsive sizing
Desired outcome normal
Desired outcome responsive
I have tried implementing gutters as per the Bootstrap documentation however nothing seems to introduce the spacing required.
Any guidance greatly appreciated.
You put the styling border rounded bg-light in the wrong element. The styling should be put on the element within the .col.
.col class use padding CSS to produce the horizontal spacing and padding is within the border of element, that's the reason why your current styling didn't work.
Hope it helps and Happy coding !
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<h5 class="text-center text-decoration-underline">Original Result</h5>
<div class="container">
<div class="row justify-content-center">
<!-- LEFT -->
<div class="col-md-4 border rounded bg-light">
<div class="row justify-content-center">
<h5 class="text-center"> Some text here </h5>
</div>
<br>
</div>
<!-- RIGHT -->
<div class="col-md-4 border rounded bg-white">
<div class="row justify-content-center">
<h3 class="text-center"> Some text here</h3>
<h2 class="text-center">Some text here</h2>
<p class="text-center" style="font-size: 11px;">Some text here</p>
</div>
</div>
<br>
</div>
</div>
<h5 class="text-center text-decoration-underline">Restructured Result</h5>
<div class="container mt-3">
<div class="row justify-content-center">
<!-- LEFT -->
<div class="col-md-4">
<div class="border rounded bg-light h-100">
<h5 class="text-center"> Some text here </h5>
</div>
</div>
<br>
<!-- RIGHT -->
<div class="col-md-4">
<div class="border rounded bg-white h-100">
<h3 class="text-center"> Some text here</h3>
<h2 class="text-center">Some text here</h2>
<p class="text-center" style="font-size: 11px;">Some text here</p>
</div>
</div>
<br>
</div>
</div>
Related
This question already has answers here:
How to align div to bottom inside div with Bootstrap?
(4 answers)
Bootstrap element to bottom with flexbox
(1 answer)
How can I align a flex-row to bottom in a card?
(1 answer)
Closed 18 days ago.
I want to view multiple articles on a page. I used Bootstrap 5 cards to make it look great. Everything worked out fine as I wanted, but the only thing which bothers me is that the read more link is not at the bottom of the card. I tried adding a d-flex, and used align-bottom, but nothing put the text at the bottom
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="card p-2">
<div class="row g-3">
<div class="col-5">
<img src="https://via.placeholder.com/800" class="card-img fit-cover w-100 h-100">
</div>
<div class="col-7">
<div class="card-body h-100 p-0 m-0">
<span class="card-text mb-1 small">463</span>
<h6 class="card-title custom-text-truncate">How a responsive website can boost user satisfaction</h6>
<div class="d-flex align-items-end">
Read more ->
</div>
</div>
</div>
</div>
</div>
Group the tile and text to one div to let the flex container have only 2 child items and set the flex container flex-column and justify-content-between (it means one item at the top of the container and the other at the very bottom).
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="card">
<div class="row g-3">
<div class="col-5">
<img src="https://via.placeholder.com/800" class="card-img fit-cover w-100 h-100" />
</div>
<div class="col-7">
<div class="d-flex flex-column justify-content-between card-body h-100 p-0 m-0">
<div>
<!-- Grouping title and text by this div -->
<div class="card-text mb-1 small">463</div>
<div>
<h6 class="card-title custom-text-truncate">
How a responsive website can boost user satisfaction
</h6>
</div>
</div>
<div>
Read more ->
</div>
</div>
</div>
</div>
</div>
You can achieve this by setting the .card-body to use a flex layout and change its direction to column and then finally add a margin-top: auto for the read more link. When utilizing Bootstrap's utility classes, the result would be as follow:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="card p-2">
<div class="row g-3">
<div class="col-5">
<img src="https://via.placeholder.com/800" class="card-img fit-cover w-100 h-100" />
</div>
<div class="col-7">
<!-- Add class names of `d-flex` and `flex-column` -->
<div class="card-body h-100 p-0 m-0 d-flex flex-column">
<span class="card-text mb-1 small">463</span>
<h6 class="card-title custom-text-truncate">
How a responsive website can boost user satisfaction
</h6>
<!-- Add `mt-auto` -->
<div class="d-flex align-items-end mt-auto">
Read more ->
</div>
</div>
</div>
</div>
</div>
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>
I have two side by side card boxes in Bootstrap-4 with text and some other elements inside them:
<div class="container-fluid">
<div class="card-deck">
<!-- Box 1 (left) -->
<div class="card">
<div class="card-body">
Box 1
</div>
</div>
<!-- Box 2 (right) -->
<div class="card" >
<div class="card-body">
<div class="col">
<h4 class="mb-2">
Box 2 Title
</h4>
<p class="small text-muted mb-0">
Box 2 Subtitle
</p>
</div>
<div class="row no-gutters">
<div class="col">col2</div>
<div class="col">col2</div>
<div class="col">col2</div>
<div class="col">col2</div>
</div>
<div class="row no-gutters">
<div class="col">col2</div>
<div class="col">col2</div>
<div class="col">col2</div>
<div class="col">col2</div>
</div>
</div>
</div>
</div>
</div>
Right now the responsiveness of these two boxes is perfect; if I resize the browser super thin; the text never leaves the box (Nice!)
I want Box 2 (on the right) to be wider than Box 1 (on the left), I was able to accomplish this visually by changing
<!-- Box 1 (left) --> <div class="card">
to
<!-- Box 1 (left) --> <div class="card col-4">
by adding col-4.
This does the visual change I want:
But now when I resize the browser the text of Box 1 clips outside the box (Bad! Not want I want)
Is there some way in Bootstrap to make the Boxes look like this (Box1 being slightly shorter than Box2) While also keeping the perfect original responsiveness where text will never clip outside the box?
Thanks
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card mb-4 box-shadow">
<div class="card-body">
<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>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-4 box-shadow">
<div class="card-body">
<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>
</div>
</div>
</div>
</div>
</div>
I am trying to get the result as you can see here:
The code I am tried to get it to work is this code:
<div class="container">
<h1>Welkom Dennis,</h1>
<div class="col-12 card card-body mb-2">
<div class="row">
<div class="col-md-3">
<div class="col-md-6 text-center d-flex">
<img class="mx-auto my-auto" src="img/foot.png">
</div>
</div>
<div class="col-md-8 card card-body mb-2">
<p class="text-center">Center aligned text on all viewport sizes.</p>
</div>
<div class="col-md-8 card card-body mb-2">
<p class="text-center">Center aligned text on all viewport sizes.</p>
</div>
</div>
</div>
</div>
It results as shown here:
So what I am trying to get is that there are 2 columns under each other next to the foot.
I tried several things but I can't get it the way I would like it too.
You are placing the col-3, col-3, and col-8 all under one row that only spans col-12. So the third col-8 has no where to go but to wrap under its siblings.
Think of it as two columns col-4, col-8 (which === 12) and inside the col-8 stack the cards for the text and buttons.
Example:
<div class="container">
<h1>Welkom Dennis,</h1>
<div class="row">
<div class="col-12 card card-body mb-2">
<div class="row">
<!-- Foot Image Column -->
<div class="col-md-4 text-center">
<img class="mx-auto img-fluid" src="img/foot.png">
</div>
<!-- Text and Buttons Column -->
<div class="col-md-8">
<!-- Inside this column you have stacked cards -->
<div class="card card-body mb-2">
<p class="text-center">Center aligned text on all viewport sizes.</p>
</div>
<div class="card card-body">
<p class="text-center">Center aligned text on all viewport sizes.</p>
</div>
</div>
</div>
</div>
</div>
Hope that helps!
I am trying figure out how to adjust some of the bootstrap CSS styling to fix an issue I am running into.
I am using the page header class to create my title which is consistent across all my pages.
On the page I am working on, there is some more information I would like to add to the right side of the page within the header.
Anytime I try to get it to appear above the line, it just goes below or in the middle and the line doesnt seem to move.
Fiddle: http://jsfiddle.net/rka18Lze/
<div class="container">
<div class="page-header">
<h3 class="text-info">A page header here</h3>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-8 text-right">
<h5 class="text-info">Owner: Bob Smith</h5>
<h5 class="text-info">Type: Desktop</h5>
<h5 class="text-info">Status: Active</h5>
</div>
</div>
</div>
Here is an example of what I am trying to accomplish:
Is there a way I can move the line down under this text; or maybe a special class to help in this one situation if needed?
This would be a Bootstrap-only solution: (Example)
<div class="container">
<div class="page-header row">
<div class="col-xs-6 col-sm-6 col-sm-6 col-md-8">
<h3 class="text-info">A page header here</h3>
</div>
<div class="col-xs-6 col-sm-6 col-sm-6 col-md-4 text-right">
<h5 class="text-info">Owner: Bob Smith</h5>
<h5 class="text-info">Type: Desktop</h5>
<h5 class="text-info">Status: Active</h5>
</div>
</div>
</div>
Creates:
You should use the same row for both elements. Take a look:
<div class="container">
<div class="row">
<div class="col-xs-8">
<div class="page-header">
<h3 class="text-info">A page header here</h3>
</div>
</div>
<div class="col-xs-4 text-right">
<h5 class="text-info">Owner: Bob Smith</h5>
<h5 class="text-info">Type: Desktop</h5>
<h5 class="text-info">Status: Active</h5>
</div>
http://jsfiddle.net/jozreLj2/
You will need to position the <div>with the information first before the <div> with the page header. Then apply the class .pull-righton the <div> with the information.
Here is a jsfiddle
<div class="container">
<div class="row pull-right">
<div class="col-md-4 col-md-offset-8 text-right">
<h5 class="text-info">Owner: Bob Smith</h5>
<h5 class="text-info">Type: Desktop</h5>
<h5 class="text-info">Status: Active</h5>
</div>
</div>
<div class="page-header">
<h3 class="text-info">A page header here</h3>
</div>
</div>