Using Card and iFrame with Flask

Flask is a popular micro web framework for Python that allows you to build web applications. In this article, we will learn how to use the Card and iFrame components from Bootstrap within a Flask application.

Setting up Flask

First, make sure you have Flask installed on your system. If not, you can install it using pip:

pip install Flask

Once Flask is installed, you can create a new Flask application. Here’s a simple example:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
  return 'Hello, world!'

if __name__ == '__main__':
  app.run()

Using Card and iFrame

Now that we have our Flask application set up, let’s create a new route that will display a card with an iFrame inside of it:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
  return render_template('index.html')

if __name__ == '__main__':
  app.run()

Now, create a new file called index.html in the templates directory of your Flask application. You can use the following HTML code to create a card with an iFrame inside of it, utilizing Bootstrap:

  
  



  

    

      
iFrame Example
      
Check out this cool iFrame:
      

        
      
    
  

  
  
  

Using the Application

Now, run your Flask application and visit the URL in your web browser. You should see the card with the iFrame embedded inside of it. You can customize the iFrame src attribute to point to any webpage you like.

That’s it! You’ve successfully used the Card and iFrame components from Bootstrap within a Flask application. Happy coding!