Current Situation
We have 'modifier' classes on the parent and child elements simply as a hook to which we can apply styles. However, the user is limited to our original configuration.
Bootstrap 4 classes have expanded the possibilities, but we don't have a way to inject them onto the child elements. (They still don't have a flex basis class)
Sample Card Headline Six
Cold-pressed unicorn leggings, stumptown migas edison bulb glossier sartorial offal yuccie. Gentrify la croix 8-bit cred selfies, green juice humblebrag prism four loko schlitz chillwave knausgaard PBR&B stumptown forage.
This text is centered.
Sample Card Headline Five
Lorem ipsum dolor amet pickled pug cray, yuccie selfies adaptogen freegan franzen.
Sample Card Headline Four
Lorem ipsum dolor amet pickled pug cray, yuccie selfies adaptogen freegan franzen.
Sample Card Headline Three
Lorem ipsum dolor amet pickled pug cray, yuccie selfies adaptogen freegan franzen. Ethical blue bottle fingerstache, shoreditch etsy before they sold out quinoa swag cliche ennui yuccie roof party la croix williamsburg. Roof party gochujang banjo, DIY locavore bespoke austin crucifix.
Sample Card Headline Two
Lorem ipsum dolor amet pickled pug cray, yuccie selfies adaptogen freegan franzen. Ethical blue bottle fingerstache, shoreditch etsy before they sold out quinoa swag cliche ennui yuccie roof party la croix williamsburg. Roof party gochujang banjo, DIY locavore bespoke austin crucifix.
Sample Card Headline
Lorem ipsum dolor amet pickled pug cray, yuccie selfies adaptogen freegan franzen. Ethical blue bottle fingerstache, shoreditch etsy before they sold out quinoa swag cliche ennui yuccie roof party la croix williamsburg. Roof party gochujang banjo, DIY locavore bespoke austin crucifix.
Here is a centered link.
- Here is a ul li link
- Here is a ul li link
- Here is a ul li link
Sample Card Headline Six
Cold-pressed unicorn leggings, stumptown migas edison bulb glossier sartorial offal yuccie. Gentrify la croix 8-bit cred selfies, green juice humblebrag prism four loko schlitz chillwave knausgaard PBR&B stumptown forage.
This text is centered.
Sample Card Headline Five
Lorem ipsum dolor amet pickled pug cray, yuccie selfies adaptogen freegan franzen.
Sample Card Headline Four
Lorem ipsum dolor amet pickled pug cray, yuccie selfies adaptogen freegan franzen.
Sample Card Headline Three
Lorem ipsum dolor amet pickled pug cray, yuccie selfies adaptogen freegan franzen. Ethical blue bottle fingerstache, shoreditch etsy before they sold out quinoa swag cliche ennui yuccie roof party la croix williamsburg. Roof party gochujang banjo, DIY locavore bespoke austin crucifix.
Sample Card Headline Two
Lorem ipsum dolor amet pickled pug cray, yuccie selfies adaptogen freegan franzen. Ethical blue bottle fingerstache, shoreditch etsy before they sold out quinoa swag cliche ennui yuccie roof party la croix williamsburg. Roof party gochujang banjo, DIY locavore bespoke austin crucifix.
Sample Card Headline
Lorem ipsum dolor amet pickled pug cray, yuccie selfies adaptogen freegan franzen. Ethical blue bottle fingerstache, shoreditch etsy before they sold out quinoa swag cliche ennui yuccie roof party la croix williamsburg. Roof party gochujang banjo, DIY locavore bespoke austin crucifix.
Here is a centered link.
- Here is a ul li link
- Here is a ul li link
- Here is a ul li link
This is clearly not an ideal display scenario here, but the option is available to you. Here is the full list of flex-basis options:
- flexbasistwentyten: 10%
- flexbasistwentytwenty: 20%
- flexbasistwentyfive: 25%
- flexbasisthirty: 30%
- flexbasisforty: 40%
- flexbasisfifty: 50%
- flexbasissixty: 60%
- flexbasisseventy: 70%
- flexbasiseighty: 80%
- flexbasisninety: 90%
- flexbasisonehundred: 100%
Flex Basis
To increase or decrease the number of cards appearing in a row, we need to alter the flex-basis property. To do so, we add specific classes into the CSS Classes field, which is located under More Options in the List Settings configuration of the Enhanced Card widget.
The following options will set the width of your cards as a percentage of its container. For example, using the class .flexbasistwentyten will set each card to be 10% of the container width. See the example below.