New 'Content' component feature

How many times have you come across a bunch of content within a <div> or an <article> tag with a bunch of <p>, <ul> and possibly even headings and thought to yourself if only there was a simple classname I can add to the div that would prevent me having to add specific classes to all of these elements?

This is an issue I’ve come across, and whilst I’m sure Bootstrap provides some base default styling, I’m not totally convinced that this is appropriate in most projects.

I was thinking this…

To add a new component under the ‘Components’ heading on the docs (https://getbootstrap.com/docs/4.1/getting-started/introduction/) called something like: ‘Content’

The purpose of this component is to provide a simple method for styling elements within a div or article element, all the user would need to do is add a class called .content to their parent element, and elements within would be styled. I was thinking of adding support for the following HTML elements:

• <p> paragraphs
• <ul>, <ol> and <dl> lists
• <h1> to <h6> headings
• <blockquote> quotes
• <em>, <b> and <strong> tags
• <table> with relevant child elements of a table

What’s people’s opinion on this?

[MartijnCuppens]

@sts-ryan-holton “I think” what you’re suggesting is something like Bulma is doing here: https://bulma.io/documentation/elements/content/

The Bootstrap docs also use a .bd-content class to control spacing between headings: https://github.com/twbs/bootstrap/blob/7b2372f35319ce392cb3f6ddab7c2de879a8a354/assets/scss/_content.scss#L70-L95

I personally also use a .content class to control spacings between headings, parargraphs, lists,…

Would you also add additional theming or just use it to control spacing?

[jonathanhefner]

I like this proposal. I was trying to achieve something similar (though less specific to content / copy) in #29481.