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
Related
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.
I would like to know if there's a better solution to solve the space problem between the two first columns in this code: https://jsfiddle.net/5vtc1Lhp/#&togetherjs=qkIyJnDkmf
I did try to place div inside div, but the width of the div decreased in the first example ( at the top). At the botton it works fine, but I had to define a padding value in px which I don't like since it's a fixed value and I don't know if this spacement should change automatically.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<div class="col-md-12">
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-8">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
</div>
</div>
<hr>
Bellow is OK.
<hr>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-8" style="padding: 0 0px 0 30px;">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
</div>
</div>
Thank you!
Container gives gutter of 30px(15px on left and right)
If you remove the container and give it a row.It will give -15px padding on both sides. And that's what you are looking for, right?
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-8">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
I'm trying to prevent my group of three icons from collapsing to a vertical state, currently they are align horizontally, the problem is when i adjust the screen to a smaller one, the icons will readjust as well when my screen reaches a certain size
<div class="">
<div class="list-item">
<section class="row">
<vehicleHeading [vehicleItem]="vehicleItem" class="col-md-10 col-sm-9 col-xs-8 nopadding"></vehicleHeading>
<div class="icon-group col-md-2 col-sm-3 col-xs-4">
<span class="pull-right">
<i [id]="mapId" (click)="showVehicleOnMap()" class="material-pin pointer nopaddingLeft"></i>
<span [id]="collapseId" (click)="showVehicleDetails()"><i class="material-list pointer"></i></span>
<collapsibleImage [id]="detailsId" (collapseEvent)="onToggleClick($event)"></collapsibleImage>
</span>
</div>
</section>
</div>
<div [collapse]="isCollapsed" class="panel-body topBorder">
<div class="row">
<div class="col-sm-6 col-md-7 col-lg-7">
<div class="form form-horizontal hidden">
<div class="form-group">
<div class="col-sm-2 col-md-2 col-lg-2"></div>
<div class="col-sm-5 col-md-5 col-lg-5"></div>
<div class="col-sm-5 col-md-5 col-lg-5">
<div class="pull-right">
<i class="viewMore">Details</i>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-5 col-lg-5 nopadding">
<div class="pull-right thumbnail">
<vehicleMap id="vehicleMapId" #mapDetails [VehicleDetails]="vehicleItem"></vehicleMap>
</div>
</div>
</div>
</div>
</div>
i am creating the layout something like this :
[my layout on paper][1]
but from html and using bootstrap i got following like this :
http://jsfiddle.net/52VtD/7352/
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<div class="sidemargin">
<%--<div>
<span class="verticaltextname1">Project</span>
</div>
<div>
<span class="verticaltextname1">Work History</span>
</div>--%>
</div>
</div>
<div class="col-md-8 col-lg-8 col-sm-8 col-xs-8">
<div class="row">
<div class="col-xs-3">
<div class="topBox">About me</div>
</div>
<div class="col-xs-3">
<div class="topBox">Specialization</div>
</div>
<div class="col-xs-3">
<div class="topBox">Awards</div>
</div>
<div class=" col-xs-3">
<div class="topBox">Testimonials</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="topBox">Project</div>
</div>
<div class="col-xs-3">
<div class="topBox">Description</div>
</div>
<div class="col-xs-3">
<div class="topBox">Achievements</div>
</div>
<div class="col-xs-3">
<div class="topBox">Clients</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="topBox">
WorkedAs
</div>
</div>
<div class="col-xs-6">
<div class="topBox">
Skills
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="topBox">
Responsibilities
</div>
</div>
<div class="col-xs-6">
<div class="topBox">
Work involved
</div>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<div class="sidemargin">
</div>
</div>
</div>
</div>
http://jsfiddle.net/52VtD/7352/
how can i adjust the greenyellow column as per my paper starch, and create the same space between each box?