06 Oct Bootstrap First Example
Let’s begin with our first Bootstrap example and make learning interesting with the live running of the code. We will also learn the difference between fixed-width (responsive) and full-width containers.
The following is the code to create and run your first web page with Bootstrap
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class = "container"> <h1>Demo Heading</h1> <h2>Demo Sub-Heading</h2> <p>This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. </p> </div> <div class = "container-fluid"> <h1>Demo Heading</h1> <h2>Demo Sub-Heading</h2> <p>This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. </p> </div> </body> </html> |
Output
Video Tutorial – Bootstrap First Example
The following is the complete video tutorial to learn how to run your first example in Bootstrap:
If you liked the tutorial, spread the word and share the link and our website Studyopedia with others:
Read More:
No Comments