To get started, you can easily integrate a Dynamic Component into your Modyo app by copying and pasting the following code snippet:

        <div class="container">
<div class="d-flex gap-4">
  <div class="card" id="my-dynamic-card">
    <img class="card-img-top"
      src="https://cloud.modyocdn.com/uploads/c1eb380f-8204-4ef2-b119-cb8c3d415cb7/original/example_2.jpg"
      alt="">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Learn More</a>
    </div>
  </div>
</div>
</div>
      

This code renders the card component from the dynamic framework.

The background color of the card can be customized by adding the following CSS code to your stylesheet.

        #my-dynamic-card {
  background-color: #4848b7;
    color: #fff;
}
/* Modify font size and color of text */
#my-dynamic-card a.btn {
  border: solid 2px;
}
      

You can experiment with different CSS properties to achieve the desired look and feel.

Please note that depending on your existing styles, you may need to use more specific selectors to display changes. Learn more about CSS Specificity.

Strategies for Customizing Components

The Dynamic Framework makes it easy to tailor the look and feel of your components. You can override existing styles or add new ones to achieve your desired design.

There are two different approaches you can take:

1. Inspect the Widget Structure: Use your browser's developer tools to examine the HTML structure of the widget. This will help you identify the CSS classes or IDs applied to different elements.
2. Override CSS Styles: In your CSS file or within a <style> section in your HTML, override the styles for the specific classes or IDs you want to customize.

Using Bootstrap Classes to Customize components

The Dynamic Framework is based on CSS Bootstrap, which means you can leverage Bootstrap’s extensive class library to further customize your digital experiences.

You have two options to customize elements

• Add Bootstrap Classes: Apply Bootstrap classes directly to elements within the widget to modify their appearance or behavior. For example, to change button styles:

              <a href="#" class="btn btn-danger">Cancel</a>
            

• Utilize Bootstrap Grid System: Use Bootstrap’s grid system (container, row, col-*) to create responsive layouts within the widget.
• Extend with Bootstrap Components: Incorporate Bootstrap components like modals, tooltips, or carousels into the widget for enhanced functionality.

By leveraging Bootstrap classes and components, you not only ensure consistency with Bootstrap’s design language but also benefit from its robust styling and responsive utilities.

Customizing widgets in the Dynamic Framework empowers you to create unique and functional elements tailored to your project’s requirements, enhancing both user experience and development flexibility.

Learn more about customizing bootstrap