A Better Life with Steem: Continuing with Bootstrap Responsive WebsitesteemCreated with Sketch.

in #betterlife4 years ago
Hello guys, hope this post finds everyone in good health. I would like to continue here the journey of my last [post](https://steemit.com/betterlife/@leoumesh/a-better-life-with-steem-learning-bootstrap-for-responsive-website-development). In that post, I had created a responsive navbar with some background image and 'Learn More' button. After this part, I have created a short section which you can see below:


Screenshot_2.png

I can't properly capture the responsiveness as it was too long. Here's the simple demo.


Screenshot_3.png

Continuing from the last post, you need to add following HTML code to your index.html. Put this where your last div tag was closed.

<section class="container ourservices text-center">
    <h1>Our Services</h1>
    <p>Why Choose Us</p>

    <div class="row rowsetting">
        <div class="col-lg-4 col-md-4 col-sm-4 col-10 d-block m-auto">
            <div class="imgsetting d-block m-auto bg-warning"><i class="fa fa-usd fa-3x text-white"></i>
                
            </div>

            <h2>Great Discount</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam auctor lacinia erat. Nam tellus elit, iaculis ac ante eu, accumsan efficitur nibh.</p>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-4 col-10 d-block m-auto">
            <div class="imgsetting d-block m-auto bg-warning"><i class="fa fa-first-order fa-3x text-white"></i>
                
            </div>

            <h2>Since 1995</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam auctor lacinia erat. Nam tellus elit, iaculis ac ante eu, accumsan efficitur nibh.</p>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-4 col-10 d-block m-auto">
            <div class="imgsetting d-block m-auto bg-warning"><i class="fa fa-shopping-cart fa-3x text-white"></i>
                
            </div>

            <h2>Home Delivery</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam auctor lacinia erat. Nam tellus elit, iaculis ac ante eu, accumsan efficitur nibh.</p>
        </div>
    </div>

</section>



We need to do some styling too. So in style.css file, add this code:

.ourservices{
    padding: 100px 0px 60px;
    height: 700px;
}

.ourservices h1{
    font-size: 50px;
}

.rowsetting{
    margin: 80px 0px;
}

.rowsetting p{
    padding: 10px;
    color: #6c757d;
}

.rowsetting h2{
    margin-top: 20px;
    font-weight: bolder;
    font-size: 30px;
}

.imgsetting{
    
    border-radius: 50%;
    height: 100px;
    width: 100px;
}

.fa-shopping-cart{
    margin-top: 24px;
}

.fa-usd{
    margin-top: 20px;
}

.fa-first-order{
    margin-top: 24px;
}


Get the source code of this project upto this point by clicking here. Remember there's no bootstrap css or js files as I am using it from content delivery network.

Sort:  

@leoumesh
The webpage is responsive????