How To Create About Us in Bootstrap 5

How To Create About Us in Bootstrap 5

About Bootstrap 5

Copy high quality website templates created with Bootstrap 5! Bootstrap 5 is a major release, As always, the official Bootstrap documentation page is the best place to start and learn all about Bootstrap, its features and components.

Let’s get started with our simple page. Today, we’re going to be building a simple About us page with the latest version of Bootstrap 5. We will be using Visual Code Studio and Sublime Text 4 might include some shortcuts or features that might not be available on other code editor software.

We are using bootstrap 5 icon on this page and this code is very simple. You may want to use bootstrap 5 icon CDN using. We are using html and css in this about us section.

ADD HTML:-

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
        <title>ABOUT US</title>
    </head>
    <body>
        <div class="about-us">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <div class="about-img">
                            <img src="img/about.jpg" class="img-fluid" alt="" />
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="about-content">
                            <div class="about-sub-heading">
                                <h5>UI / UX DESIGN</h5>
                            </div>
                            <h2>
                                UX/UI Design For Next <br />
                                Business Life
                            </h2>
                            <p>
                                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo, unde odio ab eveniet quas perspiciatis assumenda dolores ad ut qui distinctio, quaerat rerum inventore quod, porro vel soluta quibusdam
                                delectus.
                            </p>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="about-sub">
                                    <h6><i class="fa fa-check"></i> Business Card Design</h6>
                                    <h6><i class="fa fa-check"></i> E-commerce Design</h6>
                                    <h6><i class="fa fa-check"></i> Mobile App Design</h6>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="about-sub">
                                    <h6><i class="fa fa-check"></i> UX / UI Design</h6>
                                    <h6><i class="fa fa-check"></i> Product Design</h6>
                                    <h6><i class="fa fa-check"></i> Web Design</h6>
                                </div>
                            </div>
                        </div>
                        <a href="" class="btn1">Read More</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Option 1: Bootstrap Bundle with Popper -->
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
    </body>
</html>

Use Font Awesome Icons:-

Another thing to note is that many of these footers have social media links attached to icons. Many of these footer examples use Font Awesome, an open-source project with over 1,000 vector icons and social media logos.

fontawesome

ADD CSS:-

.about-us {
    padding: 60px 0;
    width: 100%;
    background-color: #f1f1f1;
}
.about-img img {
    border: 1px solid #000;
    padding: 5px;
    border-radius: 50%;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
}
.about-sub-heading h5 {
    color: #a30202;
}
.about-content h2 {
    font-weight: bold;
    margin-bottom: 20px;
}
.about-content p {
    margin-bottom: 30px;
    color: #6e6e6e;
}
.about-sub i {
    width: 40px;
    height: 40px;
    background-color: #a30202;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;

    margin-right: 10px;
}
.about-sub i h6 {
    font-size: 18px;
}
.btn1 {
    padding: 12px 40px;
    border: 1px solid #a30202;
    color: #000;
    display: inline-block;
    margin-top: 20px;
    border-radius: 5px;
    position: relative;
    z-index: 1;
}
.btn1:hover {
    color: #fff;
    text-decoration: none;
}
a.btn1:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #a30202;
    transition: 0.5s;
    z-index: -1;
}
a.btn1:hover:before {
    width: 100%;
    height: 100%;
    color: #fff;
}

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*