add bootstrap style to the following html by using link ref cdn:


  <h3>
    <strong>Customizable Flip Card Block</strong>
  </h3>
  <h4>
    <strong>What is it?</strong>
  </h4>
  <p>The <strong>Customizable Flip Card Block</strong> is a WordPress Gutenberg block that allows users to create interactive flip cards with content on both the front and back sides. It’s designed to be highly flexible, enabling users to add text, images, buttons, and customize styles to create engaging and visually appealing content. </p>
  <hr>
  <h4>
    <strong>What does it do?</strong>
  </h4>
  <ol start="1">
    <li>
      <p>
        <strong>Flip Animation</strong>:
      </p>
      <ul>
        <li>
          <p>The card flips smoothly on hover, revealing content on the back side.</p>
        </li>
        <li>
          <p>The flip duration is customizable.</p>
        </li>
      </ul>
    </li>
    <li>
      <p>
        <strong>Front and Back Content</strong>:
      </p>
      <ul>
        <li>
          <p>
            <strong>Front Side</strong>: Add text, background color, or a background image. You can also add a color overlay with adjustable opacity.
          </p>
        </li>
        <li>
          <p>
            <strong>Back Side</strong>: Add text, background color, or a background image. You can also add a color overlay with adjustable opacity and a customizable button.
          </p>
        </li>
      </ul>
    </li>
    <li>
      <p>
        <strong>Customizable Styles</strong>:
      </p>
      <ul>
        <li>
          <p>
            <strong>Text</strong>: Choose from 5 Google Fonts, adjust font size, weight, and color.
          </p>
        </li>
        <li>
          <p>
            <strong>Button</strong>: Customize button text, link, background color, and text color.
          </p>
        </li>
        <li>
          <p>
            <strong>Card Size</strong>: Adjust the width and height of the card.
          </p>
        </li>
        <li>
          <p>
            <strong>Overlay</strong>: Add a color overlay with adjustable opacity for both front and back sides.
          </p>
        </li>
      </ul>
    </li>
    <li>
      <p>
        <strong>Responsive Design</strong>:
      </p>
      <ul>
        <li>
          <p>The block is fully responsive and works well on all screen sizes.</p>
        </li>
      </ul>
    </li>
  </ol>
  <hr>
  <h4>
    <strong>Key Features</strong>
  </h4>
  <ul>
    <li>
      <p>
        <strong>Interactive Flip Animation</strong>: Smooth flip effect on hover.
      </p>
    </li>
    <li>
      <p>
        <strong>Background Images</strong>: Add images to the front and back sides.
      </p>
    </li>
    <li>
      <p>
        <strong>Color Overlays</strong>: Add overlays with customizable colors and opacity.
      </p>
    </li>
    <li>
      <p>
        <strong>Customizable Text</strong>: Choose fonts, sizes, weights, and colors.
      </p>
    </li>
    <li>
      <p>
        <strong>Button</strong>: Add a button to the back side with customizable text, link, and colors.
      </p>
    </li>
    <li>
      <p>
        <strong>Card Size</strong>: Adjust the width and height of the card.
      </p>
    </li>
  </ul>
  <hr>
  <h4>
    <strong>What Should Reviewers Look For?</strong>
  </h4>
  <ol start="1">
    <li>
      <p>
        <strong>Functionality</strong>:
      </p>
      <ul>
        <li>
          <p>Ensure the flip animation works smoothly on hover.</p>
        </li>
        <li>
          <p>Verify that the front and back content (text, images, overlays, and buttons) display correctly.</p>
        </li>
        <li>
          <p>Test the button link to ensure it works as expected.</p>
        </li>
      </ul>
    </li>
    <li>
      <p>
        <strong>Customization</strong>:
      </p>
      <ul>
        <li>
          <p>Check that all customization options (fonts, colors, sizes, etc.) work as intended.</p>
        </li>
        <li>
          <p>Verify that changes made in the editor reflect accurately on the front-end.</p>
        </li>
      </ul>
    </li>
    <li>
      <p>
        <strong>Responsiveness</strong>:
      </p>
      <ul>
        <li>
          <p>Test the block on different screen sizes (desktop, tablet, mobile) to ensure it looks good and functions well.</p>
        </li>
      </ul>
    </li>
    <li>
      <p>
        <strong>Accessibility</strong>:
      </p>
      <ul>
        <li>
          <p>Ensure the text is readable and contrasts well with the background.</p>
        </li>
        <li>
          <p>Verify that the button is accessible (e.g., clickable and properly labeled).</p>
        </li>
      </ul>
    </li>
    <li>
      <p>
        <strong>Performance</strong>:
      </p>
      <ul>
        <li>
          <p>Ensure background images are optimized for fast loading.</p>
        </li>
        <li>
          <p>Check that the block does not add unnecessary bloat to the page.</p>
        </li>
      </ul>
    </li>
  </ol>
  <hr>
  <h4>
    <strong>Use Cases</strong>
  </h4>
  <ul>
    <li>
      <p>
        <strong>FAQs</strong>: Use the flip card to display questions on the front and answers on the back.
      </p>
    </li>
    <li>
      <p>
        <strong>Team Profiles</strong>: Show team member photos on the front and their details on the back.
      </p>
    </li>
    <li>
      <p>
        <strong>Product Features</strong>: Highlight product features on the front and provide more details or a call-to-action on the back.
      </p>
    </li>
    <li>
      <p>
        <strong>Interactive Content</strong>: Create engaging and interactive content for users.
      </p>
    </li>
  </ul>
  <hr>
  <h4>
    <strong>How to Use</strong>
  </h4>
  <ol start="1">
    <li>
      <p>Add the <strong>Customizable Flip Card Block</strong> to your page or post. </p>
    </li>
    <li>
      <p>Customize the front and back content using the block settings in the editor.</p>
    </li>
    <li>
      <p>Adjust styles (fonts, colors, sizes, etc.) as needed.</p>
    </li>
    <li>
      <p>Preview and publish your page.</p>
    </li>
  </ol>
  <hr>
  <h4>
    <strong>Technical Notes</strong>
  </h4>
  <ul>
    <li>
      <p>The block uses <strong>modern CSS</strong> for animations and styling. </p>
    </li>
    <li>
      <p>It leverages <strong>Google Fonts</strong> for typography. </p>
    </li>
    <li>
      <p>The block is built using <strong>React</strong> and the <strong>WordPress Gutenberg API</strong>. </p>
    </li>
  </ul>