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/
Related
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.
I have a card which looks like this
I'm wondering if it would be possible to change the gray head part to be the picture that's inside of it right now.
My HTML code
<div class="card-set">
<div class="card-deck">
<div class="card">
<div class="card-header">
<img src="../../img/boxA.jpeg" style="width: 300px;">
</div>
<div class="card-body"></div>
<div class="card-footer"></div>
</div>
<div class="card">
<div class="card-header">
<img src="../../img/boxB.jpeg" style="width: 300px; height: 70px;">
</div>
<div class="card-body"></div>
<div class="card-footer"></div>
</div>
<div class="card">
<div class="card-header"></div>
<div class="card-body"></div>
<div class="card-footer"></div>
</div>
<div class="card">
<div class="card-header"></div>
<div class="card-body"></div>
<div class="card-footer"></div>
</div>
</div>
</div>
If you’re asking if the image can fill the full size of the card-header, yes, if you set the padding to 0, hide the overflow (the overflow is so the image corners follow the header border-radius), and set the image to 100% width.
<div class="card-set">
<div class="card-deck">
<div class="card">
<div class="card-header overflow-hidden p-0">
<img class="w-100" src="boxA.jpg" >
</div>
<div class="card-body"></div>
<div class="card-footer"></div>
</div>
<div class="card">
<div class="card-header">
<img src="boxB.jpg" >
</div>
<div class="card-body"></div>
<div class="card-footer"></div>
</div>
</div>
</div>
You don’t have any rows or columns in your sample, so the width will expand to fill the available space (and the image will adjust accordingly).
I'm working on an angular app and the UI has several .card blocks, but as I keep adding them to the Html, they disappear in the bottom of the page, I was expecting that as I keep adding them a scroll bar would appear in the page, could someone help me with that?
<div class="content-area">
<div class="clr-row">
<div class="clr-col-12">
<div class="card">
<div class="card-block">
<div class="card-title" *ngIf="project">
<app-shr-project-header [project]='project'></app-shr-project-header>
</div>
</div>
</div>
</div>
</div>
<div class="clr-row" style="margin-top: 24px;">
<div class="clr-col-12">
<app-submission-review-grid></app-submission-review-grid>
</div>
</div>
<div class="clr-row">
<div class="clr-col-12">
<div class="card">
<div class="card-block">
<div class="card-title">
<h4>
Information Requests
</h4>
</div>
<div class="card-text">
...
</div>
</div>
</div>
</div>
</div>
<div class="clr-row">
<div class="clr-col-12">
<div class="card">
<div class="card-block">
<div class="card-title">
<h4>
Attachments
</h4>
</div>
<div class="card-text">
...
</div>
</div>
</div>
</div>
</div>
</div>
the main-container is in another component
<div class="main-container">
<app-navbar></app-navbar>
<router-outlet></router-outlet>
</div>
Ok even though my app.component already has a class="main-container, putting another one to this Html, also I was missing the class="content-container", with these two now is working
<div class="main-container">
<div class="content-container">
<div class="content-area">
<h1>
SHPO Response
</h1>
<div class="content-area">
<div class="clr-row">
<div class="clr-col-lg-12">
<div class="card mt-0">
<div class="card-block">
<div class="card-title" *ngIf="project">
<app-shr-project-header [project]='project'></app-shr-project-header>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="clr-row" style="margin-top: 24px;">
<div class="clr-col-12">
<app-submission-review-grid></app-submission-review-grid>
</div>
</div>
<br>
<div class="clr-row">
<div class="clr-col-lg-12">
<div class="card mt-0">
<div class="card-block">
<div class="card-title">
<h4>
Information Requests
</h4>
</div>
<div class="card-text">
...
</div>
</div>
</div>
</div>
</div>
<br>
<div class="clr-row">
<div class="clr-col-lg-12">
<div class="card mt-0">
<div class="card-block">
<div class="card-title">
<h4>
Attachments
</h4>
</div>
<div class="card-text">
...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
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