Bootstrap Responsive Our Team Section | Team Profile Hover Effect – Codewithrandom
Welcome🎉 to Code With Random blog. In this blog, we learn how to create a Bootstrap Responsive Our Team Section. We use HTML & CSS ,bootstrap for Bootstrap Responsive Our Team Section. Hope you enjoy our blog so let’s start with a basic HTML& bootstrap structure for Bootstrap Responsive Our Team Section.
Table of Contents
HTML&Bootstrap code
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Responsive Team Section Using HTML5 , CSS3 , Bootstrap 4</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/fontawesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css"> <link href="https://fonts.googleapis.com/css?family=Poppins:500,700&display=swap" rel="stylesheet"> </head> <body> <section class="section-team"> <div class="container"> <!-- Start Header Section --> <div class="row justify-content-center text-center"> <div class="col-md-8 col-lg-6"> <div class="header-section"> <h3 class="small-title">Our Experts</h3> <h2 class="title">Let's meet with our team members</h2> </div> </div> </div> <!-- / End Header Section --> <div class="row"> <!-- Start Single Person --> <div class="col-sm-6 col-lg-4 col-xl-3"> <div class="single-person"> <div class="person-image"> <img src="https://i.ibb.co/G2CBWvb/person1.jpg" alt=""> <span class="icon"> <i class="fab fa-html5"></i> </span> </div> <div class="person-info"> <h3 class="full-name">John Doe</h3> <span class="speciality">Web Developer</span> </div> </div> </div> <!-- / End Single Person --> <!-- Start Single Person --> <div class="col-sm-6 col-lg-4 col-xl-3"> <div class="single-person"> <div class="person-image"> <img src="https://i.ibb.co/nbpNr4r/person2.jpg" alt=""> <span class="icon"> <i class="fab fa-wordpress-simple"></i> </span> </div> <div class="person-info"> <h3 class="full-name">Robert Smith</h3> <span class="speciality">WordPress Developer</span> </div> </div> </div> <!-- / End Single Person --> <!-- Start Single Person --> <div class="col-sm-6 col-lg-4 col-xl-3"> <div class="single-person"> <div class="person-image"> <img src="https://i.ibb.co/25zdRMr/person3.jpg" alt=""> <span class="icon"> <i class="fab fa-angular"></i> </span> </div> <div class="person-info"> <h3 class="full-name">John Doe</h3> <span class="speciality">Angular Developer</span> </div> </div> </div> <!-- / End Single Person --> <!-- Start Single Person --> <div class="col-sm-6 col-lg-4 col-xl-3"> <div class="single-person"> <div class="person-image"> <img src="https://i.ibb.co/w0ynr2Q/person4.jpg" alt=""> <span class="icon"> <i class="fab fa-js"></i> </span> </div> <div class="person-info"> <h3 class="full-name">John Smith</h3> <span class="speciality">Javascript Developer</span> </div> </div> </div> <!-- / End Single Person --> </div> </div> </section> </body> </html>
There is all HTML&Bootstrap code for the Bootstrap Responsive Our Team Section. Now, you can see output without CSS, then we write CSS for the bootstrap Responsive Our Team Section.
Now we have completed our CSS section, Here is our final updated output CSS.
Final Output
Do you want to learn HTML to React? 🔥
If yes, then here is our Master HTML to React 📚 In this eBook, you’ll Get Complete Free Hand Written Notes on HTML, CSS, JavaScript, and React 💪. It includes 450 Projects with source code. and 250+ Most Asked Interview Questions
Now we have completed our CSS section, Here is our updated output with CSS. Hope you like the bootstrap Responsive Our Team Section, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕
This post teaches us how to create a Bootstrap Responsive Our Team Section using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.