🤩
Windframe Import update is finally here!

Iframe

Bootstrap 5 Iframe

Bootstrap 5 IFrame is a web page that has an HTML document that is 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.

Bootstrap Iframe Default

######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>

######Script

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

Iframe Customized

Use the id cdb-iframe2 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>

######Script

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

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast