Grids
Grids are 2D layout used for displaying content along rows and columns.
Grid 30-70 layout
Use this layout to divide the container into 30% and 70% columns respectively. Add grid-30-70 class to the container to use this layout.
Hello, Ms. Jane
You have 7 new notifications pending. Have a look at them.
Refer the below code to use the above grid layout. Make changes as per your requirements.
<div class="grid grid-30-70 g-2 m-2">
<img
class="img-responsive img-round width-30"
src="../../Assets/avatar-female.jpg"
alt="Photo of a Female"
/>
<div class="flex-center flex-col">
<h3>Hello, Ms. Jane</h3>
<p class="text-center">
You have 7 new notifications pending. Have a look at them.
</p>
</div>
</div>
Grid 50-50 layout
Use this layout to divide the container into two equal columns. Add grid-50-50 class to the container to use this layout.
Hello, Ms. Jane
Welcome to your profile.
Refer the below code to use the above grid layout. Make changes as per your requirements.
<div class="grid grid-50-50 g-2 m-2">
<img
class="img-responsive img-round width-30"
src="../../Assets/avatar-female.jpg"
alt="Photo of a Female"
/>
<div class="flex-center flex-col">
<h3>Hello, Ms. Jane</h3>
<p class="text-center">Welcome to your profile.</p>
</div>
</div>
Grid-3 Column layout
Use this layout to divide the container into 3 equal columns. Add grid-3 class to the container to use this layout.
Refer the below code to use the above grid layout. Make changes as per your requirements.
<div class="grid grid-3 g-2 m-2">
<img
class="img-responsive img-round width-30"
src="../../Assets/avatar-female.jpg"
alt="Photo of a Female"
/>
<img
class="img-responsive img-round width-30"
src="../../Assets/avatar-male.jpg"
alt="Photo of a Female"
/>
<img
class="img-responsive img-round width-30"
src="../../Assets/avatar-dog.jpg"
alt="Photo of a Female"
/>
</div>