Here’s a list of Bootstrap 5 component shortcodes to include in the plugin. Each shortcode allows for customization through various attributes and is designed to be versatile for page design.
Bootstrap 5 Component Shortcodes
Jumbotron
plaintext
Copy code
{bs5_jumbotron bg="info" title="Welcome to Our Site" lead="We provide the best services."}Learn more about us here.{/bs5_jumbotron}
bg: Background color (e.g., primary, info, light)
title: The main title
lead: Introductory text
Modal
plaintext
Copy code
{bs5_modal id="contactModal" title="Contact Us" button_text="Open Contact Form" button_class="btn-warning"}Contact form goes here.{/bs5_modal}
id: Unique ID for the modal
title: Modal header title
button_text: Text on the trigger button
button_class: Button class (e.g., btn-primary, btn-success)
Carousel
plaintext
Copy code
{bs5_carousel id="homeCarousel"}
{bs5_carousel_item image="https://example.com/image1.jpg" caption="Slide 1 Caption" active="true"}
{bs5_carousel_item image="https://example.com/image2.jpg" caption="Slide 2 Caption"}
{/bs5_carousel}
id: Unique ID for the carousel
image: Image URL for each item
caption: Caption text
active: Set to true for the active slide
Call to Action (CTA)
plaintext
Copy code
{bs5_cta bg="success" text="white" title="Join Our Community!"}Be a part of something great!{/bs5_cta}
bg: Background color
text: Text color
title: CTA title
Button
plaintext
Copy code
{bs5_button type="success" size="btn-lg" link="https://example.com"}Click Here{/bs5_button}
type: Button style (e.g., primary, success)
size: Size class (e.g., btn-lg, btn-sm)
link: URL the button should link to
Alert
plaintext
Copy code
{bs5_alert type="warning"}This is a warning alert!{/bs5_alert}
type: Alert style (e.g., primary, warning, danger)
Card
plaintext
Copy code
{bs5_card title="Card Title" image="https://example.com/image.jpg" footer="Card footer text"}This is the card body text.{/bs5_card}
title: Card title
image: Image URL
footer: Footer text
Grid Layout (Container, Row, Column)
plaintext
Copy code
{bs5_container fluid="true"}
{bs5_row}
{bs5_column col="col-md-6"}Left Column Content{/bs5_column}
{bs5_column col="col-md-6"}Right Column Content{/bs5_column}
{/bs5_row}
{/bs5_container}
fluid: Set to true for a full-width container
col: Column width (e.g., col-md-6)
Header
plaintext
Copy code
{bs5_header level="2" class="text-center"}Welcome Heading{/bs5_header}
level: Header level (1 to 6)
class: Custom CSS class
Footer
plaintext
Copy code
{bs5_footer bg="dark" text="light"}© 2024 My Website. All rights reserved.{/bs5_footer}
bg: Background color
text: Text color
These shortcodes cover key Bootstrap components, allowing admins to build flexible and responsive page layouts. Each shortcode can be customized for specific design needs, and admins can copy-paste them directly from the plugin’s settings page.