I'd like to order my bootstrap cards thus:
My code is this:
<div class="row ">
<div class="col-12 col-md-6 mb-1" style="height: 75vh;">
<div class="map svelte-xu5vn1" id="map">
...
</div>
<div class="col-12 col-md-6">
<div class="col-6">
<a rel="prefetch" href="communes/xxx/objects/Cykelhus">
<div class="card mr-1 mb-1">
<div class="card-body text-center">
<img class="card-img-top" src="img/300x300/cykelhus.thumb.jpg" alt="(image)">
<p class="card-text">Cykelhus</p>
</div>
</div>
</a>
</div>
<div class="col-6">
<a rel="prefetch" href="communes/brf_masthugget/objects/Sedumtak">
<div class="card mr-1 mb-1">
... as per the above
But I get this result:
What do I need to change?
Fixed it, I needed to add a <div class="row"> before the first of the cards:
<div class="row">
<div class="col-6">
<a rel="prefetch" href="communes/xxx/objects/Cykelhus">
...
And close it of course.
hmm, sure I'd already tried that ...
Related
I'm struggling on how to level this card equally to each other:
As you can see in the picture below. The card for the top reason for downtime doesn't match what is on the other cards or vice-versa. I want them to on the same height with each other regardless of what is inside on them.
Below is my code:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="card shadow mb-4">
<h5 class="card-header">
Top Reason for downtime
</h5>
<div class="card-body">
<ul id="top5Downtime">
</ul>
</div>
</div>
</div>
<div class="col-md-5">
<div class="card shadow mb-4">
<h5 class="card-header">
Top Down Terminals:
</h5>
<div class="card-body">
<ol id="mostDown">
</ol>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card shadow mb-4">
<h5 class="card-header">
Top Up Terminals:
</h5>
<div class="card-body">
<ol id="mostUp">
</ol>
</div>
</div>
</div>
</div>
<!--End of div.row-->
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="bar-chart">
</div>
</div>
</div>
</div>
</div>
<!--End of div.row-->
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="lineChart">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card shadow mb-3">
<h5 class="card-header">
Planned vs Unplanned Event
</h5>
<div class="card-body">
<div id="pieChart"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card shadow mb-3">
<h5 class="card-header">
Downtime vs Uptime
</h5>
<div class="card-body">
<div id="pieChart2"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="barChart2">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="barChart3">
</div>
</div>
</div>
</div>
</div>
<!--END OF div.row-->
<!--END OF div.row-->
</div>
I've tried using the align-self-stretch but it only broke my design. How could I proceed?
Applying display: flex (or .d-flex class) to each of the .cols in same row will make them have equal height:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 d-flex">
<div class="card shadow mb-4 w-100">
<h5 class="card-header">
Top Reason for downtime
</h5>
<div class="card-body">
<ul id="top5Downtime">
</ul>
</div>
</div>
</div>
<div class="col-md-5 d-flex">
<div class="card shadow mb-4 w-100">
<h5 class="card-header">
Top Down Terminals:
</h5>
<div class="card-body">
<ol id="mostDown">
</ol>
</div>
</div>
</div>
<div class="col-md-4 d-flex">
<div class="card shadow mb-4 w-100">
<h5 class="card-header">
Top Up Terminals:
</h5>
<div class="card-body">
<ol id="mostUp">
</ol>
</div>
</div>
</div>
</div>
<!--End of div.row-->
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="bar-chart">
</div>
</div>
</div>
</div>
</div>
<!--End of div.row-->
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="lineChart">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 d-flex">
<div class="card shadow mb-3 w-100">
<h5 class="card-header">
Planned vs Unplanned Event
</h5>
<div class="card-body">
<div id="pieChart"></div>
</div>
</div>
</div>
<div class="col-md-6 d-flex">
<div class="card shadow mb-3 w-100">
<h5 class="card-header">
Downtime vs Uptime
</h5>
<div class="card-body">
<div id="pieChart2"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="barChart2">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="barChart3">
</div>
</div>
</div>
</div>
</div>
<!--END OF div.row-->
<!--END OF div.row-->
</div>
You also have to apply .w-100 to cards inside .d-flex cols, to make them stretch to full column width on smaller responsiveness intervals.
Important note: this solution relies on the fact you only have 1 card in each .col. If you have more than one, you'll need to add .flex-column to your .col as well.
But, for your example, .d-flex to .cols is enough.
How can I display my Hello-div-2 after Hello-div-3 in small screen?
Right now the flow is
Hello-div-1, Hello-div-2, Hello-div-3, Hello-div-4.
It should be
Hello-div-1, Hello-div-3, Hello-div-2, Hello-div-4.
<div class="container">
<div class="row">
<div class="col-md-8 col-12 bg-primary">
<h2 class="font-weight-light">Hello-div-1</h2>
</div>
<div class="col-md-4 col-12 bg-success">
<h2 class="font-weight-light ">Hello-div-2</h2>
</div>
</div>
<div class="row">
<div class="col-md-8 col-12 bg-info">
<h2 class="font-weight-light">Hello-div-3</h2>
</div>
<div class="col-md-4 col-12 bg-warning">
<h2 class="font-weight-light">Hello-div-4</h2>
</div>
</div>
</div>
if you can't change structure only solution which i can think of is
<div class="container">
<div class="row">
<div class="col-md-8 col-12 bg-primary">
<h2 class="font-weight-light">Hello-div-1</h2>
</div>
<!-- hide this in small screen -->
<div class="col-md-4 col-12 bg-success">
<h2 class="font-weight-light ">Hello-div-2</h2>
</div>
</div>
<div class="row">
<div class="col-md-8 col-12 bg-info">
<h2 class="font-weight-light">Hello-div-3</h2>
</div>
<!-- show this in small screen -->
<div class="col-md-4 col-12 bg-success">
<h2 class="font-weight-light ">Hello-div-2</h2>
</div>
<div class="col-md-4 col-12 bg-warning">
<h2 class="font-weight-light">Hello-div-4</h2>
</div>
</div>
</div>
Put them all in the same .row and use the .order- classes...
<div class="container">
<div class="row">
<div class="col-md-8 col-12 bg-primary order-0 order-md-0">
<h2 class="font-weight-light">Hello-div-1</h2>
</div>
<div class="col-md-4 col-12 bg-success order-2 order-md-0">
<h2 class="font-weight-light ">Hello-div-2</h2>
</div>
<div class="col-md-8 col-12 bg-info order-1 order-md-0">
<h2 class="font-weight-light">Hello-div-3</h2>
</div>
<div class="col-md-4 col-12 bg-warning order-3 order-md-0">
<h2 class="font-weight-light">Hello-div-4</h2>
</div>
</div>
</div>
https://codeply.com/p/m8sgEDDmp2
I have this markup
<div class="container-fluid p-4" style="margin-right: 0px; margin-left: 0px; margin-top: -30px;" id="divUtility" runat="server">
<div class="card bg-secondary">
<div class="card-header text-white ">
</div>
<div class="row card-body">
<div id="divCantieri" runat="server" class="col-sm-4 bg-secondary">
...
</div>
<div id="divImporta" runat="server" class="col-sm-4 bg-secondary">
...
</div>
<div id="divBatch" runat="server" class="col-sm-4 bg-secondary">
...
</div>
<div id="divCausali" runat="server" class="col-sm-4 bg-secondary">
...
</div>
</div>
</div>
</div>
The problem I'm facing is that the nested cards inside the big one are not responsive, so when I use the site on desktop I see them on the same row one after each other, if I use the smartphone I see them still inline but shrinked. When on smartphone I want them to display as they are a single column. How can I achieve this? Thanks
example drawing
actual graphic
EDIT:
With this markup I'm almost where I want, last thing to figure out is how to set all the inner cards always adapting to the available horizontal space in both cases: basically when they are on a single row they should have width=33% each, but when on a single column width=100%.
<div id="divUtility" class="container-fluid p-4" style="margin-right: 0px; margin-left: 0px; margin-top: -30px;">
<div class="card bg-secondary">
<div class="card-header text-white ">
...
</div>
<div class="card-body" style="display:flex; flex-direction:row; flex-wrap:wrap;">
<div id="divCantieri" class="card mr-3 mt-2 mb-2" style="min-width:30em;">
<div class="card-header bg-light">
...
</div>
<div class="card-body scroll" style="max-height: 10em;">
...
</div>
</div>
<div id="divImporta" class="card mr-3 mt-2 mb-2" style="min-width:30em;">
<div class="card-header bg-light">
...
</div>
<div class="card-body scroll" style="max-height: 10em;">
...
</div>
</div>
<div id="divBatch" class="card mr-3 mt-2 mb-2" style="min-width:30em;">
<div class="card-header bg-light">
...
</div>
<div class="card-body scroll" style="max-height: 10em;">
...
</div>
</div>
</div>
</div>
</div>
Personally I would use flexbox to achieve what you're after.
Set display:flex; on the div that contains the divs that you want to display as a column instead of a row. Then set their direction with flex-direction:row; and whether or not they'll wrap with flex-wrap:wrap;
<div class="row card-body" style="display:flex; flex-direction:row; flex-wrap:wrap;">
<div id="divCantieri" runat="server" class="col-sm-4 bg-secondary">
...
</div>
<div id="divImporta" runat="server" class="col-sm-4 bg-secondary">
...
</div>
<div id="divBatch" runat="server" class="col-sm-4 bg-secondary">
...
</div>
<div id="divCausali" runat="server" class="col-sm-4 bg-secondary">
...
</div>
</div>
Here's a nice reference that helped me understand flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You are actually telling the browser to set three columns for every view-port. You have to set the col-sm to 12 to make the divs occupy the entire row each.
<div class="row card-body">
<div id="divCantieri" runat="server" class="col-sm-12 col-md-4 bg-secondary">
...
</div>
<div id="divImporta" runat="server" class="col-sm-12 col-md-4 bg-secondary">
...
</div>
<div id="divBatch" runat="server" class="col-sm-12 col-md-4 bg-secondary">
...
</div>
<div id="divCausali" runat="server" class="col-sm-12 col-md-4 bg-secondary">
...
</div>
</div>
I ended up with this and it's working well, as wanted
<div class="card-body">
<div class="row">
<div id="divCantieri" runat="server" class="col-xl-4 mb-3">
<div class="card">
<div class="card-header bg-light">
</div>
<div class="card-body scroll" style="max-height: 10em;">
</div>
</div>
</div>
<div id="divImporta" runat="server" class="col-xl-4 mb-3">
<div class="card">
<div class="card-header bg-light">
</div>
<div class="card-body" style="max-height: 10em;">
</div>
</div>
</div>
<div id="divBatch" runat="server" class="col-xl-4 mb-3">
<div class="card">
<div class="card-header bg-light">
</div>
<div class="card-body scroll" style="max-height: 10em;">
</div>
<div class="card-footer">
</div>
</div>
</div>
<div id="divCausali" visible="false" runat="server" class="col-xl-4 mb-3">
<div class="card">
<div class="card-header bg-light">
</div>
<div class="card-body scroll" style="max-height: 10em;">
</div>
</div>
</div>
</div>
</div>
This question already has an answer here:
Bootstrap 4.0 Grid System Layout not working
(1 answer)
Closed 4 years ago.
The class .col-6 is not working propely, when below 575px screen size, the cards gets a weird aspect. How to fix it?
Click on Run code snippet->Full Page, and resize the screen to below 575px of width:
.divCard{
float:left;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container-fluid">
<div class="row mx-md-2">
<div class="card-group col-lg-8">
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
<article class="card">
<a href="#">
<img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
</a>
</article>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
<article class="card">
<a href="#">
<img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
</a>
</article>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
<article class="card">
<a href="#">
<img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
</a>
</article>
</div>
</div>
<div class="col-12 col-lg-4" style="background-color: red"></div>
</div>
</div>
Wrap the content of your class col-lg-8 inside of a row class.
As col-*-* have default margins which is causing the issue.
Please try the below code.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container-fluid">
<div class="row mx-md-2">
<div class="card-group col-lg-8">
<div class="row">
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
<article class="card">
<a href="#">
<img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
</a>
</article>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
<article class="card">
<a href="#">
<img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
</a>
</article>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
<article class="card">
<a href="#">
<img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
</a>
</article>
</div>
</div>
</div>
<div class="col-12 col-lg-4" style="background-color: red; height:200px"></div>
</div>
</div>
I noticed some errors and here is how to fix it. I will provide simplified version to show where the problem is.
According to bootstrap you need to have the following scheme in your layout.
container → row → col → row → col and so on.
Your layout has container → row → col → col and i suppose this is the problem.
Plus, it is really helpful to add borders so you can easily see the layout and how it behaves.
I hope this solves your problem.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
<article class="card w-100">1</article>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
<article class="card w-100">2</article>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
<article class="card w-100">3</article>
</div>
</div>
</div>
</div>
</div>
What would be the best / correct method to replicate the following using bootstrap. There are four colum, each of which is 25% wide, and I would like to add an image inbetween. The columns remain 25% all the way from mobile to desktop.
Simple
<div class="row">
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
</div>
</div>
</div>
PS: You may use text or content for + sign ... its upto you !! I prefer text/content because it will render faster then image.
This seems to do the job, though it's a bit convoluted. The 15-column layout is tricky.
.row.shift-left {
margin-left: -20px;
}
<div class="container-fluid">
<div class="row">
<div class="col-xs-11 col-xs-offset-1">
<div class="row shift-left">
<div class="col-xs-3">
<div class="row">
<div class="col-xs-9">Words words words.</div>
<div class="col-xs-3">
<img src="http://placehold.it/300x800" class="img-responsive" />
</div>
</div>
</div>
...
Demo