<div class="container">
: Creates a container with fixed width for layout elements.<div class="row">
: Defines a row within a container to organize content horizontally.<div class="col">
or <div class="col-{breakpoint}-{number}">
: Specifies column classes to create responsive grid layouts.<img class="img-fluid">
: Ensures images are responsive and fluid within their parent containers.<button class="btn">
: Creates a button.<a class="btn">
: Creates a button-like link.<nav class="navbar navbar-expand">
: Defines a navigation bar.<ul class="navbar-nav">
: Defines an unordered list within a navigation bar.<li class="nav-item">
: Defines a list item within a navigation bar.<form class="form">
: Defines a form.<input class="form-control">
: Creates an input field within a form.<label class="form-label">
: Creates a label for form elements.<textarea class="form-control">
: Creates a textarea input within a form.<select class="form-select">
: Creates a dropdown menu within a form.<table class="table">
: Creates a responsive table.<thead class="thead-dark">
: Styles the header of a table with a dark background.<tbody>
: Defines the body of a table.<tfoot>
: Defines the footer of a table.<tr>
: Defines a row within a table.<th>
: Defines a table header cell.<td>
: Defines a table data cell.<alert class="alert">
: Creates an alert message.<badge class="badge">
: Creates a badge.<card class="card">
: Creates a card.<carousel class="carousel">
: Creates a carousel/slider.<jumbotron class="jumbotron">
: Creates a large showcase area typically used at the top of a page.<breadcrumb class="breadcrumb">
: Creates a breadcrumb navigation for indicating the current page’s location within a hierarchy.<pagination class="pagination">
: Creates pagination links for splitting content across multiple pages.<progress class="progress">
: Creates a progress bar to show the completion status of a task.<badge class="badge">
: Creates a small badge to highlight certain information, often used for notifications or labels.<spinner class="spinner-border">
or <spinner class="spinner-grow">
: Creates a loading spinner animation.<modal class="modal">
: Creates a modal dialog or popup window for displaying additional content or forms.<tooltip data-bs-toggle="tooltip" title="Tooltip text">
: Adds a tooltip to an element.<popover data-bs-toggle="popover" title="Popover Title" data-bs-content="Popover Content">
: Adds a popover to an element.<collapse class="collapse">
: Creates a collapsible element that can be toggled to show or hide content.<accordion class="accordion">
: Creates an accordion-style collapsible content area.<carousel class="carousel">
: Creates a slideshow of images or content that cycles through items.<dropdown class="dropdown">
: Creates a dropdown menu.<list-group class="list-group">
: Creates a list group, useful for displaying lists of content.<media class="media">
: Creates a media object for displaying images, video, or other media alongside textual content.<navbar-toggler class="navbar-toggler">
: Creates a toggler button for collapsible navigation bars on smaller screens.<navbar-text class="navbar-text">
: Adds plain text to a navigation bar.<navbar-collapse class="navbar-collapse">
: Wraps collapsible content within a navigation bar.<navbar-brand class="navbar-brand">
: Adds branding (e.g., a logo or brand name) to a navigation bar.<navbar-nav class="navbar-nav">
: Wraps navigation links within a navigation bar.<pagination class="pagination">
: Creates pagination links for navigating through multiple pages of content.These are just a few examples of commonly used Bootstrap tags. There are many more components and utility classes provided by Bootstrap for building responsive and attractive web interfaces.