Create Bootstrap Template From Scratch

In this article we are going to create a real world template from scratch step by step.

Bootstrap Template: 

In this today article, we are going to create a real-world bootstrap template from scratch step by step, Bootstrap is a front end framework with the help of Bootstrap front end framework we can create a bootstrap template or bootstrap website very fast. because it has all free defined classes so just need to reuse those CSS classes in our template.
bootstrap template

Source Code:

index.html



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Real world website</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">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>

    <header id="header">
        <div class="container">
        <div class="header-container">
        <div class="header-text">
            <h1>THE WEBHOST PLATFORM MADE FOR YOU!</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit alit esthum </p>
            <p><a href="#" class="btn btn-primary btn-custom">Get Started &rarr;</a></p>
        </div>
        <!-- Close header-text -->
        </div>
        <!-- Close header-container -->
    </div>
    <!-- Close container -->

    <div id="logo">
        ShareHost
    </div>

    </header>
    <!-- Close header -->

    <section id="features">
    <div class="container">
        <div class="heading">
        <h2>The Webhost Gurantee</h2>
        </div>
        <!-- Close heading -->
    <div class="row">
     <div class="col-md-4 mb-3">
    <div class="card text-center">
    <div class="card-body">
    <div class="cardIcon">
        <span>&#10084;</span>
    </div>
    <!-- Close cardIcon -->
    <div class="cardHeading">
     <h4>100% Uptime Guarantee</h4>
    </div>
    <!-- Close cardHeading -->
    <div class="cardP">
        Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic.
    </div>
    <!-- Close cardP -->
    <div>
        <a href="#" class="btn btn-primary btn-custom">read more &rarr;</a>
    </div>
    </div>
    <!-- Close card-body -->
    </div>
    <!-- Close card -->
     </div>
     <!-- Close col-md-4 -->


     <div class="col-md-4 mb-3">
            <div class="card text-center">
            <div class="card-body">
            <div class="cardIcon">
                <span>&#10020;</span>
            </div>
            <!-- Close cardIcon -->
            <div class="cardHeading">
             <h4>Safe and Secured</h4>
            </div>
            <!-- Close cardHeading -->
            <div class="cardP">
                Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic.
            </div>
            <!-- Close cardP -->
            <div>
                <a href="#" class="btn btn-primary btn-custom">read more &rarr;</a>
            </div>
            </div>
            <!-- Close card-body -->
            </div>
            <!-- Close card -->
             </div>
             <!-- Close col-md-4 -->


             <div class="col-md-4 mb-3">
                    <div class="card text-center">
                    <div class="card-body">
                    <div class="cardIcon">
                        <span>&#10070;</span>
                    </div>
                    <!-- Close cardIcon -->
                    <div class="cardHeading">
                     <h4>Our Dedicated Support</h4>
                    </div>
                    <!-- Close cardHeading -->
                    <div class="cardP">
                        Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic.
                    </div>
                    <!-- Close cardP -->
                    <div>
                        <a href="#" class="btn btn-primary btn-custom">read more &rarr;</a>
                    </div>
                    </div>
                    <!-- Close card-body -->
                    </div>
                    <!-- Close card -->
                     </div>
                     <!-- Close col-md-4 -->
    </div>
    <!-- close row -->
    </div>
    <!-- Close container -->
    </section>
    <!-- Close features -->

    <section id="count">
    <div class="container">
    <div class="heading">
   <h2>MORE THAN 100,000 WEBSITES HOSTED</h2>
    </div>
    <!-- Close heading -->
    <div class="row">
    <div class="col-md-3 text-center">
     <div class="count">
         <h3>34534</h3>
         <p>CMS Installation</p>
     </div>
    </div>
    <!-- Close col-md-3 -->

    <div class="col-md-3 text-center">
            <div class="count">
                <h3>70</h3>
                <p>Award won</p>
            </div>
           </div>
           <!-- Close col-md-3 -->

           <div class="col-md-3 text-center">
                <div class="count">
                    <h3>12000</h3>
                    <p>Registered Domains</p>
                </div>
               </div>
               <!-- Close col-md-3 -->

               <div class="col-md-3 text-center">
                    <div class="count">
                        <h3>34666</h3>
                        <p>Satisfied Customers</p>
                    </div>
                   </div>
                   <!-- Close col-md-3 -->
                   </div>
                   <!-- Close row -->
    </div>
    <!-- Close container -->
    </section>
    <!-- Close count -->

    <section id="prices">
    <div class="container">
        <div class="heading">
     <h2>Choose plan</h2>
        </div>
        <!-- Close heading -->
    <div class="row">
     <div class="col-md-3 mb-3">
     <div class="card text-center">
     <div class="card-body">
      <div class="plan">Free</div>
      <div class="price"><span>$</span>0.00</div>
      <div class="discount">Dicount 5%</div>
      <div class="pClass">
          <p>Enjoy All The Features</p>
          <p>150 GB Bindthwidht</p>
          <p>100 GB Storage</p>
          <p>$1.00 / GB Overages</p>
          <p>All freatures</p>
      </div>
      <!-- Close pClass -->
      <div class="planBtn">
          <a href="#" class="btn btn-primary btn-custom">Choose plan</a>
      </div>
     </div>
     <!-- Close card-body -->
     </div>
     <!-- Close card -->
     </div>
     <!-- Close col-md-3 -->

     <div class="col-md-3 mb-3">
            <div class="card text-center">
            <div class="card-body">
             <div class="plan">Start Up</div>
             <div class="price"><span>$</span>19</div>
             <div class="discount">Dicount 5%</div>
             <div class="pClass">
                 <p>Enjoy All The Features</p>
                 <p>150 GB Bindthwidht</p>
                 <p>100 GB Storage</p>
                 <p>$1.00 / GB Overages</p>
                 <p>All freatures</p>
             </div>
             <!-- Close pClass -->
             <div class="planBtn">
                 <a href="#" class="btn btn-primary btn-custom">Choose plan</a>
             </div>
            </div>
            <!-- Close card-body -->
            </div>
            <!-- Close card -->
            </div>
            <!-- Close col-md-3 -->


            <div class="col-md-3 mb-3">
                    <div class="card text-center">
                    <div class="card-body">
                     <div class="plan">Premium</div>
                     <div class="price"><span>$</span>99</div>
                     <div class="discount">Dicount 5%</div>
                     <div class="pClass">
                         <p>Enjoy All The Features</p>
                         <p>150 GB Bindthwidht</p>
                         <p>100 GB Storage</p>
                         <p>$1.00 / GB Overages</p>
                         <p>All freatures</p>
                     </div>
                     <!-- Close pClass -->
                     <div class="planBtn">
                         <a href="#" class="btn btn-primary btn-custom">Choose plan</a>
                     </div>
                    </div>
                    <!-- Close card-body -->
                    </div>
                    <!-- Close card -->
                    </div>
                    <!-- Close col-md-3 -->

                    <div class="col-md-3 mb-3">
                            <div class="card text-center">
                            <div class="card-body">
                             <div class="plan">Pro</div>
                             <div class="price"><span>$</span>199</div>
                             <div class="discount">Dicount 5%</div>
                             <div class="pClass">
                                 <p>Enjoy All The Features</p>
                                 <p>150 GB Bindthwidht</p>
                                 <p>100 GB Storage</p>
                                 <p>$1.00 / GB Overages</p>
                                 <p>All freatures</p>
                             </div>
                             <!-- Close pClass -->
                             <div class="planBtn">
                                 <a href="#" class="btn btn-primary btn-custom">Choose plan</a>
                             </div>
                            </div>
                            <!-- Close card-body -->
                            </div>
                            <!-- Close card -->
                            </div>
                            <!-- Close col-md-3 -->
    </div>
    <!-- Close row -->
    </div>
    <!-- Close container -->
    </section>
    <!-- Close prices -->

    <section id="customers">
    <div class="container">
     <div class="heading">
    <h2>Customer reviews</h2>
     </div>
     <!-- Close heading -->
       <div class="row">
       <div class="col-md-4 text-center">
       <div class="customerImg">
       <img src="assets/img/10.jpg" class="rounded-circle">
       </div>
       <!-- Close customerImg -->
       <div class="customerName">
           Shakil Khan
       </div>
       <!-- Close customerName -->
       <div class="review">
           <span>&#10077;</span>
           Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque dignissimos dolorem sunt! Ex architecto nobis alias eaque unde
       </div>
       </div>
       <!-- Close col-md-4 -->

       <div class="col-md-4 text-center">
            <div class="customerImg">
            <img src="assets/img/9.jpg" class="rounded-circle">
            </div>
            <!-- Close customerImg -->
            <div class="customerName">
                Bilal Khan
            </div>
            <!-- Close customerName -->
            <div class="review">
                <span>&#10077;</span>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque dignissimos dolorem sunt! Ex architecto nobis alias eaque unde
            </div>
            </div>
            <!-- Close col-md-4 -->

            <div class="col-md-4 text-center">
                    <div class="customerImg">
                    <img src="assets/img/8.jpg" class="rounded-circle">
                    </div>
                    <!-- Close customerImg -->
                    <div class="customerName">
                        Alex Roy
                    </div>
                    <!-- Close customerName -->
                    <div class="review">
                        <span>&#10077;</span>
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque dignissimos dolorem sunt! Ex architecto nobis alias eaque unde
                    </div>
                    </div>
                    <!-- Close col-md-4 -->
       </div>
       <!-- Close row -->
    </div>
    <!-- Close container -->
   </section>
    <!-- Close customers -->
    
