This is the 21st day of my participation in the More text Challenge. For more details, see more text Challenge

“Bootstrap5 zero base to master” an old liu original, strive for a daily update section.

21.1 Bootstrap Card

The Bootstrap card provides a flexible, extensible content container with a variety of variants and options. The cards are designed to use as few tags and styles as possible, so that they can be easily aligned and blend well with the other Bootstrap components. By default it does not have a margin, so you can add a spacing general category on demand.

Here is an example of a basic card with mixed content and a fixed width. Cards that do not have a fixed width will naturally fill the full width of their parent element. This can be easily adjusted through our various scaling options. Here’s a simple example.

<div class="card" style="width: 18rem;">
            <img src=".. /pic/5.jpg" class="card-img-top" alt="The picture width of the card is automatically set.">
            <div class="card-body">
            <h5 class="card-title">The title card</h5>
            <p class="card-text">The content of the card can use various HTML elements such as text, lists, tables, forms, images, etc</p>
            <a href="#" class="btn btn-primary">This is a button</a>
            </div>
</div>
Copy the code

21.2 Structure of cards

21.2.1 Complete example of card structure

In general, we do not need to complete the card structure can be very good to use a card components, as shown in example above, a complete card including the header, footer, pictures (here refers to the header the image below, with card width) group, the main body, lists five parts, including main body can contain the title and the text. The following is an example of what it looks like. In fact, usually one or two elements of the card are enough to use as needed. The example below is just a demonstration.

 <div class="card" style="width: 18rem;">
        <div class="card-header">The header card</div>
        <img src=".. /pic/5.jpg" class="card-img-top" alt="The picture width of the card is automatically set.">
        <div class="card-body">
        <h5 class="card-title">The title card</h5>
        <p class="card-text">The content of the card can use various HTML elements such as text, lists, tables, forms, images, etc<img src=".. /pic/7.jpg" class="card-img-top" alt="The picture in the body of the card.">
        </p>
        <a href="#" class="btn btn-primary">This is a button</a>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">List elements</li>
          <li class="list-group-item">List elements</li>
          <li class="list-group-item">List elements</li>
        </ul>
        <div class="card-footer text-muted">Card footer</div>
    </div>
Copy the code

21.2.1 Card headers and footers

The header and footer are not required, and the text is lighter in color and slightly smaller than the rest of the content. In addition, the alignment can be adjusted through generic classes, which can be used flexibly to achieve many special effects.

21.2.1.1 Simple cards

<div class="card">
        <h5 class="card-header">notice</h5>
        <div class="card-body">
        <h5 class="card-title">Mid-Autumn Festival Holiday Notice</h5>
        <p class="card-text">Next week, the Mid-Autumn Festival will be off for 7 days, to live below.........</p>
        <a href="#" class="btn btn-primary">For details</a>
        </div>
        </div>
Copy the code

21.2.1.2 Use quotes

      <div class="card">
        <div class="card-header">quotes</div>
        <div class="card-body">
        <blockquote class="blockquote mb-0">
        <p>Only a poet and a saint could have believed that pouring water on asphalt would produce lilies.</p>
        <footer class="blockquote-footer">William Somerset Maugham<cite title="Source Title">The Moon and Sixpence</cite></footer>
        </blockquote>
        </div>
        </div>
Copy the code

21.2.1.3 Use both headers and footers

      <div class="card text-center">
        <div class="card-header">Classics is recommended</div>
        <div class="card-body">
        <h5 class="card-title">A Dream of Red Mansions</h5>
        <p class="card-text">"A Dream of Red Mansions" is a work of human fiction with world influence, the peak of the Chinese classical novel universally recognized, the encyclopedia of Chinese feudal society, the integration of traditional culture. The novel takes the rise and fall of jia, Shi, Wang and Xue families as the background, the family trivials and the leisure feelings of the boudoir as the context, and the love and marriage stories of Jia Baoyu, Lin Daiyu and Xue Baochai as the main line. It depicts the beauty of human nature and tragedy of the two lovers with Jia Baoyu and the twelve jinling noirs as the center. Through the family tragedy, the daughter tragedy and the hero's life tragedy, revealed the end of the feudal crisis.</p>
        <a href="#" class="btn btn-primary">Reading immediately</a>
        </div>
        <div class="card-footer text-muted">
        2 days ago
        </div>
        </div>
Copy the code

21.2.2 Use of images

21.2.2.1 Image at the top or at the bottom

The image is set to be displayed at the top or bottom of the card via the class card-img-top or card-img-bottom, with two cards below, one picture on top and one picture below.

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href=".. / bootstrap5 / bootstrap. Min. CSS "rel =" stylesheet "> < title > card < / title > < / head > < body > < div class =" container "> < br > < br > < br > <div class="card mb-2"> <img src=".. /pic/5.jpg" class="card-img-top" alt="..." Word-wrap: break-word! Important; "> <div class="card-body"> <div class="card-title"> <p class="card-text"> <p class="card-text" "For Windows" event, which will release the next generation of desktop operating system Win11 and its app store. </p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <div class="card-body"> <h5 class="card-title"> <p class="card-text"> Designed for the Xbox, <p class=" carn-text "><small class="text-muted">Last updated 3 mins ago</small></p> < div> <img SRC =".. /pic/7.jpg" class="card-img-bottom" alt="..." > </div> </div> <script src=".. /bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code

21.2.2.2 Image as card background

Convert the picture to the card background and overlay the card’s text. Depending on the image, you can choose whether you want additional styles or generic categories.

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href=".. / bootstrap5 / bootstrap. Min. CSS "rel =" stylesheet "> < title > card < / title > < / head > < body > < div class =" container "> < br > < br > < br > <div class="card card bg-dark text-white"> <img src=".. /pic/7.jpg" class="card-img" alt="..." Word-wrap: break-word! Important; "> <div class="card-body card-img-overlay"> <div class="card-body card-img overlay"> <div class="card-title"> <p class="card-text" The "What's Next for Windows" event will be held on Friday, when the next generation of desktop operating system Win11 and its app store will be released. </p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <script src=".. /bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code

Note that we added a black background to the card with Bg-dark, set the font to white with text-white, and set card-img-overlay as the background color in card-body. You can also use card-img-overlay instead of card-body, as above.

21.2.2.3 Image on the left

Using a combination of grids and generic classes, cards can be rendered horizontally in a responsive manner. In the following example, we use G-0 to remove the gaps in the mesh and use the COL-MD -* category to render the cards horizontally after the MD breakpoint. Depending on the card content, some additional adjustments may be required.

<div class="card mb-3" style="max-width: 540px;">
        <div class="row g-0">
        <div class="col-md-4">
        <img src=".. /pic/3.jpg" alt="..." class="w-100">
        </div>
        <div class="col-md-8">
        <div class="card-body">
          <h5 class="card-title">Spring, summer, autumn and winter are natural</h5>
          <p class="card-text">Spring, summer, autumn and winter are natural, the moon and breeze together I am idle, there is the gentle spring breeze, there are also beautiful stories, and another spring as promised, the gentle sunrise cuckoo call, wish the whole day with ankang, to welcome the arrival of spring Jane...</p>
          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
        </div>
        </div>
        </div>
Copy the code

Of course, you’d better set the width of the image, otherwise it is easy to overflow.

21.2.3 The body of the card

21.2.3.1 Title and Subtitle

The building block of a card is.card-body. Use it when you need a fill in the card.

  • in<h*>Add to labelcard-titleTo use the card title.
  • in<h*>Add to the tagcard-subtitleTo use the subtitle.

If card-title and card-subtitle elements are placed inside card-body, they will align well.

21.2.3.2 Text content and links

The text content can be placed on any HTML elements and bootstrap components such as buttons, adding card-links to the A tag and making the links adjacent to each other.

      <div class="card" style="width: 18rem;">
        <div class="card-body">
        <h5 class="card-title">Microsoft releases Win11</h5>
        <h6 class="card-subtitle mb-2 text-muted">The dynamic of science and technology</h6>
        <p class="card-text">Microsoft has announced a "What's Next for Windows" event on June 24, where it will release, among other things, its next desktop operating system, Win11, and its app store.</p>
        <a href="#" class="card-link">For details</a>
        <a href="#" class="card-link">Download the trial</a>
        </div>
        </div>
Copy the code

21.2.4 List Groups

List groups are very simple to use

<div class="card" style="width: 18rem;">
        <div class="card-header text-center">The party activities</div>
        <ul class="list-group list-group-flush">
        <li class="list-group-item">Singing and dancing</li>
        <li class="list-group-item">The boy solo</li>
        <li class="list-group-item">sketch</li>
        </ul>
        </div>
Copy the code

21.2.5 Mixed styles

Mix and match multiple forms of content to create the cards you need. The following example wraps image styles, blocks, text styles, and list groups all on one fixed width card.

<div class="card" style="width: 18rem;">
<img src=".. /pic/cap.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Copy the code

21.3 Layout and width of cards

Cards default to no specific starting width and will be 100% wide unless otherwise stated.

21.3.1 Using a grid

Use a grid and wrap the cards in columns and rows as needed. Note that the cards default to one row per card. To display multiple cards in a row, you must put several cards in a div container and the total width of the cards in each row must not exceed the width of the screen. Row-cols -* in the grid also applies to cards. In addition, the cards are the same width by default and the height is automatically adjusted according to the content, but if the cards have a footer, the height will be automatically adjusted to the same. Here is a complete example.

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href=".. / bootstrap5 / bootstrap. Min. CSS "rel =" stylesheet "> < title > card < / title > < / head > < body > < div class =" container "> < br > < br > < br > <div class="row"> <div class="col-sm-6"> <div class="card"> <div class="card-body"> <h5 class="card-title"> Microsoft release Win11</h5> <p class="card-text"> <p class="card-text" style =" text-align: center; < / p > < a href = "#" class = "BTN BTN - the primary" > details < / a > < / div > < / div > < / div > < div class = "col - sm - 6" > < div class = "card" > < div <p class="card-text"> <p class="card-text" style =" text-align: center; Specially designed for the Xbox, selling too < / p > < a href = "#" class = "BTN BTN - the primary" > details < / a > < / div > < / div > < / div > < / div > < / div > < script SRC = ".. /bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code

21.3.2 Use generic classes

Use a generic class with adjustable width sizes to quickly set the width of the card.

Use the grid use the grid and wrap the cards in columns and rows as needed. <! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href=".. / bootstrap5 / bootstrap. Min. CSS "rel =" stylesheet "> < title > card < / title > < / head > < body > < div class =" container "> < br > < br > < br > <div class="card W-75 "> <div class="card-body"> <div class="card-body"> <div class="card-title"> </h5> <p class="card-text" The "What's Next for Windows" event will be held on June 24 to release Windows 11, the next desktop operating system, and its app store. < / p > < a href = "#" class = "BTN BTN - the primary" > details < / a > < / div > < / div > < div class = "card w - 50" > < div class = "card - body" > < h5 "> <p class="card-title" style =" margin-bottom: 6.0pt; margin-bottom: 6.0pt; < span style =" box-sizing: border-box! Important; word-wrap: break-word! Important; "style =" box-sizing: border-box! Important;" /bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code

It is important to note that the width values here must be predetermined, preset to include 25%, 50%, 75%, 100% and AUTO, not arbitrary. See the section of General Class Sizing in the Bootstrap5 Chinese manual for details.

21.3.3 Using the User-defined CSS

Use custom CSS in your stylesheet or use inline styles to set the width. This is a flexible way to use REM, px, or percentage.

