The container is used to set the content’s margins dealing with the responsive behaviors of your layout.
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
The columns have been created by wrapping four DIV elements into one container DIV.
In this, we are using a class called card in that we defined a property called
HTML
<div class="container"> <br/><br/> <section> <div class="row"> <div class="card"> <div class="card-cp"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of </p> </div> </div> <div class="card"> <div class="card-cp"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of </p> </div> </div> <div class="card"> <div class="card-cp"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of </p> </div> </div> <div class="card"> <div class="card-cp"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of </p> </div> </div> <div class="card"> <div class="card-cp"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of </p> </div> </div> </div> </section>
CSS
body{background:#f1f1f1;}
section{background:#fff;padding:40px;}
.card{flex:0 25%;margin-bottom:30px !important;padding:15px;border:none;}
.profile{margin-top:80px;padding:5px;}
.profile a{position: absolute; bottom: 20px;}
.card-cp{background-color: #fff;background-clip:border-box;
border:1px solid rgba(0,0,0,.125);border-radius:.25rem;padding:15px;}
@media(max-width:1000px){.card{flex:0 50%;}}
@media(max-width:768px){.card{flex:0 100%;}}
the property flex:0 25% will defineds the first value must be a <number> and it is interpreted as <flex-grow>. The second value must be one of:
a <number>: then it is interpreted as <flex-shrink>. (or) a valid value for width: then it is interpreted as <flex-basis>.
flex:0 25% ; is used to create four div elements (or) four flex boxes. flex:0 33.33% is used to create three flex boxes. flex:0 50% is used to create two flex boxes. flex:0 100% is used to create one flex box.