</body>
</html>

style.css


body {
    font-family: 'Open Sans', sans-serif;
    background: #FAFAFA;
}

#header {
    width: 100%;
    height: 100vh;
    background: url("../img/bg2.jpg") no-repeat;
    background-size: cover;
    position: relative;
}

#header::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to right, rgb(255,255,255) 70%, rgba(0, 208, 110, .5) 30%);
}

.header-container {
     display: flex;
     height: 100vh;
     width: 500px;
     align-items: center;
}

.header-text {
    z-index: 1;
}

.header-text h1 {
    font-size: 40px;
    font-weight: 600;
    color: #222;
}

.btn-custom {
    border: none;
    background: linear-gradient(to right, #2ae6b5, #72e574);
    border-radius: 30px;
    font-size: 14px;
    padding: 7px 20px;
    box-shadow: 10px 10px 10px -10px rgba(0,0,0,.1);
}

#logo {
    position: absolute;
    top: 30px;
    left: 90px;
    z-index: 1;
    font-size: 25px;
    color: #2ae6b5;
}

#features {
    padding: 70px 0;
}

.heading {
    width: 100%;
    text-align: center;
    margin-bottom: 60px;
}

.heading h2 {
    font-size: 20px;
    border-bottom: 1px solid #222;
    color: #222;
    display: inline-block;
    padding-bottom: 10px;

}

