I developed a grid with 3 columns. My problem is that the columns shrink too much and do not present the content correctly when they are adjusted in smaller sizes.
Is there a way to implement a break-point, so that when the screen measurement of approximately 1000px arrives, pass all the content to a single column?
The other problem arises when I reach the mobile size, the last two columns (highlighted in the image) disappear. These should appear under the first column
How can I solve my problem and what did I do wrong?
DEMO
Code
<div class="container-fluid"
style="overflow-x:hidden;padding-left:0;display:flex; height: 98vh; margin-right:0px; margin-left:0px">
<div class="col-md-6 col-sm-12 customcol">
<div class="card card1">
<div class="card-body">
<p class="card-text">1asdas</p>
</div>
</div>
<div class="divh" style="justify-content: flex-start; display: flex">
<div class="card card2">
<div class="card-body">
<p class="card-text">2aasasddsd</p>
</div>
</div>
<div class="card card2">
<div class="card-body">
<p class="card-text">3asd</p>
</div>
</div>
</div>
<div class="divh" style="justify-content: flex-start; display: flex">
<div class="card card2">
<div class="card-body">
<p class="card-text">4asdasd</p>
</div>
</div>
<div class="card card2">
<div class="card-body">
<p class="card-text">5asda</p>
</div>
</div>
</div>
<div class="divh" style="justify-content: flex-start; display: flex">
<div class="card card4" style="height:100%">
<div class="card-body">
<p class="card-text">6asda</p>
</div>
</div>
<div class="card card4" style="height:100%">
<div class="card-body">
<p class="card-text">7asd</p>
</div>
</div>
<div class="card card4" style="height:100%">
<div class="card-body">
<p class="card-text">8asdasd</p>
</div>
</div>
<div class="card card4" style="height:100%">
<div class="card-body">
<p class="card-text">9asdsad</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 customcol">
<div class="card card1">
<div class="card-body">
<p class="card-text">10asd</p>
</div>
</div>
<div class="card card1">
<div class="card-body">
<p class="card-text">11asdas</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 customcol">
<div class="card cardall">
<div class="card-body">
<p class="card-text">12asd</p>
</div>
</div>
</div>
</div>
Problem
The issue is you are using col without row.
When ever you need to use column there must be some row as its parent its define in official doc of Bootstrap
.card{
margin-top: 16px;
margin-left: 16px;
}
.card-body{
padding:4px;
}
.card1{
height: calc(50% - 16px)
}
.divh{
height: calc(16.7% - 16px);
margin-top: 16px;
}
.card2{
width: calc(50% - 16px);
margin-top:0px;
height:100%;
}
.card4{
width: calc(25% - 16px);
margin-top:0px;
height:100%;
}
.cardall{
height: calc(100% - 16px)
}
.customcol{
padding-left: 0;
padding-right: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-left:0; height: 98vh;">
<div class="row">
<div class="col-md-4 col-sm-12 customcol">
<div class="card card1">
<div class="card-body">
<p class="card-text">1asdas</p>
</div>
</div>
<div class="divh" style="justify-content: flex-start; display: flex">
<div class="card card2" >
<div class="card-body">
<p class="card-text">2aasasddsd</p>
</div>
</div>
<div class="card card2">
<div class="card-body">
<p class="card-text">3asd</p>
</div>
</div>
</div>
<div class="divh" style="justify-content: flex-start; display: flex">
<div class="card card2">
<div class="card-body">
<p class="card-text">4asdasd</p>
</div>
</div>
<div class="card card2">
<div class="card-body">
<p class="card-text">5asda</p>
</div>
</div>
</div>
<div class="divh" style="justify-content: flex-start; display: flex">
<div class="card card4" style="height:100%">
<div class="card-body">
<p class="card-text">6asda</p>
</div>
</div>
<div class="card card4" style="height:100%">
<div class="card-body">
<p class="card-text">7asd</p>
</div>
</div>
<div class="card card4" style="height:100%">
<div class="card-body">
<p class="card-text">8asdasd</p>
</div>
</div>
<div class="card card4" style="height:100%">
<div class="card-body">
<p class="card-text">9asdsad</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 customcol">
<div class="card card1">
<div class="card-body">
<p class="card-text">10asd</p>
</div>
</div>
<div class="card card1">
<div class="card-body">
<p class="card-text">11asdas</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 customcol">
<div class="card cardall">
<div class="card-body">
<p class="card-text">12asd</p>
</div>
</div>
</div>
</div>
</div>
.card{
margin-top: 16px;
margin-left: 16px;
}
.card-body{
padding:4px;
}
.card1{
height: calc(50% - 16px)
}
.divh{
height: calc(16.7% - 16px);
margin-top: 16px;
}
.card2{
width: calc(50% - 16px);
margin-top:0px;
height:100%;
}
.card4{
width: calc(25% - 16px);
margin-top:0px;
height:100%;
}
.cardall{
height: calc(100% - 16px)
}
.customcol{
padding-left: 0;
padding-right: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-left:0; height: 98vh;">
<div class="row">
<div class="col-md-4 col-sm-12 customcol">
<div class="card card1">
<div class="card-body">
<p class="card-text">1asdas</p>
</div>
</div>
<div class="divh" style="justify-content: flex-start; display: flex">
<div class="card card2" >
<div class="card-body">
<p class="card-text">2aasasddsd</p>
</div>
</div>
<div class="card card2">
<div class="card-body">
<p class="card-text">3asd</p>
</div>
</div>
</div>
<div class="divh" style="justify-content: flex-start; display: flex">
<div class="card card2">
<div class="card-body">
<p class="card-text">4asdasd</p>
</div>
</div>
<div class="card card2">
<div class="card-body">
<p class="card-text">5asda</p>
</div>
</div>
</div>
<div class="divh" style="justify-content: flex-start; display: flex">
<div class="card card4" style="height:100%">
<div class="card-body">
<p class="card-text">6asda</p>
</div>
</div>
<div class="card card4" style="height:100%">
<div class="card-body">
<p class="card-text">7asd</p>
</div>
</div>
<div class="card card4" style="height:100%">
<div class="card-body">
<p class="card-text">8asdasd</p>
</div>
</div>
<div class="card card4" style="height:100%">
<div class="card-body">
<p class="card-text">9asdsad</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 customcol">
<div class="card card1">
<div class="card-body">
<p class="card-text">10asd</p>
</div>
</div>
<div class="card card1">
<div class="card-body">
<p class="card-text">11asdas</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 customcol">
<div class="card cardall">
<div class="card-body">
<p class="card-text">12asd</p>
</div>
</div>
</div>
</div>
</div>
Related
In a section of my code I made a row-grid for a part that displays images but when I went to insert and look at the website its not displaying in a row format but in a column and im not sure why. I thought the problem came from it being col-sm-6 but i changed it to col-sm-12 and its still not displaying it. Any reasons why?
.site-main .project-area {
padding: 4rem 0;
}
.site-main .project-area .button-group button {
background: transparent;
border: none;
font: normal 500 16px/130px var(--lato);
text-transform: uppercase;
}
.site-main .project-area .button-group button+button {
padding-left: 3rem;
}
.site-main .project-area .grid .our-project>title h4 {
font: normal 700 25px/12px var(--lato);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="project-area">
<div class="container">
<div class="project title pb-5">
<h1 class="h1 text-uppercase title-h1"> Recent Projects</h1>
<h1 class="h1 text-uppercase title h1"> Quality Work</h1>
</div>
<div class="div button-group">
<button type="button" class="active">All</button>
<button type="button" data-filter=".cars">Cars</button>
<button type="button" data-filter=".character">Characters</button>
<button type="button">Food</button>
<button type="button">Activities</button>
</div>
<div class="row-grid">
<div class="col-lg-4 col-md-6 col-sm-6 element-item cars">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/car.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">minimul design</h4>
<span class="text-secondary">Latest, Popular</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item character">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/images.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">video game character</h4>
<span class="text-secondary">popular, Portfolio</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item popular">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/ntfs-to-be-professional-gamer-image1.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">minimul design</h4>
<span class="text-secondary">Latest, Popular</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item popular">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/ntfs-to-be-professional-gamer-image1.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">minimul design</h4>
<span class="text-secondary">Latest, Popular</span>
</div>
</div>
</div>
</div>
</div>
</section>
Changing the class row-grid to row makes it work. I don't think Bootstrap has a class called row-grid.
If you are trying to fit all the div elements into one row, just replace the col-lg-4 col-md-6 col-sm-6 and the col-lg-4 col-md-6 col-sm-12 with col
I am new to web devlopment and stuck on this issue for quite some time now.
I wish to make a table(in 2nd col-6) with buttons at top and than changing content(scrollable cards) below it based on button click.
I tried to implement it but my cards and buttons overlap how to tackle this and overlapping makes buttons non reactive.
<div class="Container">
<div class="row">
<div class="col-md-6 ">
<div > this is the table</div>
</div>
<div class="col-md-6 ">
<div class="container">
<div >
<div v-for="(eachbutton, index) in getbuttons" :key="index" style="color:#ffff">
<button class="tablink" style="margin-bottom:12px" #click="changeList(eachWidget.displayTitle)" id="defaultOpen">{{eachbutton.displayTitle}}</button>
</div>
</div>
<div v-for="(each, index) in getCarddata" :key="index" style="color:#ffff">
<div class="col-md-4 col-12 " style="width: 200px; height:90px margin-top: 90px">
<div class="card mb-6" style="background-color: #050b06;">
<div class="row g-0 ">
<div class="col-md-6 col-6 w-100 h-100">
<img class="w-100 h-100" style="margin:11px" :src="each.ImageUrl" alt="..." />
</div>
<div class="col-md-6 col-6">
<p class="card-text text-episode" style="text-align: left; color:#fff;">
<small class="text-muted"> card</small>
</p>
<p class="card-text text-start" style="text-align: left;">
<small class="text-muted">text</small
>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I hope you are using bootstrap 4 or higher, Try this
<div class="Container">
<div class="row">
<div class="col-md-6 ">
<div > this is the table</div>
</div>
<div class="col-md-6 ">
<div class="row">
<div class="col-md-12">
<div v-for="(eachbutton, index) in getbuttons" :key="index" style="color:#ffff">
<button class="tablink" style="margin-bottom:12px" #click="changeList(eachWidget.displayTitle)" id="defaultOpen">{{eachbutton.displayTitle}}</button>
</div>
</div>
<div class="col-md-12">
<div v-for="(each, index) in getCarddata" :key="index" style="color:#ffff">
<div class="col-md-4 col-12 " style="width: 200px; height:90px margin-top: 90px">
<div class="card mb-6" style="background-color: #050b06;">
<div class="row g-0 ">
<div class="col-md-6 col-6 w-100 h-100">
<img class="w-100 h-100" style="margin:11px" :src="each.ImageUrl" alt="..." />
</div>
<div class="col-md-6 col-6">
<p class="card-text text-episode" style="text-align: left; color:#fff;">
<small class="text-muted"> card</small>
</p>
<p class="card-text text-start" style="text-align: left;">
<small class="text-muted">text</small
>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
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 need space between the cards as shown in the picture, how do I add spacing so that structure remains the same
<div class="container" style="padding: 16px;">
<div class="row">
<div class="center">
<div class="card text-white bg-primary mb-r" style="width:100px;height:100px;margin: auto;">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h7 class="card-text" style="align-content:flex-end">916</h7>
</div>
</div>
</div>
<div class="center">
<div class="card text-white bg-primary mb-r" style="width:100px;height:100px;margin: auto;">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h7 class="card-text" style="align-content:flex-end">916</h7>
</div>
</div>
</div>
<div class="center">
<div class="card text-white bg-primary" style="width:100px;height:100px;margin: auto;">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h7 class="card-text" style="align-content:flex-end">916</h7>
</div>
</div>
</div>
<div class="center">
<div class="card text-white bg-primary" style="width:100px;height:100px;margin: auto;">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h7 class="card-text" style="align-content:flex-end">916</h7>
</div>
</div>
</div>
</div>
</div>
The picture below is the code I have written, I need spacing between them.
To have spacing between cards just use standard Bootstrap layout, that is using row and columns. Columns have gutters by default. Read more: https://getbootstrap.com/docs/4.3/layout/overview/
There were many errors like <h7> tags, using incorrect css properties etc. Just go through my code and see the changes I made.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-3">
<div class="card w-100 text-white bg-primary">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
</div>
<div class="col-3">
<div class="card w-100 text-white bg-primary">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
</div>
<div class="col-3">
<div class="card w-100 text-white bg-primary">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
</div>
<div class="col-3">
<div class="card w-100 text-white bg-primary">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
</div>
</div>
</div>
I know you asked that the structure didn't change however I believe some edits needed to be made, here is a jsFiddle with some suggestions: https://jsfiddle.net/kcozqd9L/2/
CSS
.container{
padding: 16px;
}
.card{
position: relative;
display: inline-block;
width:100px;
height:100px;
margin: auto;
}
/*.card-body{
}
.card-title{
}*/
.card-text{
align-content:flex-end
}
HTML
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="center">
<div class="card text-white bg-primary mb-r">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
<div class="card text-white bg-primary mb-r">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
<div class="card text-white bg-primary">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
<div class="card text-white bg-primary">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
</div>
</div>
</div>
The following code using flexbox/centre bootstrap media card works correctly, apart from when viewed on a mobile sized screen, where the boxes are aligned to the left. I'd like them centred in the screen.
I looked at changing align-self-left to centre or text-align: center but it does not appear to work. I tried applying this to the article and row below. Not sure why it will not centre correctly?
CSS
.card .card-body {
padding: 15px;
text-align: center;
}
.boxFixDw {
display:inline-block; width: 285px;
color: #1576b9;
}
HTML
<div class="row flexbox-wrap">
<div class="col-lg-4 flexbox-equalise">
<article class="media card card-1">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<div class="card-body align-self-left">
<h4 class="list-group-item-headline boxFixDw">LATEST RESOURCES</h4>
<p class="list-group-item-text">More added each week.</p>
VIEW NOW
</div>
</div>
</div>
</article>
</div>
<div class="col-lg-4 flexbox-equalise">
<article class="media card card-1">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<div class="card-body card-body-left">
<h4 class="list-group-item-headline boxFixDw">JOIN NOW</h4>
<p class="list-group-item-text">For instant access.</p>
SIGN UP
</div>
</div>
</div>
</article>
</div>
<div class="col-lg-4 flexbox-equalise">
<article class="media card card-1">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<div class="card-body card-body-left">
<h4 class="list-group-item-headline boxFixDw">SAMPLE RESOURCES</h4>
<p class="list-group-item-text">Check the quality.</p>
VIEW NOW
</div>
</div>
</div>
</article>
</div>
</div>
apart from when viewed on a mobile sized screen, where the boxes are
aligned to the left.
To center the cards on mobile you need to change align-items: flex-start; to align-items: center; for the .media through media query
#media only screen and (max-width: 767px) {
.media {
align-items: center !important;
}
}
.card .card-body {
padding: 15px;
text-align: center;
}
.boxFixDw {
display:inline-block; width: 285px;
color: #1576b9;
}
#media only screen and (max-width: 990px) {
.media {
align-items: center !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row flexbox-wrap">
<div class="col-lg-4 flexbox-equalise">
<article class="media card card-1">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<div class="card-body align-self-left">
<h4 class="list-group-item-headline boxFixDw">LATEST RESOURCES</h4>
<p class="list-group-item-text">More added each week.</p>
VIEW NOW
</div>
</div>
</div>
</article>
</div>
<div class="col-lg-4 flexbox-equalise">
<article class="media card card-1">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<div class="card-body card-body-left">
<h4 class="list-group-item-headline boxFixDw">JOIN NOW</h4>
<p class="list-group-item-text">For instant access.</p>
SIGN UP
</div>
</div>
</div>
</article>
</div>
<div class="col-lg-4 flexbox-equalise">
<article class="media card card-1">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<div class="card-body card-body-left">
<h4 class="list-group-item-headline boxFixDw">SAMPLE RESOURCES</h4>
<p class="list-group-item-text">Check the quality.</p>
VIEW NOW
</div>
</div>
</div>
</article>
</div>
</div>
</div>