Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "how to use Card card components in Bootstrap". Many people will encounter this dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1 bootstrap card introduction

Bootstrap's card provides a flexible and extensible content container with a variety of variations and options. The cards are designed to use as few tags and styles as possible so that they can be more easily aligned and blend well with other Bootstrap components. There is no margin by default, so you can add the spacing generic category as needed.

The following is an example of a basic card with mixed content and fixed width. If the cards do not have a fixed width, they will naturally fill the full width of their parent element. This can be easily adjusted through our various zoom options. Here is a simple example.

The content of the card title card can use various html elements such as text, list, table, form, picture, etc.

This is a button.

2 the structure of the card 2.1 A complete example of the card structure

In general, we do not need a complete card structure to make good use of a card component, as shown in the above example, a complete card includes a header, footer, picture (here refers to the picture below the header, the same width as the card), body, list group five parts, in which the main body can contain title and text. The following is a full-content example. In fact, in general, we can use one or two elements of the card as needed. The following example is just a demonstration. We will explain each part of the function one by one later.

Card header

The content of the card title card can use various html elements such as text, list, table, form, picture, etc.

This is a button list element card footer

2.1 header and footer of the card

The header and footer are not necessary, and the header and footer text is lighter and the font is slightly smaller than other content. In addition, you can also adjust its alignment through general classes, flexible use can achieve a lot of special effects.

2.1.1 simple card notice Mid-Autumn Festival holiday notice 7 days of Mid-Autumn Festival holiday next week, give everyone the following.

For details

2.1.2 use references for celebrity quotes

Only poets and saints would firmly believe that hard watering on asphalt pavement will cultivate lilies.

The Moon and sixpence by William Somerset Maugham

2.1.3 A Dream of Red Mansions "A Dream of Red Mansions" is a human novel with worldwide influence, a universally recognized work of the pinnacle of Chinese classical novels, an encyclopedia of Chinese feudal society, and an aggregator of traditional culture. The novel takes the rise and fall of the four families of Jia, Shi, Wang and Xue as the background, the family trivia and boudoir leisure of Jia Fu as the thread, 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 women of Jinling as the center. The feudal eschatological crisis is revealed through the family tragedy, the daughter tragedy and the protagonist's life tragedy.

Read 2 days ago now

2.2 use of images 2.2.1 Images at the top or bottom

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

card

Soft release Win11

Microsoft has announced that it will hold a "What's next for Windows" event on June 24, when it will release the next generation desktop operating system Win11 and its app store.

Last updated 3 mins ago

Philips launches 4K display

Philips launches Momentum 4K e-sports display: specially designed for Xbox with a price of more than 10,000

Last updated 3 mins ago

2.2.2 Image as card background

Convert the picture to the background of the card and overlay the text of the card. Depending on the picture, you can choose whether you need additional styles or generic categories.

card

Microsoft releases Win11

Microsoft has announced that it will hold a "What's next for Windows" event on June 24, when it will release its next-generation desktop operating system, Win11, and its app store.

Last updated 3 mins ago

Notice that we add a black background to the card through bg-dark, set the font to white in text-white, and set card-img-overlay to the background color in card-body. You can also use card-img-overlay instead of card-body.

2.2.3 Image on the left

Using a combination of grids and generic classes, you can make cards horizontal in a responsive way. In the following example, we use gmur0 to remove the grid gap and use the col-md-* category to make the card appear horizontal after the md breakpoint. Depending on the contents of the card, some additional adjustments may be required.

Spring, summer, autumn and winter are natural, spring, summer, autumn and winter are natural, the bright moon and breeze are gentle, there are gentle spring breezes, there are also beautiful stories, another spring is coming as promised, and the sound of cuckoos in the gentle Chaoyang calls, may the whole world be in good health and welcome the Jane who comes in spring.

Last updated 3 mins ago

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

2.3 main body 2.3.1 title and subtitle of the card

The building block of the card is .card-body. Use it when you need the filled part of the card.

Add card-title to the label to use the card title.

Add card-subtitle to the tag to use the subtitle.

If the card-title and card-subtitle components are placed in the card-body, they will be well aligned.

2.3.2 text content and links

Text content can place any html element and bootstrap components, such as buttons, add card-link to the a tag and make the connection adjacent to each other.

Microsoft releases Win11 technology news Microsoft has announced that it will hold a "What's next for Windows" event on June 24, when it will release the next generation desktop operating system Win11 and its app store.

Learn more about downloading and trial

2.4 list groups

List groups are very easy to use

Solo sketches for singing and dancing boys in evening activities

2.5 mixed Styl

Mix and match multiple content forms to create the cards you need. The following example wraps picture styles, blocks, text styles, and list groups all in a fixed-width card.

Card titleSome quick example text to build on the card title and make up the bulk of the card's content.

An itemA second itemA third itemCard linkAnother link

3 typesetting and width of the card

Card presets do not have a specific starting width, and unless otherwise stated, their width will be 100%.

3.1 use the grid

Using the grid, wrap the cards in columns and rows as needed. It should be noted that cards default to one line 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 line cannot exceed the width of the screen. Row-cols-* in the grid is also suitable for cards. In addition, the width of the card is the same by default, and the height is automatically adjusted according to the content, but if the card has a footer, the height is automatically adjusted to the same. A complete example is given below.

card

Microsoft releases Win11

Soft has announced that it will hold a "What's next for Windows" event on June 24, when it will release the next generation desktop operating system Win11 and its app store.

Learn more about Philips' launch of 4K display

Philips launches Momentum 4K e-sports display: specially designed for Xbox with a price of more than 10,000

For details

3.2 use generic classes

Use generic classes with resizable widths to quickly set the width of the card.

Working with Grid

Using the grid, wrap the cards in columns and rows as needed.

card

Microsoft releases Win11

Soft has announced that it will hold a "What's next for Windows" event on June 24, when it will release the next generation desktop operating system Win11 and its app store.

Learn more about Philips' launch of 4K display

Philips launches Momentum 4K e-sports display: specially designed for Xbox with a price of more than 10,000

For details

It should be noted that the width value here must be predetermined, which contains 25%, 50%, 75, 75, 100, and auto, instead of being written at random. For details, see the General Class size (Sizing) section of the Bootstrap5 Chinese manual.

3.3Use custom CSS

It is flexible to use custom CSS or inline style to set the width in the stylesheet, using rem, px, percentage.

card

Microsoft releases Win11

Soft has announced that it will hold a "What's next for Windows" event on June 24, when it will release the next generation desktop operating system Win11 and its app store.

Learn more about Philips' launch of 4K display

Philips launches Momentum 4K e-sports display: specially designed for Xbox with a price of more than 10,000

For details

3.4 text alignment in the card

You can change the text alignment of the whole or specific part of any card through the text alignment category. By default, all of them are text-start-aligned, and you can use card-text and text-end generic classes to center or right-align them. The generic class can be used in the card container, or it can be used separately in any part of the title, header, footer, body, etc., if used at the same time, it covers the whole separately.

card

Microsoft releases Win11 as a whole

Soft has announced that it will hold a "What's next for Windows" event on June 24, when it will release the next generation desktop operating system Win11 and its app store.

For details

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.