.card {
    border: none;
    box-shadow: 10px 10px 10px -10px rgba(0,0,0,.1)!important;
}

.cardIcon span {
    font-size:60px; 
    color: #72e574;
    display: block;
    margin-bottom: 15px;
}

.cardHeading h4 {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 12px;
}

.cardP {
    font-size: 14px;
    margin-bottom: 10px;
}

#count {
    background: linear-gradient(to right, #2ae6b5, #72e574);
    padding: 70px 0;
}

.count {
    color:#fff;
}

.count h3 {
    font-size: 40px;
    font-weight: 600;
}

.count p {
    margin-bottom: 14px;
    font-weight: 300;
}

#prices {
    padding: 70px 0;
}

.plan {
    color: #999;
}

.price {
    font-size: 40px;
    font-weight: 700;
    color: #0275D8;
}

.price span {
    font-size: 16px;
}

.discount {
    margin-bottom: 10px;
}

.pClass p {
    font-size: 14px;
    font-weight: 300;
}

.pClass p:first-child {
    color: #999;
}

.pClass p:last-child {
    color: #999;
}

#customers {
    padding: 70px 0;
}

.customerImg {
    margin: 0 auto;
    width: 120px;
    height: 120px;
}

.customerImg img {
    width: 100%;
    height: 100%;
}

.customerName {
    margin: 6px 0;

}

.review {
    text-align: center;
    font-size: 14px;
}

.review span {
    display: inline-block;
    font-size: 35px;
}

/* Media Query */
@media (max-width: 600px){
    .header-container {
        width: 100%;
    }

    #header::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #ffff;
     }

     .header-text h1 {
        font-size: 30px;
        font-weight: 600;
        color: #222;
    }

    #logo {
        left: 30px;
    }
}

Download full source code

To download the full source code just click on the below download link

COMMENTS

Name

ajax,2,HTML & CSS,19,JavaScript,1,PHP,11,
ltr
item
webtipstricks: Create Bootstrap Template From Scratch
Create Bootstrap Template From Scratch
In this article we are going to create a real world template from scratch step by step.
https://i.ytimg.com/vi/LqX4Abbdmic/hqdefault.jpg
https://i.ytimg.com/vi/LqX4Abbdmic/default.jpg
webtipstricks
https://www.webtipstricks.com/2019/06/create-bootstrap-template-from-scratch.html
https://www.webtipstricks.com/
https://www.webtipstricks.com/
https://www.webtipstricks.com/2019/06/create-bootstrap-template-from-scratch.html
true
4027471107773963481
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy