Read the original Bootstrap documentation on cards here.
The card block gives you the ability to add Bootstrap cards to your page. When you add a card you gain access to additional blocks: Card Header, Card Body and Card Footer. Each of these blocks has the same options available as the main card block so rather than detailing each we have just detailed the card blocks settings as all of the other blocks work in the same way and have the same options available.
Sweet roll donut jelly beans jelly beans muffin. Cupcake jujubes bonbon shortbread lollipop. Bonbon brownie bonbon halvah lollipop gummi bears jujubes. Bear claw bonbon macaroon jujubes toffee chocolate cake muffin.
The card block had the following settings:
The background option allows you to change the background colour of a card by selecting from the predefined Bootstrap theme colours. The options available are:
The text color option allows you to change the text colour of a card by selecting from the predefined Bootstrap theme colours. The options available are:
The border color option allows you to change the border colour of a card by selecting from the predefined Bootstrap theme colours. The options available are:
Along with global options for a block there are also device specific settings. These settings allow you to specify options that will be applied to their relevant device size. The device sizes available match up with the Bootstrap breakpoints:
Device specific settings are tabbed and to update a specific device you simply need to click on the relevant tab to reveal the options. Each device has the same options available. For the purpose of these docs we only explain one device tab (as all of the other tabs are the same for their related breakpoint).
Due to there being options for a number of different device sizes it could become confusing remembering which settings you have chosen. To help, when you make a change in a specific device tab the tab will be highlighted green. If all of the values in the tab are reverted back to the default then the highlight will disappear.
You can hide this block on any device. As default all blocks are displayed. If you wish to hide a block on a specific device you can check this option. This option will only apply to the related device. To hide on other devices, click on the relevant device tab and check the Hide on [device] option.
Blocks tend to have a large number of settings along with different settings for each device size. You may get to the point where you have changed lots of settings and want to revert them back to the default. This can be time consuming and difficult to remember which settings have been changed to we have supplied three buttons that make this a piece of cake. Simply click the relevant button to reset your settings.
The HTML anchor option allows you to set an ID on the current block. This is useful when you wish to link to a specific area on a page.
The additional class(es) option lets you add any other classes to the block. This is really useful as it allows you to utilise all of the Bootstrap utility classes to quickly apply styles and add more advanced customisations. A few examples of this would be to align all inner content by adding the
text-end classes. You also have the ability to quickly search all of the available Bootstrap classes. To search Bootstrap classes open the Add Bootstrap class select box. You can filter the results by typing in the available search field. When you select an option it will automatically be added to your class list.