How to create a responsive team section in Bootstrap
Use Bootstrap's grid system and tool classes to easily create responsive team layouts; 2. Use col-md-6 and col-lg-4 classes to realize device adaptation, ensuring small-screen single-column, medium-screen double-column, and large-screen three-column display; 3. Add h-100 classes to the cards to maintain contour heights and improve visual consistency; 4. You can select custom CSS to achieve hover animation and image cropping effects; 5. Introduce Font Awesome icon library to enhance the visual performance of social links; and finally get a cross-device-compatible, semantic and beautiful team display area.
Creating a responsive team section in Bootstrap is straightforward thanks to its grid system and utility classes. Here's how you can build a clean, responsive team layout that works across devices.
1. Set up the HTML structure with Bootstrap
Make sure you have Bootstrap linked in your HTML file (either via CDN or local installation). Then, create a container to hold your team section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Team Section</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<section class="py-5 bg-light">
<div class="container">
<div class="text-center mb-5">
<h2>Our Team</h2>
<p class="lead">Meet the people behind our success</p>
</div>
<div class="row">
<!-- Team Member 1 -->
<div class="col-md-6 col-lg-4 mb-4">
<div class="card h-100 text-center">
<img class="card-img-top lazy" src="/static/imghw/default1.png" data-src="https://via.placeholder.com/300" alt="Team Member">
<div class="card-body">
<h5 class="card-title">John Doe</h5>
<p class="text-muted">CEO & Founder</p>
<p class="card-text">Passionate leader with 10 years of experience in innovation and strategy.</p>
<div class="d-flex justify-content-center gap-3">
<a href="#" class="text-primary"><i class="fab fa-linkedin"></i> LinkedIn</a>
<a href="#" class="text-info"><i class="fab fa-twitter"></i> Twitter</a>
</div>
</div>
</div>
</div>
<!-- Team Member 2 -->
<div class="col-md-6 col-lg-4 mb-4">
<div class="card h-100 text-center">
<img class="card-img-top lazy" src="/static/imghw/default1.png" data-src="https://via.placeholder.com/300" alt="Team Member">
<div class="card-body">
<h5 class="card-title">Jane Smith</h5>
<p class="text-muted">Lead Designer</p>
<p class="card-text">Creative visionary focused on user-centered design and brand identity.</p>
<div class="d-flex justify-content-center gap-3">
<a href="#" class="text-primary"><i class="fab fa-linkedin"></i> LinkedIn</a>
<a href="#" class="text-danger"><i class="fab fa-dribbble"></i> Dribbble</a>
</div>
</div>
</div>
</div>
<!-- Team Member 3 -->
<div class="col-md-6 col-lg-4 mb-4">
<div class="card h-100 text-center">
<img class="card-img-top lazy" src="/static/imghw/default1.png" data-src="https://via.placeholder.com/300" alt="Team Member">
<div class="card-body">
<h5 class="card-title">Mike Johnson</h5>
<p class="text-muted">Senior Developer</p>
<p class="card-text">Full-stack developer who loves clean code and solving complex problems.</p>
<div class="d-flex justify-content-center gap-3">
<a href="#" class="text-dark"><i class="fab fa-github"></i> GitHub</a>
<a href="#" class="text-primary"><i class="fab fa-linkedin"></i> LinkedIn</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>2. Make it responsive using Bootstrap's grid classes
The key to responsiveness is using Bootstrap's responsive grid classes:
-
col-md-6: Each team member takes half the row on medium screens and above. -
col-lg-4: On large screens, each takes one-third of the row (3 per row). -
mb-4: Adds margin bottom for spacing between cards on small screens.
This ensures:
- 1 card per row on extra small screens (below 576px)
- 2 per row on medium (≥768px)
- 3 per row on large (≥992px)
The h-100 class on .card ensures all cards have equal height in a row, which looks cleaner.
3. Enhance with optional styling (custom CSS)
You can add a small amount of custom CSS to improve appearance:
<style>
.card {
transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.card-img-top {
object-fit: cover;
height: 250px;
}
</style>This adds a subtle hover effect and ensures images are uniformly sized.
4. Add Font Awesome for social icons (optional)
Include Font Awesome in the <head> for nice social media icons:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
That's it. You now have a fully responsive, visually appealing team section using Bootstrap. It scales smoothly across devices, uses semantic HTML, and leverages Bootstrap's powerful layout system.
Basically just structure your team members in a grid, use responsive column classes, and style cards for consistency. Not complicated — but effective.
The above is the detailed content of How to create a responsive team section in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undresser.AI Undress
AI-powered app for creating realistic nude photos
ArtGPT
AI image generator for creative art from text prompts.
Stock Market GPT
AI powered investment research for smarter decisions
Hot Article
Popular tool
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
20519
7
13632
4
How to animate Bootstrap components for a more dynamic feel? (Advanced CSS)
Mar 13, 2026 am 01:13 AM
The fade and show classes of Bootstrap5 are only status markers and do not contain animation logic. You need to manually add @keyframes or transitions to achieve fade-in and fade-out; custom components need to configure additional animation rules, and when JS controls the display, the show class must be added with delay to ensure redrawing.
How to ensure your Bootstrap site is fully accessible (WCAG)? (Accessibility)
Mar 08, 2026 am 01:25 AM
The Bootstrap component does not automatically add the aria attributes required for complete WCAG. You need to manually complete aria-expanded, role="dialog", aria-labelledby, etc.; the form must be equipped with an explicit label; :focus needs to use :focus-visible to ensure that the keyboard focus is visible; the color contrast must reach 4.5:1.
How to create a professional-looking landing page with Bootstrap? (Project-Based)
Mar 10, 2026 am 12:22 AM
Bootstrap’sdefaultstylingfeelsgenericduetouncustomizedspacing,typography,andcolor—fixableviaCSSvariablesorSass,notdirectedits;avoidfixedwidths,misuseofgridclasses,andrender-blockingassetstoensureresponsivenessandfastLCP.
How to integrate Bootstrap with a JavaScript framework like React or Vue? (Integration)
Mar 12, 2026 am 01:22 AM
Only BootstrapCSS should be introduced in React/Vue instead of JS to avoid global style pollution and jQuery dependency; SCSS modules should be imported on demand to reduce the size; interactive functions must be imported with encapsulation libraries (such as react-bootstrap) or ESM; grid classes need to adapt to JSX/Vue syntax, and explicit and implicit classes should be used with SSR with caution.
How to properly install and set up Bootstrap 5 in your web project? (Getting Started)
Mar 16, 2026 am 12:40 AM
To correctly introduce Bootstrap5, you need to load bootstrap.min.css first, then load bootstrap.bundle.min.js (including Popper), and ensure that the viewport tag exists; after npm installation, you need to manually introduce compiled files in the dist directory. SCSS customization must be preceded by variable declarations, and JS components must be explicitly initialized to avoid jQuery contamination.
How to implement a carousel or image slider with Bootstrap? (Content Display)
Mar 07, 2026 am 01:01 AM
Need not. Bootstrap5's carousel is automatically initialized by default. You need to manually call newbootstrap.Carousel() only when data-bs-ride is modified or the element is dynamically inserted.
How to use Bootstrap utility classes to speed up your workflow? (Efficiency)
Mar 11, 2026 am 12:18 AM
Use mt-3 to represent the top margin, mb-3 to represent the bottom margin, and the suffixes t/b/s/e correspond to top/bottom/start/end respectively; ms-auto implements right alignment in the flex container, me-2 replaces the abandoned mr-2, and responsive classes such as mt-md-4 need to have breakpoint prefixes.
How to use Bootstrap variables to maintain a consistent color scheme? (Branding)
Mar 14, 2026 am 12:59 AM
The safest way is to redefine Bootstrap's Sass variables (such as $primary, $primary-rgb, $primary-text-emphasis) in advance and introduce them before @import "bootstrap/scss/variables" to ensure that all dependent variables are updated synchronously to avoid compilation failure or style exceptions.
