O'Reilly logo

Bootstrap 4 – Responsive Web Design by Jason Marah, Benjamin Jakobus, Matt Lambert, Silvio Moreto

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Setting up our project

Now that we know what Bootstrap has to offer, let us set up our project:

  1. Create a new project directory named MyPhoto. This will become our project root directory.
  2. Create a blank index.html file and insert the following HTML code:
            <!DOCTYPE html> 
        <html lang="en"> 
        <head> 
            <meta charset="utf-8"> 
            <meta name="viewport" content="width=device-width,
            initial-scale=1, shrink-to-fit=no"> 
            <meta http-equiv="x-ua-compatible" content="ie=edge"> 
            <title>MyPhoto</title> 
        </head> 
        <body> 
            <div class="alert alert-success"> 
                Hello World! 
            </div> 
        </body> 
        </html>

    Note the three meta tags. The first tag tells the browser that the document in question is utf-8 encoded. Since Bootstrap optimizes its content for mobile devices, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required