I am writing in HTML, using Bootstrap 5. I am trying to make a simple row of cards, however there is a lot of empty padding/space. How do I remove this?
Extra Space between cards
Here is my code:
Code\
<div class="row">
<div class="col">
<div onclick="locations(2)" id="location-2" class="w-75 custom-card">
<div class="card-body">
<h5>
<div class="row">
<div class="col">
<img style="border-radius: 5px;" src="https://flagcdn.com/fi.svg" width=40 height=30>
</div>
<div class="col">
<span class="fs-5" style="margin-left:-30px;line-height:-20px;">Helsinki,</span><br><span style="margin-left:-30px;line-height:-20px;" class="fw-normal fs-6">Finland</span>
</div>
</div>
</h5>
</div>
</div>
</div>
<div class="col">
<div onclick="locations(2)" id="location-2" class="w-75 custom-card">
<div class="card-body">
<h5>
<div class="row">
<div class="col">
<img style="border-radius: 5px;" src="https://flagcdn.com/fi.svg" width=40 height=30>
</div>
<div class="col">
<span class="fs-5" style="margin-left:-30px;line-height:-20px;">Helsinki,</span><br><span style="margin-left:-30px;line-height:-20px;" class="fw-normal fs-6">Finland</span>
</div>
</div>
</h5>
</div>
</div>
</div>
</div>
I tried using g-0 in the row, however it did not change at all.
Related
I am trying to develop a grid of cards using rows and columns.
Since I started using bootstrap, I always had doubts about how to use the column breakpoints correctly. I intend that in desktop size, it will have three columns, but in mobile size, these three columns will "become" just one.
Does anyone know how I can configure breakpoints in order to get just everything in one column, in mobile size?
DEMO
.html
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
dayly
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<div class="row">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
dayly
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="row" style="height:50%">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
dayly
</div>
</div>
</div>
</div>
<div class="row" style="height:calc(50% - 16px); margin-top:16px">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
dayly
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="row" style="height:25%">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
dayly
</div>
</div>
</div>
</div>
<div class="row" style="height:calc(75% - 16px); margin-top:16px">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
dayly
</div>
</div>
</div>
</div>
</div>
</div>
Problem
I set the moblie size and get 3 columns, how can I get everything in just one column and occupying the entire screen?
Instead use col-sm on the columns...
<div class="row">
<div class="col-sm">
<div class="row">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> dayly </div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col-sm">
<div class="row">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> This is some text within a card body. </div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> This is some text within a card body. </div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="card" style="height:100%">
<div class="card-body"> This is some text within a card body. </div>
</div>
</div>
<div class="col-sm">
<div class="card" style="height:100%">
<div class="card-body"> This is some text within a card body. </div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col-sm">
<div class="card" style="height:100%">
<div class="card-body"> This is some text within a card body. </div>
</div>
</div>
<div class="col-sm">
<div class="card" style="height:100%">
<div class="card-body"> This is some text within a card body. </div>
</div>
</div>
<div class="col-sm">
<div class="row">
<div class="col-sm">
<div class="card">
<div class="card-body"> a </div>
</div>
</div>
<div class="col-sm">
<div class="card">
<div class="card-body"> s </div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="card">
<div class="card-body"> s </div>
</div>
</div>
<div class="col-sm">
<div class="card">
<div class="card-body"> Ta </div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> dayly </div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="row" style="height:50%">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> dayly </div>
</div>
</div>
</div>
<div class="row" style="height:calc(50% - 16px); margin-top:16px">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> dayly </div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="row" style="height:25%">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> dayly </div>
</div>
</div>
</div>
<div class="row" style="height:calc(75% - 16px); margin-top:16px">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> dayly </div>
</div>
</div>
</div>
</div>
</div>
https://codeply.com/p/DPFuoonZgF
Also, you can use the padding utils (ie: pb-3) on some of the columns to create vertical spacing on mobile.
This is 1 column on mobile & 3 columns otherwise, based on a 12 column grid.
<div class="col-12 col-md-4">...</div>
The instruction is - fill all 12 columns by default (mobile first), and fill 4 of the columns otherwise.
I think your issue may come from nesting cols within cols, so for simplicity I've reduced this to just one level deep:
<div class="container">
<div class="row">
<div class="col-12 col-md-4">
<div class="card">
<h1>Card 1</h1>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<h1>Card 2</h1>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<h1>Card 3</h1>
</div>
</div>
</div>
</div>
Codepen here.
https://getbootstrap.com/docs/4.0/layout/grid/
I'm trying to create a template with bootstrap grid system like the image below from medium screen sizes but unable to do so. Below is my code:
HTML:
<div class="container-fluid" style="text-align:center">
<div class="row" style="text-align:center">
<div class="col-md-12" style="font-size:22px">All Blogs </div>
<br><br><br><br>
</div>
<br>
<br>
<div class="row col-md-12 py-3" *ngIf="allBlogs.length>0">
<!-- Card Start -->
<div class="card" *ngFor="let blog of allBlogs">
<div class="row">
<div class="col-md-3">
<a [routerLink]="['/blog', blog.id]"><img src="http://localhost:4000/{{blog.imagePath}}" class="card-img-top card-img-size" alt="blog1"></a>
</div>
<div class="col-md-5 px-3">
<div class="card-block px-6">
<h4 class="card-title">{{blog.title}}</h4>
<p class="card-text">{{blog.description}}</p>
<br>
Read More
</div>
</div>
</div>
</div>
<br>
<app-blog-category></app-blog-category>
</div>
</div>
Here's a template based on the image. I did an 8 and 4 grid size since bootstrap uses the 12 column system but feel free to alter these numbers as needed.
<div class="container-fluid">
<div class="row">
//this col contains your three card rows
<div class="col-md-8">
<div class="row">
<div class="col"> </div>
</div>
<div class="row">
<div class="col"> </div>
</div>
<div class="row">
<div class="col"> </div>
</div>
</div>
//this is for your shared component
<div class="col-md-4">
<shared-component></shared-component>
</div>
</div>
</div>
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'm struggling with a rather simple task but the lack of CSS experience is getting the better of me:
<div class="row">
<div class="col-lg-3">
<div class="ibox-content m-b-sm border-bottom">
<div class="ibox-title">
<span class="label label-info pull-right">Offline</span>
<h5>Equipment Pass</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.TransactionCount</h1>
<small># of Transactions</small>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="ibox-content m-b-sm border-bottom">
<div class="ibox-title">
<span class="label label-success pull-right">Online</span>
<h5>Equipment Pass</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassEquipmentOnline.TransactionCount</h1>
<small># of Transactions</small>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="ibox-content m-b-sm border-bottom">
<div class="ibox-title">
<span class="label label-info pull-right">Offline</span>
<h5>Visitor Pass</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassVisitorOffline.TransactionCount</h1>
<small># of Transactions</small>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="ibox-content m-b-sm border-bottom">
<div class="ibox-title">
<span class="label label-success pull-right">Online</span>
<h5>Visitor Pass</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassVisitorOnline.TransactionCount</h1>
<small># of Transactions</small>
</div>
</div>
</div>
</div>
Above is a row on my view. There are many like it:
I want to split the smallest div to show a second Heading1. Here is base HTML:
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.TransactionCount</h1>
<small># of Transactions</small>
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.Income</h1>
<small>Income generated</small>
</div>
Target:
I need to show more information and I see that the div card is empty on the right side. I want to split this div into two. Experimenting with bootstrap classes, the layout breaks.
Afer a bit of trial and error, i realized that the small grid class was the issue. I switched to class-md and got the desired result. So this:
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.TransactionCount</h1>
<small># of Transactions</small>
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.Income</h1>
<small>Income generated</small>
</div>
Became this:
<div class="ibox-content">
<div class="row">
<div class="col-md-6">
<h1 class="no-margins">#Model.AirportPassEquipmentOnline.TransactionCount.ToString("N0")</h1>
<small># of Transactions</small>
</div>
<div class="col-md-6">
<h1 class="no-margins">AED #Model.AirportPassEquipmentOnline.Income.ToString("N2")</h1>
<small>Revenue generated</small>
</div>
</div>
</div>
Sorry for bad title but couldn't think of anything better.
I have this progress bar created with Bootstrap, and images and paragraphs oer and under. But when I try to resize the window (lower it), it changes positions and suddenly wrecks everything. I need it the imgs and paragraphs to stand exactly same positions as the width of the progress bar.
<div>
<p style="display:inline-block;">0</p>
<p style="margin-left:23.6%;display:inline-block;">800</p>
<p style="margin-left:1.9%;display:inline-block;">950</p>
<p style="margin-left:1.9%;display:inline-block;">1100</p>
<p style="margin-left:1.9%;display:inline-block;">1250</p>
<p style="margin-left:1.9%;display:inline-block;">1400</p>
<p style="margin-left:1.9%;display:inline-block;">1550</p>
<p style="margin-left:1.9%;display:inline-block;">1700</p>
<p style="margin-left:1.9%;display:inline-block;">1850</p>
<p style="margin-left:1.9%;display:inline-block;">2000</p>
</div>
<div class="row" style="text-align:center;margin-left:0px;margin-right:0px;">
<div class="progress" style="margin-bottom:0px;height:40px;background-color:#cfcfcf;">
<div class="progress-bar" role="progressbar" aria-valuenow="'#ViewBag.EloWidth'"
aria-valuemin="0" aria-valuemax="3000" style="width:#ViewBag.EloWidth%;background-color:#6378ff;">
</div>
</div>
</div>
<div>
<img src="/Images/lvl1.png">
<img src="/Images/lvl2.png" style="margin-left:21%;">
<img src="/Images/lvl3.png" style="margin-left:1.3%;">
<img src="/Images/lvl4.png" style="margin-left:1.9%;">
<img src="/Images/lvl5.png" style="margin-left:2.2%;">
<img src="/Images/lvl6.png" style="margin-left:2.3%;">
<img src="/Images/lvl7.png" style="margin-left:2.3%;">
<img src="/Images/lvl8.png" style="margin-left:2.3%;">
<img src="/Images/lvl9.png" style="margin-left:2.3%;">
<img src="/Images/lvl10.png" style="margin-left:2.3%;">
</div>
You are not using bootstrap for the rest of your layout (the labels and icons). Try this one:
<div class="row">
<div class="col-3">
<p>0</p>
</div>
<div class="col-1">
<p>800</p>
</div>
<div class="col-1">
<p>950</p>
</div>
<div class="col-1">
<p>1100</p>
</div>
<div class="col-1">
<p>1250</p>
</div>
<div class="col-1">
<p>1400</p>
</div>
<div class="col-1">
<p>1550</p>
</div>
<div class="col-1">
<p>1700</p>
</div>
<div class="col-1">
<p>1850</p>
</div>
<div class="col-1">
<p>2000</p>
</div>
</div>
<div class="row" style="text-align:center;margin-left:0px;margin-right:0px;">
<div class="progress col-12" style="margin-bottom:0px;height:40px;background-color:#cfcfcf;">
<div class="progress-bar" role="progressbar" aria-valuenow="'#ViewBag.EloWidth'"
aria-valuemin="0" aria-valuemax="3000" style="width:#ViewBag.EloWidth%;background-color:#6378ff;">
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<img src="/Images/lvl1.png">
</div>
<div class="col-1">
<img src="/Images/lvl2.png">
</div>
<div class="col-1">
<img src="/Images/lvl3.png">
</div>
<div class="col-1">
<img src="/Images/lvl4.png">
</div>
<div class="col-1">
<img src="/Images/lvl5.png">
</div>
<div class="col-1">
<img src="/Images/lvl6.png">
</div>
<div class="col-1">
<img src="/Images/lvl7.png">
</div>
<div class="col-1">
<img src="/Images/lvl8.png">
</div>
<div class="col-1">
<img src="/Images/lvl9.png">
</div>
<div class="col-1">
<img src="/Images/lvl10.png">
</div>
</div>
This is a helpful guild about the Bootstrap Grid System. You might also use a class="col-12" for your progress bar.
EDIT: Working Plunker for Bootstrap4:
Plunker BS 4
EDIT2: Working Plunker for Bootstrap3:
Plunker BS 3