Use the grid use the grid and wrap the cards in columns and rows as needed. <! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href=".. / bootstrap5 / bootstrap. Min. CSS "rel =" stylesheet "> < title > card < / title > < / head > < body > < div class =" container "> < br > < br > < br > <div class="card" style="width: 30rem;" Word-wrap: break-word! Important; "> <div class="card-body"> <div class="card-title"> <p class="card-text"> <p class="card-text" Windows "event, will release the next generation of desktop operating system Win11 and its app store and other content. < / p > < a href = "#" class = "BTN BTN - the primary" > details < / a > < / div > < / div > < div class = "card" style = "width: 20 rem;" Word-wrap: break-word! Important; "> <div class="card-body"> <h5 class="card-title"> <p class="card-text"> < span style =" box-sizing: border-box! Important; word-wrap: break-word! Important; "style =" box-sizing: border-box! Important;" /bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code

21.3.4 Text alignment in cards

The text alignment category allows you to change the text alignment of the whole or a specific section of any card. By default, everything is text-start. You can use the card-text and text-end generic classes to make it center or right. The generic class can be used in the card container, or it can be used separately for any part of the header, header, footer, body, etc. If used together, it can be used separately to cover the whole.

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href=".. / bootstrap5 / bootstrap. Min. CSS "rel =" stylesheet "> < title > card < / title > < / head > < body > < div class =" container "> < br > < br > < br > <div class="row"> <div class=" col-SM-4 "> <div class="card text-center"> <div class="card-header"> Overall center </div> <div > <p class="card-text"> <p class="card-text" Windows "event, will release the next generation of desktop operating system Win11 and its app store and other content. < / p > < a href = "#" class = "BTN BTN - the primary" > details < / a > < / div > < / div > < / div > < div class = "col - sm - 4" > < div class = "card" > < div <div class="card-header text-center"> <div class="card-body"> <h5 class="card-title text-center" Win11</h5> <p class="card-text"> <p class="card-text" style =" text-align: center; < / p > < a href = "#" class = "BTN BTN - the primary" > details < / a > < / div > < / div > < / div > < div class = "col - sm - 4" > < div class = "card <div class="card-header"> </div> <div class="card-body"> <h5 class="card-title text-start" Win11</h5> <p class="card-text"> <p class="card-text" style =" text-align: center; < / p > < a href = "#" class = "BTN BTN - the primary" > details < / a > < / div > < / div > < / div > < / div > < / div > < script SRC = ".. /bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code

21.4 Tabbed cards

Use Bootstrap’s navigation component to add some navigation to the top (or block) of the card to get a tabbed effect.

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href=".. / bootstrap5 / bootstrap. Min. CSS "rel =" stylesheet "> < title > card < / title > < / head > < body > < div class =" container "> < br > < br > < br > <div class="card text-center"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item"> <a class="nav-link" aria-current="true" href="#" data-bs-toggle="tab" < span style =" box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 13px! Important; word-break: break-word! Important;" Data-bs-target ="#nav-home"> </a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" <div class="tab-content"> <div class=" Card-body Tab-pane fade" > <div class=" Card-body Tab-pane fade" Id ="nav "> <h5 class="card-title"> </h5> <p class="card-text"> </p> <a href="#" class=" BTN btn-primary">Go Somewhere </a> <div > <div class=" Carn-body tab-pane fade show active" id="nav-home"> <h5 class=" carn-title "> </h5> <p < span style =" box-sizing: border-box; color: RGB (74, 74, 74); font-size: 13px! Important; word-break: break-word! Important; src=".. /bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code

For the above code, it takes only two substitutions to change to capsule navigation

 <ul class="nav nav-tabs card-header-tabs">
Copy the code

Replace with

 <ul class="nav nav-pills card-header-pills">
Copy the code

All of the

data-bs-toggle="tab"
Copy the code

Replace with

data-bs-toggle="pill"
Copy the code

21.5 Card styles

Cards contain many options for defining backgrounds, borders, and colors.

21.5.1 Background and color

