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


  <h3>
    <strong>Team Member Profile Block</strong>
  </h3>
  <h4>
    <strong>What is it?</strong>
  </h4>
  <p>The <strong>Team Member Profile Block</strong> is a custom Gutenberg block for WordPress that allows you to showcase your team members in a visually appealing and interactive way. It is designed to be used on "About Us" pages or any other section where you want to highlight your team. </p>
  <hr>
  <h4>
    <strong>What does it do?</strong>
  </h4>
  <ol start="1">
    <li>
      <p>
        <strong>Displays Team Members</strong>:
      </p>
      <ul>
        <li>
          <p>Each team member can have a <strong>photo</strong>, <strong>name</strong>, <strong>role</strong>, and <strong>social media links</strong>. </p>
        </li>
        <li>
          <p>Social media links are displayed as icons (e.g., Facebook, Instagram, X, WhatsApp, LinkedIn).</p>
        </li>
      </ul>
    </li>
    <li>
      <p>
        <strong>Customizable Layout</strong>:
      </p>
      <ul>
        <li>
          <p>Choose between <strong>grid</strong> or <strong>list</strong> layouts for displaying team members. </p>
        </li>
        <li>
          <p>The layout is responsive and adapts to mobile and desktop views.</p>
        </li>
      </ul>
    </li>
    <li>
      <p>
        <strong>Styling Options</strong>:
      </p>
      <ul>
        <li>
          <p>Customize <strong>text color</strong>, <strong>background color</strong>, and <strong>button color</strong> for each team member card. </p>
        </li>
        <li>
          <p>Add <strong>shadows</strong> and <strong>hover animations</strong> for a modern, interactive look. </p>
        </li>
      </ul>
    </li>
    <li>
      <p>
        <strong>Social Media Links</strong>:
      </p>
      <ul>
        <li>
          <p>Add social media links with icons that open in a new tab when clicked.</p>
        </li>
        <li>
          <p>URLs are fully customizable for each platform.</p>
        </li>
      </ul>
    </li>
    <li>
      <p>
        <strong>Dynamic and Flexible</strong>:
      </p>
      <ul>
        <li>
          <p>Add or remove team members easily.</p>
        </li>
        <li>
          <p>Reorder team members as needed.</p>
        </li>
      </ul>
    </li>
  </ol>
  <hr>
  <h4>
    <strong>What should reviewers look for?</strong>
  </h4>
  <ol start="1">
    <li>
      <p>
        <strong>Functionality</strong>:
      </p>
      <ul>
        <li>
          <p>Ensure the block works as expected in both the <strong>back-end (editor)</strong> and <strong>front-end (live site)</strong>. </p>
        </li>
        <li>
          <p>Test adding, editing, and removing team members.</p>
        </li>
        <li>
          <p>Verify that social media links open in a new tab.</p>
        </li>
      </ul>
    </li>
    <li>
      <p>
        <strong>Styling</strong>:
      </p>
      <ul>
        <li>
          <p>Check that the <strong>colors</strong>, <strong>shadows</strong>, and <strong>animations</strong> are applied correctly. </p>
        </li>
        <li>
          <p>Ensure the layout is responsive and looks good on both <strong>desktop</strong> and <strong>mobile</strong>. </p>
        </li>
      </ul>
    </li>
    <li>
      <p>
        <strong>Customization</strong>:
      </p>
      <ul>
        <li>
          <p>Test the <strong>color pickers</strong> and <strong>layout options</strong> in the block settings. </p>
        </li>
        <li>
          <p>Verify that changes are reflected immediately in the editor and on the front-end.</p>
        </li>
      </ul>
    </li>
    <li>
      <p>
        <strong>Performance</strong>:
      </p>
      <ul>
        <li>
          <p>Ensure the block is lightweight and does not negatively impact page load times.</p>
        </li>
        <li>
          <p>Check for any console errors or warnings in the browser developer tools.</p>
        </li>
      </ul>
    </li>
    <li>
      <p>
        <strong>Code Quality</strong>:
      </p>
      <ul>
        <li>
          <p>Review the code for <strong>best practices</strong>, such as proper use of WordPress APIs, clean CSS, and efficient JavaScript. </p>
        </li>
        <li>
          <p>Ensure the block is well-documented and easy to maintain.</p>
        </li>
      </ul>
    </li>
  </ol>
  <hr>
  <h4>
    <strong>Use Case</strong>
  </h4>
  <p>This block is ideal for:</p>
  <ul>
    <li>
      <p>
        <strong>Business websites</strong> to showcase their team.
      </p>
    </li>
    <li>
      <p>
        <strong>Portfolio websites</strong> to highlight collaborators.
      </p>
    </li>
    <li>
      <p>
        <strong>Non-profit organizations</strong> to introduce their staff.
      </p>
    </li>
  </ul>
  <hr>
  <h4>
    <strong>Example Usage</strong>
  </h4>
  <ol start="1">
    <li>
      <p>Add the block to an "About Us" page.</p>
    </li>
    <li>
      <p>Upload team member photos, enter their names and roles.</p>
    </li>
    <li>
      <p>Add social media links for each team member.</p>
    </li>
    <li>
      <p>Customize the colors and layout to match your website's design.</p>
    </li>
  </ol>