Responsive Team Section Design using Bootstrap

Responsive Team Section Design using Bootstrap

For any industry, it is essential to add a team page or section to their website. When a new visitor comes, they always look for this section to know the company. This particular section of the website helps to build transparency and trust. Besides, it helps to reveal the company's identification, which also helps to grow the company's brand identity.

In this tutorial, we will be creating a Responsive Team Section using the Bootstrap framework. We will create a nice overlay animation on hover. When we hover over the image, the information of a team member of your company will pop up from the bottom. We are using a bootstrap 3.3.7 version for this snippet. You can download the bootstrap 3.3.7 version from their official website. After downloading and extracting, we have to copy the bootstrap and add it to our project. Bootstrap js file is not required in this snippet because there is no javascript related work over here in this project. But when you design a complete website based on bootstrap, you have to add the file to your project. I am a CDN version of bootstrap CSS for this project, and I will put the link of the file below for your convenience.

Let's start the HTML markup for this project. First of all, we will take a div element with a team-area class. We will also add a ''section-padding'' class to it for giving the div element a custom padding. Inside the team-area div, we will then take the container bootstrap class, which will contain all the team section components. We will create three separate team boxes in our project in a row. For that, we will create three column grid of bootstrap's col-md-4 class. We will put those inside ''row'' class because this bootstrap class is mainly used to hold the column in it.



Let's start the HTML markup for this project. First of all, we will take a div element with a team-area class. We will also add a ''section-padding'' class to it for giving the div element a custom padding. Inside the team-area div, we will then take the container bootstrap class, which will contain all the team section components. We will create three separate team boxes in our project in a row. For that, we will create three column grid of bootstrap's col-md-4 class. We will put those inside ''row'' class because this bootstrap class is mainly used to hold the column in it.

In each column grid, we will take a div element with a ''single-item'' class. For each single-team class, we will take two main div element. The first named ''team-img'' class will contain the image, and the second one named ''team-content'' class will hold the information about the picture. Inside team-content div, we then take a div element named ''team-info'' class inside, which we will provide the name, designation, and some plain text.

You may also like:
Now that we have finished the HTML Markup let's style it. We will start by assigning a background color to the body, followed by a top and bottom padding of 150px to section-padding class. We will give the single-team class a relative position value and a 70px padding from the bottom. We also provide z-index value so that hover animation occurs, and Text can come over the image. We will then give it an overflow hidden value so that the content doesn't overlap. We will also provide a box-shadow effect to give the div element a subtle, sleek look. For the team-img class, we will provide a relative position class and set a z-index value of 5, followed by overflow hidden value. To make the image full-width, we will add a width of 100% to the team-img class image. We also provide a transition value so that that the hover effect occurs smoothly.

Now the content of team-content class remains at the bottom of the team-img div element. We will give it absolute value and provide a particular height and 100% width. We will then provide some basic styling for each component of team-info div. When we hover over the image, we want the image to scale slightly larger, so we will provide a transform scale value of 1.1 to the picture. Initially, the height of team-content div 80px, but we want the size to be 150px when we hover over the single-team element. Besides, we will change the color of the h3 tag and background-color of the team-content to deepskyblue for the hover effect. By default, there will be no margin when we visit the mobile version of the snippet. We will provide a margin-bottom value for each single-team class for the responsive version.

BOOTSTRAP CDN:



HTML:




CSS:




Thank you for visiting the blog.

2 Comments

Please do not enter any spam link in the comment box.

Post a comment

Please do not enter any spam link in the comment box.

Post a Comment

Previous Post Next Post