Use text and background generic categories to change the look of the card.

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href=".. / bootstrap5 / bootstrap. Min. CSS "rel =" stylesheet "> < title > card < / title > < / head > < body > < div class =" container "> < br > < br > < br > <div class="d-flex"> <div class="card text-white bg-primary" style="max-width: 18rem;" > <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Primary</h5> <p Class ="card-text"> <div style="max-width: 18rem; > <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Secondary</h5> <p "> <div style="max-width: 18rem; > <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Success</h5> <p "> <div style="max-width: 18rem; > <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Danger</h5> <p Class ="card-text"> <div class="d-flex"> <div class="card text-dark bg-warning" style="max-width: 18rem;" > <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Warning</h5> <p "> <div style="max-width: 18rem; > <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Info</h5> <p <div style="max-width: 18rem; max-width: 18rem; > <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Light</h5> <p "> <div style="max-width: 18rem; > <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Dark</h5> <p Class = "card - the text" > direct effects on color card on the container < / p > < / div > < / div > < / div > < / div > < script SRC = ".. /bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code

21.5.2 Borders and Colors

<div class="d-flex">
      <div class="card border-primary mb-3" style="max-width: 18rem;">
        <div class="card-header">The header</div>
        <div class="card-body text-primary">
        <h5 class="card-title">Title of Primary card</h5>
        <p class="card-text">Card-text Indicates the card text</p>
        </div>
        </div>
        <div class="card border-secondary mb-3" style="max-width: 18rem;">
        <div class="card-header">The header</div>
        <div class="card-body text-secondary">
        <h5 class="card-title">Secondary Card Title</h5>
        <p class="card-text">Card-text Indicates the card text</p>
        </div>
        </div>
        <div class="card border-success mb-3" style="max-width: 18rem;">
        <div class="card-header">The header</div>
        <div class="card-body text-success">
        <h5 class="card-title">Success Card Title</h5>
        <p class="card-text">Card-text Indicates the card text</p>
        </div>
        </div>
        <div class="card border-danger mb-3" style="max-width: 18rem;">
        <div class="card-header">The header</div>
        <div class="card-body text-danger">
        <h5 class="card-title">Danger Card Title</h5>
        <p class="card-text">Card-text Indicates the card text</p>
        </div>
        </div>
        
    </div>
    <div class="d-flex">
        <div class="card border-warning mb-3" style="max-width: 18rem;">
            <div class="card-header">The header</div>
            <div class="card-body">
            <h5 class="card-title">Warning card title</h5>
            <p class="card-text">Card-text Indicates the card text</p>
            </div>
            </div>
            <div class="card border-info mb-3" style="max-width: 18rem;">
            <div class="card-header">The header</div>
            <div class="card-body">
            <h5 class="card-title">Info Card title</h5>
            <p class="card-text">Card-text Indicates the card text</p>
            </div>
            </div>
            <div class="card border-light mb-3" style="max-width: 18rem;">
            <div class="card-header">The header</div>
            <div class="card-body">
            <h5 class="card-title">Light Card Title</h5>
            <p class="card-text">Card-text Indicates the card text</p>
            </div>
            </div>
            <div class="card border-dark mb-3" style="max-width: 18rem;">
            <div class="card-header">The header</div>
            <div class="card-body text-dark">
            <h5 class="card-title">Dark card Title</h5>
            <p class="card-text">Card-text Indicates the card text</p>
            </div>
            </div>
    </div>
Copy the code

Limited to space, only show the front part of the border picture.

21.5.2 Common classes for mixins

You can also change the border at the top and bottom of the card as required, and you can use BG-Transparent to remove their background-color.

 <div class="card border-success mb-3" style="max-width: 26rem;">
        <div class="card-header bg-transparent border-success">The header</div>
        <div class="card-body text-success">
        <h5 class="card-title">Success Card Title</h5>
        <p class="card-text">Note that the card-body uses text-success" and the footer uses bg-transparent border-success</p>
        </div>
        <div class="card-footer bg-transparent border-success">The footer</div>
        </div>
       
Copy the code

Today’s course is over, please pay attention to me, in time to learn my old Liu’s original “Bootstrap5 zero foundation to master” section 22 Bootstrap5 Carousel picture rotation component usage.

If this post helped you, please click “like”.