How to arrange these bootstrap elements in an html page - html

I want to create a web page with html and bootstrap 4 and I'm having trouble arranging my page following this template.
<!doctype html>
<html lang="en">
<head>
<title>Hepatrote with Bootstrap v4</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<p class="h5 my-0 me-md-auto fw-normal">Hepatrote</p>
<nav class="my-2 my-md-0 me-md-3">
<a class="p-2 text-dark" href="#">Accueil</a>
<a class="p-2 text-dark" href="#">Blog</a>
<a class="p-2 text-dark" href="#">Symptoms</a>
<a class="p-2 text-dark" href="#">Contacts</a>
</nav>
</header>
<main class="container">
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<!-- How to arrange these elements: left side : Symptoms with text and button 'How to protect yourself ?'
; rgiht side : Image of disease -->
<!-- How to arrange these elements: Symptoms with text and 4 bootstrap cards With this arrangement-->
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
</div>
<footer class="pt-4 my-md-5 pt-md-5 border-top">
</footer>
</main>
</body>
</html>
In my code, you can see the based structure : head,body and I also added bootstrap link. My problem is to arrange the elements as shown in the picture.
Does anyone have an idea?


Here is basic stracture of your image using bootstrap 4, this is not responsive so you need to some work for responsive.
Code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Hepatrote with Bootstrap v4</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<header class="d-flex justify-content-between flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<p class="h5 my-0 me-md-auto fw-normal">Hepatrote</p>
<nav class="my-2 my-md-0 me-md-3">
<a class="p-2 text-dark" href="#">Accueil</a>
<a class="p-2 text-dark" href="#">Blog</a>
<a class="p-2 text-dark" href="#">Symptoms</a>
<a class="p-2 text-dark" href="#">Contacts</a>
</nav>
</header>
<main class="container">
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto">
<div class="row">
<div class="col">
<h1>Symptoms</h1>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</div>
<div class="col">
<h1>Image of dieses</h1>
</div>
</div>
<div class="row">
<div class="col-12">
<h1 class="text-center">Syptoms</h1>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
</div>
<div class="row">
<div class="col-6 ">
<div class="card">
<div class="card-body">
<div class="w-50 d-inline-block" >
<h5>Image1</h5>
</div>
<div class="w-50 d-inline-block">
<h5>Sympt1</h5>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="w-50 d-inline-block" >
<h5>Image1</h5>
</div>
<div class="w-50 d-inline-block">
<h5>Sympt1</h5>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="w-50 d-inline-block" >
<h5>Image1</h5>
</div>
<div class="w-50 d-inline-block">
<h5>Sympt1</h5>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="w-50 d-inline-block" >
<h5>Image1</h5>
</div>
<div class="w-50 d-inline-block">
<h5>Sympt1</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="pt-4 my-md-5 pt-md-5 border-top">
</footer>
</main>
</body>
</html>
`


main {
width:90%;
}
#maincss {
position: relative;
height: 100%;
width:100%;
margin:auto;
}
#maincol {
position: relative;
padding: 1rem;
margin:auto;
}
#mainimg {
position:relative;
max-width:100%;
}
#3rdcss {
position: relative;
min-height: 100%;
}
img {
position:relative;
width:100%;
}
#3rdcol {
position: relative;
min-height: 100%;
margin: auto;
}
#cardzcol {
position:relative;
margin:auto;
padding:0.5rem;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Hepatrote with Bootstrap v4</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<header class="d-flex justify-content-between flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<p class="h5 my-0 me-md-auto fw-normal">Hepatrote</p>
<nav class="my-2 my-md-0 me-md-3">
<a class="p-2 text-dark" href="#">Accueil</a>
<a class="p-2 text-dark" href="#">Blog</a>
<a class="p-2 text-dark" href="#">Symptoms</a>
<a class="p-2 text-dark" href="#">Contacts</a>
</nav>
</header>
<main class="container">
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<div id="maincss" class="row">
<div id="maincol" class="col-6">
<h2>Title</h2>
<p>text relative</p>
<input type="button" class="btn btn-primary" value="button" />
</div>
<div id="maincol" class="col-6 ">
<div id="mainimg"><img src="https://tmladenov.tech/images/img-test.png" title="img" /></div></div>
<div id="maincol" class="col-12 ">
<div id="3rdcss" class="row ">
<div id="3rdttl" class="col-12 ">
<h2>Title</h2>
<p>some more text to be shown</p>
</div>
<div id="cardzcol" class="col-6 ">
<div id="cardz" class="card">
<div class="card-body">
<div id="cardrw" class="row">
<div id="crdimgcol" class="col-6"><img src="https://tmladenov.tech/images/img-test.png" title="img" /></div>
<div id="crdtxtcol" class="col-6">
<h5 class="card-title">[card-1]</h5>
<p class="card-text">some text here</p>
</div>
</div>
</div>
</div>
</div>
<div id="cardzcol" class="col-6 ">
<div id="cardz" class="card">
<div class="card-body">
<div id="cardrw" class="row">
<div id="crdimgcol" class="col-6"><img src="https://tmladenov.tech/images/img-test.png" title="img" /></div>
<div id="crdtxtcol" class="col-6">
<h5 class="card-title">[card-2]</h5>
<p class="card-text">some text here</p>
</div>
</div>
</div>
</div>
</div>
<div id="cardzcol" class="col-6 ">
<div id="cardz" class="card">
<div class="card-body">
<div id="cardrw" class="row">
<div id="crdimgcol" class="col-6"><img src="https://tmladenov.tech/images/img-test.png" title="img" /></div>
<div id="crdtxtcol" class="col-6">
<h5 class="card-title">[card-3]</h5>
<p class="card-text">some text here</p>
</div>
</div>
</div>
</div>
</div>
<div id="cardzcol" class="col-6 ">
<div id="cardz" class="card">
<div class="card-body">
<div id="cardrw" class="row">
<div id="crdimgcol" class="col-6"><img src="https://tmladenov.tech/images/img-test.png" title="img" /></div>
<div id="crdtxtcol" class="col-6">
<h5 class="card-title">[card-4]</h5>
<p class="card-text">some text here</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="pt-4 my-md-5 pt-md-5 border-top">
[footer]
</footer>
</main>
</body>
</html>

Related

Why does my Bootstrap stretched link extend out several levels?

I am trying to stretched link for my nested div but it is including even parent. I need only listItem to be clickable but this makes entire card div clickable.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<div class="col-xl-12 col-md-12 mb-3 mt-2">
<div class="card custom-bg-2 h-100">
<div class="card-header bg-secondary">
<h3 class="fw-bold text-white text-center">Page Title</h3>
</div>
<div class="card-body">
<div class="listItem">
<img src="https://via.placeholder.com/100" class="rounded" alt="Title">
<p><span class="badge bg-secondary text-light" style="font-size: large;">Title</span></p>
<p><span class="badge bg-secondary ms-2">Views</span></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xl-12 col-md-8 mb-3 mt-2">
<div class="card custom-bg-2 h-100">
<div class="card-header bg-secondary">
<h3 class="fw-bold text-white">Category</h3>
</div>
<div class="card-body">
....
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Per the Bootstrap docs (and the fundamental rules of absolute positioning), stretched links apply to the nearest element with non-static positioning. You can put the position-relative class on the parent to make that so.
I've also replaced your inline font size styles with the lead class on the parent paragraph. Just don't use inline styles, especially when your style library provides typography classes for that.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<div class="col-xl-12 col-md-12 mb-3 mt-2">
<div class="card custom-bg-2 h-100">
<div class="card-header bg-secondary">
<h3 class="fw-bold text-white text-center">Page Title</h3>
</div>
<div class="card-body">
<div class="listItem position-relative">
<img src="https://via.placeholder.com/100" class="rounded" alt="Title">
<p class="lead"><span class="badge bg-secondary text-light">Title</span></p>
<p><span class="badge bg-secondary ms-2">Views</span></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xl-12 col-md-8 mb-3 mt-2">
<div class="card custom-bg-2 h-100">
<div class="card-header bg-secondary">
<h3 class="fw-bold text-white">Category</h3>
</div>
<div class="card-body">
....
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Get the 'card-title' to start just above a div

I want the 'title' to start right above 'first yeah', the image should also start there
I've tried several ways (and with some classes) but I haven't succeeded
The card code:
<div class="card border-dark">
<div class="card-body" style="background-color: #706747;">
<h1 class="card-title">
<p class="text-body">
<img src="/assets/logo.gif" alt="" width="60" height="48" class="d-inline-block">
{{cosos}} title
</p>
</h1>
<br>
<div class="d-flex flex-nowrap bd-highlight justify-content-center">
<div class="order-1 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second</div>
<div class="order-3 p-2 bd-highlight">Third</div>
<div class="order-4 p-2 bd-highlight">Final yup</div>
</div>
</div>
</div>
I'm using Bootstrap 5 for everything, I have no classes or styles of my own

Step 1: remove class justify-content-center and add p-2 after class card-title. Now you will see your logo.gif and title will align with first nav bar item.
Step 2: Add place-self: center; to the div with class card-body.
Step 3: Assign background-color: #706747; to the class card, remove from card-body div.
The updated HTML will be like this:
<div class="card border-dark" style="background-color: #706747;">
<div class="card-body" style="place-self: center;">
<h1 class="card-title p-2">
<p class="text-body">
<img src="/assets/logo.gif" alt="" width="60" height="48" class="d-inline-block"> {{cosos}} title
</p>
</h1>
<div class="d-flex flex-nowrap bd-highlight ">
<div class="order-1 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second</div>
<div class="order-3 p-2 bd-highlight">Third</div>
<div class="order-4 p-2 bd-highlight">Final yup</div>
</div>
</div>
</div>

You can make use of the grid-layout of bootstrap to align the elements.
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="card border-dark">
<div class="card-body" style="background-color: #706747;">
<h1 class="card-title">
<p class="text-body">
<div class="row">
<div class="col-3">
</div>
<div class="col-2">
<img src="/assets/logo.gif" alt="" width="60" height="48" >
</div>
<div class="col-7">
<span id="title1"> fdasdstitle</span>
</div>
</div>
</p>
</h1>
<br>
<div class="d-flex flex-nowrap bd-highlight justify-content-center">
<div class="order-1 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second</div>
<div class="order-3 p-2 bd-highlight">Third</div>
<div class="order-4 p-2 bd-highlight">Final yup</div>
</div>
</div>
</div>
</body>
</html>

how to disable auto scrolling when going to a section using anchor links?

I made these vertical tabs using HTML + CSS only (because I'm challenging myself not to use ANY SCRIPTING AT ALL). It works but I can't disable the automatic scrolling when I open a section and click on a different section.
I know it's a natural behavior to jump on a different section when using anchor links, but I want to disable this so it would look like normal vertical tabs with scripts on it.
Here's my CodePen for this.
https://codepen.io/bosskeito/pen/qBXzdpX
I'm working on Drupal CMS with Bootstrap 4.6.1
.cstmTabTargetVertical:not(:target) {
display: none;
}
.cstmTabTargetVertical:target {
display: block;
}
.cstmTabBtn {
border-radius: 0 !important;
}
.cstmTabVertical .cstmTabBtn {
width: 100%;
}
.cstmTabTargetVertical:before {
content: "";
display: block;
height: 100px;
margin: -100px 0 0 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap-grid.min.css" integrity="sha512-Xj2sd25G+JgJYwo0cvlGWXoUekbLg5WvW+VbItCMdXrDoZRWcS/d40ieFHu77vP0dF5PK+cX6TIp+DsPfZomhw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap-reboot.min.css" integrity="sha512-ioOlrrQQ3fZN/A7N2rZVm6JXp/Lg7xtda9OaRKornjBcuTW/UqIhTlPyngcGQGrQTOhJgmSltKM4v3Ne03WPug==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="dFullWidth">
<div class="row">
<div class="col-lg-12 px-0 dBGLightGray">
<div class="container-fluid px-0">
<div class="dContainer1270">
<div class="row mx-auto cstmMobileNarrow">
<div class="col-md-12 my-3">
<p class="dh2 dFontDarkGray mb-0 pb-4">General Information Sheet 1</p>
</div>
<div class="col-md-2 cstmTabVertical">
<a href="#GSI_2021" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2021</p>
</a>
<a href="#GSI_2020" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2020</p>
</a>
</div>
<div class="col-md-10">
<div class="cstmTabTargetVertical" id="GSI_2021">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2021</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 1</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cstmTabTargetVertical" id="GSI_2020">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2020</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 2</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dFullWidth">
<div class="row">
<div class="col-lg-12 px-0 dBGLightGray">
<div class="container-fluid px-0">
<div class="dContainer1270 py-5">
<div class="row mx-auto py-5 cstmMobileNarrow">
<div class="col-md-12 my-3">
<p class="dh2 dFontDarkGray mb-0 pb-4">General Information Sheet 2</p>
</div>
<div class="col-md-2 cstmTabVertical">
<a href="#GSA_2021" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2021</p>
</a>
<a href="#GSA_2020" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2020</p>
</a>
</div>
<div class="col-md-10">
<div class="cstmTabTargetVertical" id="GSA_2021">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2021</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 1</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cstmTabTargetVertical" id="GSA_2020">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2020</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 2</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dFullWidth">
<div class="row">
<div class="col-lg-12 px-0 dBGLightGray">
<div class="container-fluid px-0">
<div class="dContainer1270">
<div class="row mx-auto cstmMobileNarrow">
<div class="col-md-12 my-3">
<p class="dh2 dFontDarkGray mb-0 pb-4">General Information Sheet 3</p>
</div>
<div class="col-md-2 cstmTabVertical">
<a href="#GSB_2021" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2021</p>
</a>
<a href="#GSB_2020" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2020</p>
</a>
</div>
<div class="col-md-10">
<div class="cstmTabTargetVertical" id="GSB_2021">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2021</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 1</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cstmTabTargetVertical" id="GSB_2020">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2020</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 2</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Bootstrap 5 card tile position adding conflict

I'm tiring to using bootstrap 5 card to my attached image like card view, does any one know how to do that correctly on bootstrap 5 ?
here the my code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>My </title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body >
<!--Start main layout-->
<div class="wrapper">
<div class="d-flex justify-content-center mt-5">
<div class="">
<div class="container">
<div id="dynamic content" class="dynamic-content">
<div class="row align-items-center animated flipInY slow delay-2s">
<div class="col-md-2 col-xs-12">
<div class="content" id="tile1">
<i class="fa fa-home fa-5x"></i>
<p>My Book</p>
</div>
</div>
<div class="col-md-2">
<div class="content" id="tile2">
<i class="fa fa-user fa-5x"></i>
<p>About</p>
</div>
</div>
<div class="col-md-6">
<div class="content" id="tile3">
<i class="fa fa-cogs fa-5x"></i>
<p>Services</p>
</div>
</div>
<div class="col-md-2">
<div class="content" id="tile4">
<i class="fa fa-comment fa-5x"></i>
<p>Feedback</p>
</div>
</div>
<div class="col-md-4">
<div class="content" id="tile5">
<i class="fa fa-briefcase fa-5x"></i>
<p>Portfolio</p>
</div>
</div>
<div class="col-md-3">
<div class="content" id="tile6">
<i class="fa fa-envelope fa-5x"></i>
<p>Contact</p>
</div>
</div>
<div class="col-md-5">
<div class="content" id="tile7">
<i class="fa fa-quote-right fa-5x"></i>
<p>Free Quote</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End of main layout-->
</body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/popper.min.js" ></script>
<script src="js/bootstrap.min.js" ></script>
</html>
Thanks

Use Bootstrap 5 grid system
Use class .row to make rows and class .col to make columns.
As stated on Bootstrap 5 official website: There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g. col-4 spans four).
This is why I used .col-3 four times. These four .col-3 make four main "sections". All together they make up to maximal 12 columns per row (i.e. 3 * 4 = 12). Inside these four main "sections" there are bunch of .rows and .cols.
Which .col should you use?
Use .col-5 and .col-11 like this:
.col-5 two times inside the same .row if you want to have
two boxes in a row or
.col-11 one time inside the same .row if you want to have one box in a row.
Why these two (i.e., .col-5 and .col-11)?
Why not .col-6 and .col-12? Well, if you use .col-6 two times inside the same .row, there will not be any space left in between these boxes. Remember, there are maximal 12 columns per row! If you use .col-6 two times, you fill up the whole row (6 * 2 = 12). But if you use .col-5 two times, there is still some space left (5 * 2 = 10).
Using .col-5 two times inside the same .row:
Using .col-6 two times inside the same .row:
By default, if you use .col-5 two times in the same .row (see the first image), these two columns will position themselves so that there will be some space in between them.
Use .col-11 purely from aesthetical standpoint. If you use .col-11 below or above a row with two .col-5 these two rows will be the same width (if you use .col-12 this row will be wider than the row below or above with two .col-5). But in order to achieve both rows to be the same width, you also need to add .d-flex .justify-content-around to all rows where you want to have two boxes in a row to "push these two boxes apart from each other" and therefore make this row the same width as the one below or above. For more information, see this link.
Other stuff
Use class .d-flex .justify-content-center for the horizontal alignment and class .d-flex .align-items-center for the vertical alignment. With these two you can center your content (i.e. Font Awesome icons and titles) inside all of these boxes horizontally and vertically at the same time.
Be careful, you also need to wrap your Font Awesome icon and the title with <div class='text-center'>...</div> like this if you want to center the text (not the boxes but the text):
<div class='col-5 d-flex justify-content-center align-items-center one'>
<div class='text-center'>
<i class='fa fa-home fa-5x'></i>
<div id='white'>My book</div>
</div>
</div>
At the end of the HTML add an image. Add CSS like this:
position: absolute; and z-index: -100; to put it in the background (without position: absolute; the z-index will not work and consequently the image will not be put in the background),
width: 100vw; and height: 100vh; to make the image full screen width and height and
filter: blur(50px); to add the blur effect.
The snippet
body {
margin: 0;
padding: 0;
}
#wrapper {
width: 100vw;
height: 100vh;
}
#inner_wrapper {
margin-top: -15vh;
margin-left: 10%;
}
.row {
margin: 0;
width: 100%;
height: 15vh;
/* Set this value the same as the margin-top for the #inner_wrapper. */
}
.col-5,
.col-11 {
border-radius: 1vw;
}
.fa-home {
font-size: 2.5vw;
color: white;
}
#white {
font-size: 1vw;
color: white;
}
.one {
background-color: #2c78e2;
}
.two {
background-color: #15bb88;
}
.three {
background-color: #e27b2c;
}
.four {
background-color: #1a65ac;
}
.five {
background-color: #15bb88;
}
.six {
background-color: #8cc63e;
}
.seven {
background-color: #e27b2c;
}
.eight {
background-color: #e27b2c;
}
.nine {
background-color: #b44be8;
}
.ten {
background-color: #2c78e2;
}
.eleven {
background-color: #2c78e2;
}
.twelve {
background-color: #8cc63e;
}
#img {
position: absolute;
width: 100vw;
height: 100vh;
z-index: -100;
filter: blur(50px);
-moz-filter: blur(50px);
-webkit-filter: blur(50px);
-o-filter: blur(50px);
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link href='https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl' crossorigin='anonymous'>
<script src='https://use.fontawesome.com/releases/v5.15.3/js/all.js' data-auto-replace-svg='nest'></script>
</head>
<body>
<div id='wrapper' class='d-flex align-items-center'>
<div id='inner_wrapper' class='row'>
<div class='col-3'>
<div class='row m-2 d-flex justify-content-around'>
<div class='col-5 d-flex justify-content-center align-items-center one'>
<div class='text-center'>
<i class='fa fa-home fa-5x'></i>
<div id='white'>My book</div>
</div>
</div>
<div class='col-5 d-flex justify-content-center align-items-center two'></div>
</div>
<div class='row m-2 d-flex justify-content-around'>
<div class='col-5 d-flex justify-content-center align-items-center three'></div>
<div class='col-5 d-flex justify-content-center align-items-center four'></div>
</div>
</div>
<div class='col-3'>
<div class='row m-2 d-flex justify-content-center'>
<div class='col-11 d-flex justify-content-center align-items-center five'></div>
</div>
<div class='row m-2 d-flex justify-content-around'>
<div class='col-5 d-flex justify-content-center align-items-center six'></div>
<div class='col-5 d-flex justify-content-center align-items-center seven'></div>
</div>
</div>
<div class='col-3'>
<div class='row m-2 d-flex justify-content-around'>
<div class='col-5 d-flex justify-content-center align-items-center eight'></div>
<div class='col-5 d-flex justify-content-center align-items-center nine'></div>
</div>
<div class='row m-2 d-flex justify-content-center'>
<div class='col-11 d-flex justify-content-center align-items-center ten'></div>
</div>
</div>
<div class='col-3'>
<div class='row m-2 d-flex justify-content-start'>
<div class='col-5 d-flex justify-content-center align-items-center eleven'></div>
</div>
<div class='row m-2 d-flex justify-content-start'>
<div class='col-5 d-flex justify-content-center align-items-center twelve'></div>
</div>
</div>
</div>
<img id='img' src='https://animals.sandiegozoo.org/sites/default/files/2016-11/animals_hero_giraffe_1_0.jpg'>
</div>
</body>
</html>

Bootstrap Card Solution
with minimal css
The Layout
#groups {
min-width: 1140px;
}
body {
background-image: url(https://i.imgur.com/W3BxqV7.png);
}
.item {
height: 100px;
margin: 5px;
}
.group.col {
margin: 10px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Sheffield haworth </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row" id="groups">
<div class="group col">
<div class="row">
<div class="card col item">
</div>
<div class="card col item">
</div>
</div>
<div class="row">
<div class="card col item">
</div>
<div class="card col item">
</div>
</div>
</div>
<div class="group col">
<div class="row">
<div class="card col item">
</div>
</div>
<div class="row">
<div class="card col item">
</div>
<div class="card col item">
</div>
</div>
</div>
<div class="group col">
<div class="row">
<div class="card col item">
</div>
<div class="card col item">
</div>
</div>
<div class="row">
<div class="card col item">
</div>
</div>
</div>
<div class="group col">
<div class="row" style="width:138px">
<div class="card col item">
</div>
</div>
<div class="row" style="width:138px">
<div class="card col item">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
With Styling
Automated using JavaScript, but easy to implement with CSS nonetheless
const colors = ["#2C78E2", "#43BB88", "#E27B2D", "#1A65AC", "#43BB88", "#8CC53E", "#E27B2D", "#E27B2D", "#B44BE8", "#2C78E2", "#2C78E2", "#8CC53E"];;
document.querySelectorAll('.item').forEach(function(e, i) {
e.style.backgroundColor = colors[i];
})
#groups {
min-width: 1140px;
}
body {
background-image: url(https://i.imgur.com/W3BxqV7.png);
}
.item {
height: 100px;
margin: 5px;
}
.group.col {
margin: 10px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Sheffield haworth </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row" id="groups">
<div class="group col">
<div class="row">
<div class="card col item">
</div>
<div class="card col item">
</div>
</div>
<div class="row">
<div class="card col item">
</div>
<div class="card col item">
</div>
</div>
</div>
<div class="group col">
<div class="row">
<div class="card col item">
</div>
</div>
<div class="row">
<div class="card col item">
</div>
<div class="card col item">
</div>
</div>
</div>
<div class="group col">
<div class="row">
<div class="card col item">
</div>
<div class="card col item">
</div>
</div>
<div class="row">
<div class="card col item">
</div>
</div>
</div>
<div class="group col">
<div class="row" style="width:138px">
<div class="card col item">
</div>
</div>
<div class="row" style="width:138px">
<div class="card col item">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
With Content
const colors = ["#2C78E2", "#43BB88", "#E27B2D", "#1A65AC", "#43BB88", "#8CC53E", "#E27B2D", "#E27B2D", "#B44BE8", "#2C78E2", "#2C78E2", "#8CC53E"];;
document.querySelectorAll('.item').forEach(function(e, i) {
e.style.backgroundColor = colors[i];
})
#groups {
min-width: 1140px;
}
body {
background-image: url(https://i.imgur.com/W3BxqV7.png);
}
.item {
height: 100px;
margin: 5px;
}
.group.col {
margin: 10px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Sheffield haworth </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row" id="groups">
<div class="group col">
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
</div>
<div class="group col">
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Large</p>
</div>
</div>
</div>
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
</div>
<div class="group col">
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Large</p>
</div>
</div>
</div>
</div>
<div class="group col">
<div class="row" style="width:138px">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
<div class="row" style="width:138px">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Responsive
const colors = ["#2C78E2", "#43BB88", "#E27B2D", "#1A65AC", "#43BB88", "#8CC53E", "#E27B2D", "#E27B2D", "#B44BE8", "#2C78E2", "#2C78E2", "#8CC53E"];;
document.querySelectorAll('.item').forEach(function(e, i) {
e.style.backgroundColor = colors[i];
})
body {
background-image: url(https://i.imgur.com/W3BxqV7.png);
}
.item {
height: 100px;
margin: 5px;
}
.group.col {
margin: 10px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Sheffield haworth </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row" id="groups">
<div class="group col-md">
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
</div>
<div class="group col-md">
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Large</p>
</div>
</div>
</div>
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
</div>
<div class="group col-md">
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Large</p>
</div>
</div>
</div>
</div>
<div class="group col-md">
<div class="row" style="width:138px">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
<div class="row" style="width:138px">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Magento 1.9 : How to add HTML, BOOTSTRAP & CSS to static block?

Following are my responsive html code with bootstrap design, if i add to CMS->Page->Content my cms page look like collapsed, header and footer alignment issue.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="font-size: larger;">
<h2>Kolupadi Manual</h2>
<p>All kind of Kolu Padi Manual list</p>
<h4 align="center"><u>3 Steps Kolupadi</u></h4>
<div class="card-columns">
<div class="card bg-light">
<div class="card-body text-center">
3 Compact Kolu Padi
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<a href="https://abc.in/media/kolupadi-pdf/regular/3_regular_booklet_2017.pdf" class="card-text">3 Regular Kolupadi
</a>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<a href="https://abc.in/media/kolupadi-pdf/triple/3_trible_booklet_2017.pdf" class="card-text">3 Triple Kolu Padi
</a>
</div>
</div>
</div>
<br>
<h4 align="center"><u>5 Steps Kolupadi</u></h4>
<div class="card-columns">
<div class="card bg-light">
<div class="card-body text-center">
5 Compact Kolu Padi
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<a href="https://abc.in/media/kolupadi-pdf/regular/5_regular_booklet_2017.pdf" class="card-text">5 Regular Kolupadi
</a>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<a href="https://abc.in/media/kolupadi-pdf/triple/5_triple_booklet_feb_2017.pdf" class="card-text">5 Triple Kolu Padi
</a>
</div>
</div>
</div>
<br>
<h4 align="center"><u>7 Steps Kolupadi</u></h4>
<div class="card-columns">
<div class="card bg-light">
<div class="card-body text-center">
7 Compact Kolu Padi
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<a href="https://abc.in/media/kolupadi-pdf/regular/7_regular_booklet_2017.pdf" class="card-text">7 Regular Kolupadi
</a>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<a href="https://abc.in/media/kolupadi-pdf/triple/7_triple_booklet_feb_2017.pdf" class="card-text">7 Triple Kolu Padi
</a>
</div>
</div>
</div>
<br>
<h4 align="center"><u>9 Steps Kolupadi</u></h4>
<div class="card-columns">
<!-- <div class="card bg-light">
<div class="card-body text-center">
3 Compact Kolu Padi
</div>
</div> -->
<div class="card bg-light">
<div class="card-body text-center">
<a href="https://abc.in/media/kolupadi-pdf/regular/9_regular_booklet_2017.pdf" class="card-text">9 Regular Kolupadi
</a>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<a href="https://abc.in/media/kolupadi-pdf/triple/9_triple_booklet_2017.pdf" class="card-text">9 Triple Kolu Padi
</a>
</div>
</div>
</div>
<br>
</div>
</body>
</html>
If I directly add above code into CMS->Page->Content, header and footer alignment collapsed.
What is the proper way to add my design to my block?