Bootstrap Banner #1

Get 700+ Material components for the latest Bootstrap 5 for free.
This component is also available as ready-to-use solution in MDB UI Kit. Learn more about Bootstrap Banner here.

I am not sure what you would call this section. I was thinking to name it Bootstrap header or hero section or banner. Decided to go with Bootstrap banner. So, here’s how you can create a very simple banner with some text and an image.

Final output:

Tomato

You don’t need to read this. Now that you hav decided to read it anyways, its just some random dummy text to fill up the space for Bootstrap banner or hero section.

bootstrap banner image


1. As you can see in the final output above, there are two columns. On the right, we have an image. On the left, there is the main title, description, and a call to action.

Bootstrap has its grid system. Let’s use it to make those columns.

Create an outer div to wrap everything. I am giving it a class name banner. Add all the elements in respective columns.

<div class="banner">
    <div class="container">
        <div class="row">
            <div class="col-sm-5">
                <h1>Tomato</h1>
                <p>You don't need to read this. Now that you hav decided to read it anyways, its just some random dummy text to fill up the space for Bootstrap banner or hero section.</p>
                <button class="btn btn-success">Learn More</button>
            </div>
            <div class="col-sm-7">
                <img class="img-fluid" src="..." alt="">
            </div>
        </div>
    </div>
</div>

Output:

Tomato

You don’t need to read this. Now that you hav decided to read it anyways, its just some random dummy text to fill up the space for Bootstrap banner or hero section.

bootstrap banner image

2. The Banner would come right after the navbar. You might want it to take full screen(100vh) or specify the height. Because of the sidebar, I have less width to work with. So, I’m fine with the height it’s getting from the image.

Since the default display type of row is flex, to vertically align elements in the center, set the align-items property to center.

I’m also adding a background color to make it more prominent.

.banner{
    background-color: #F8D49D;
}
.row{
    align-items:center;
}

Output:

Tomato

You don’t need to read this. Now that you hav decided to read it anyways, its just some random dummy text to fill up the space for Bootstrap banner or hero section.

bootstrap banner image

3. To syle the title, add classes display-4 and fw-bold. Depending on the height and width, you can use the appropriate display heading to make the title stand out.

<h1 class="display-4 fw-bold">Tomato</h1>

You can also add a text-shadow.

h1{
    text-shadow: 1px 1px 2px #7c7c7c;
}

Output:

Tomato

You don’t need to read this. Now that you hav decided to read it anyways, its just some random dummy text to fill up the space for Bootstrap banner or hero section.

bootstrap banner image

4. To style the button, make the edges rounded and add a shadow.

.btn{
    padding: .5em 1.5em;
    border-radius: 2em;
    box-shadow: 5px 5px 5px rgba(105, 73, 73, 0.15);
}

Output:

Tomato

You don’t need to read this. Now that you hav decided to read it anyways, its just some random dummy text to fill up the space for Bootstrap banner or hero section.

bootstrap banner image

5. Let’s check for responsiveness.

Okay, not that bad, add some top and bottom padding for the entire banner. For smaller screens, center align all the elements.

.banner{
    padding: 2em 0;
}
@media screen and (max-width:567px){
    .banner{
        text-align: center;
    }
}

Use CSS or add classes mt-3 and mt-sm-0 to add a top margin for the image on smaller screens.

Output:

Tomato

You don’t need to read this. Now that you hav decided to read it anyways, its just some random dummy text to fill up the space for Bootstrap banner or hero section.

bootstrap banner image

Output on smaller screens:

bootstrap banner on smaller screens

Final Output Code for Bootstrap Banner #1:

HTML

<div class="banner">
    <div class="container">
        <div class="row">
            <div class="col-sm-5">
                <h1 class="display-4 fw-bold">Tomato</h1>
                <p>You don't need to read this. Now that you hav decided to read it anyways, its just some random dummy text to fill up the space for Bootstrap banner or hero section.</p>
                <button class="btn btn-success">Learn More</button>
            </div>
            <div class="col-sm-7">
                <img class="img-fluid" src="..." alt="">
            </div>
        </div>
    </div>
</div>

CSS

.banner {
  background-color: #f8d49d;
  width: 100%;
  padding: 2em 0;
}
.row {
  align-items: center;
}
h1 {
  text-shadow: 1px 1px 2px #7c7c7c;
}
.btn {
  padding: 0.5em 1.5em;
  border-radius: 2em;
  box-shadow: 5px 5px 5px rgba(105, 73, 73, 0.15);
}
@media screen and (max-width: 567px) {
  .banner {
    text-align: center;
  }
}

3 1 vote
Article Rating
Subscribe
Notify of
guest
1 Comment
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Aditya Kaushik
9 months ago

add order image first and text blow. Good job.

1
0
Would love your thoughts, please comment.x
()
x