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>
Related
I am new to front end and struggling when resizing the screen .
I am using 4 cards(Performance,Quality,Availability,Availability) in a card-group class and wants to place two cards in a row when screen is on medium and 1 card in a row when screen is on small .
Below is my code
<div class="row">
<div class="card-group col-lg-8 col-md-12 col-sm-12">
<div class="card mb-4 mr-2 ml-2">
<div class="card-header">
<h4 class="mb-0">Performance</h4>
</div>
<div class="card-body">
<div id="gauge1"></div>
</div>
</div>
<div class="card mb-4 mr-2 ml-2">
<div class="card-header">
<h4 class="mb-0">Quality</h4>
</div>
<div class="card-body">
<div id="gauge2"></div>
</div>
</div>
<div class="card mb-4 mr-2 ml-2">
<div class="card-header">
<h4 class="mb-0">Availability</h4>
</div>
<div class="card-body">
<div id="gauge3"></div>
</div>
</div>
<div class="card mb-4 mr-2 ml-2">
<div class="card-header">
<h4 class="mb-0">OEE
</h4>
</div>
<div class="card-body">
<div id="gauge4" style="text-align: center"></div>
<div id="dvLabel" style="text-align: center; position: absolute; top: 52%; right: 48%; font-size: 25px">
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<div class="card mb-4 mr-2" style="height: 119px">
<div class="card-header mt-4">
<h4 class="mb-0">Breakdown Hours</h4>
</div>
<div class="card-body ml-3 mr-3 text-center" style="background-color: #FFFFFF; color: #081A51; height: 50%">
<div>
<h3 class="mb-0"><%= Breakdown_Hours %></h3>
</div>
</div>
</div>
<div class="card mb-4 mr-2" style="height: 119px">
<div class="card-header mt-4">
<h4 class="mb-0">MTBF</h4>
</div>
<div class="card-body ml-3 mr-3 text-center" style="background-color: #FFFFFF; color: #081A51; height: 50%">
<div>
<h3 class="mb-0"><%= MTBF %></h3>
</div>
</div>
</div>
<div class="card mb-4 mr-2" style="height: 119px">
<div class="card-header mt-4">
<h4 class="mb-0">MTTR</h4>
</div>
<div class="card-body ml-3 mr-3 text-center" style="background-color: #FFFFFF; color: #081A51; height: 50%">
<div>
<h3 class="mb-0"><%= MTTR %></h3>
</div>
</div>
</div>
</div>
</div>
It is looking like this in a small screen
wherein I wanted to have these 4 cards placed below one other on small screen and 2 cards in case of medium. I am struggling to find the missing link .
Your second group misses the card-group class. Add it and the last three cards will be positioned side by side. If you want them be aligned with the ones on first row, you can just insert and empty card.
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 ...
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
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