IFrame

Bootstrap 5 IFrame

Bootstrap 5 IFrame is a web element that has an HTML document embedded in another HTML document. IFrames are used to display content from other websites.

You may use the Bootstrap integration to put the IFrame's content inside a modal to make it even more interactive and fun.

Bootstrap 5 IFrames are fully responsive components that change to the screen size, so you don't have to worry about your content quality.

Application of IFrames:

Video tutorial
Promotional video presentation
Google Maps in contact section

Default IFrame

Use the id cdb-iframe1 for the default IFrame and the class cdb-iframe for the Bootstrap 5 IFrame in your project.

The src attribute denotes the location of the material you want to play. The ratio attribute specifies the width-to-height ratio in pixels. The allowFullScreen parameter enables your IFrame to be full-screen.

HTML

html

<div
  id="cdb-iframe1"
  class="cdb-iframe"
  src="https://www.youtube.com/embed/xnczyP2jSR0"
  title="main video"
  allowFullScreen
  frameBorder="10"
  ratio="4x3"
></div>

JavaScript

<script>
      new CDB.IFrame(document.querySelector('#cdb-iframe1'));
      new CDB.IFrame(document.querySelector('#cdb-iframe1'));
    </script>

IFrame Customized

Use the id cdb-iframe to include the Contrast Bootstrap 5 Customized IFrame in your project.

HTML

html

<div
  id="cdb-iframe2"
  class="cdb-iframe"
  src="https://www.youtube.com/embed/xnczyP2jSR0"
  title="main video"
  allowFullScreen
  frameBorder="10"
  ratio="4x3"
></div>

JavaScript

<script>
  new CDB.IFrame(document.querySelector('#cdb-iframe1')); new
  CDB.IFrame(document.querySelector('#cdb-iframe2'));
</script>

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Collapse

Icon