0
0
Bootsrapmarkup~30 mins

First Bootstrap page - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
First Bootstrap page
📖 Scenario: You want to create a simple web page using Bootstrap to make it look nice and responsive on all devices.
🎯 Goal: Build a basic Bootstrap page with a header, a navigation bar, and a main content area with a welcoming message.
📋 What You'll Learn
Include Bootstrap CSS from the official CDN
Use semantic HTML5 elements like
,
Add a responsive navigation bar with three links
Add a container with a heading and a paragraph in the main content
Make sure the page is mobile-friendly with the viewport meta tag
💡 Why This Matters
🌍 Real World
Bootstrap is widely used to quickly build responsive and visually appealing websites without writing complex CSS from scratch.
💼 Career
Knowing how to create a Bootstrap page is essential for front-end web developers to build professional and mobile-friendly websites efficiently.
Progress0 / 4 steps
1
Create the basic HTML structure with Bootstrap CSS link
Create an HTML5 skeleton with lang="en" in the <html> tag. Inside the <head>, add the charset="UTF-8" meta tag, the viewport meta tag name="viewport" content="width=device-width, initial-scale=1", and link the Bootstrap CSS from https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css using a <link> tag with rel="stylesheet". Also add a <title> with the text My Bootstrap Page. Leave the <body> empty for now.
Bootsrap
Need a hint?

Remember to add the viewport meta tag for mobile devices and link Bootstrap CSS from the official CDN.

2
Add a header with a navigation bar
Inside the <body>, add a <header> element. Inside it, create a Bootstrap navigation bar using a <nav> with classes navbar and bg-light. Inside the nav, add a <div> with class container-fluid. Inside this div, add a <a> with class navbar-brand and text MySite. Then add a <ul> with class navbar-nav and three <li> items each containing an <a> with class nav-link and text Home, About, and Contact respectively. Use href="#" for all links.
Bootsrap
Need a hint?

Use Bootstrap classes navbar, bg-light, container-fluid, navbar-brand, navbar-nav, nav-item, and nav-link to build the navigation bar.

3
Add the main content container with heading and paragraph
Below the <header>, add a <main> element. Inside it, add a <div> with class container. Inside this container, add an <h1> with the text Welcome to My Bootstrap Page and a <p> with the text This is a simple page using Bootstrap for styling and layout..
Bootsrap
Need a hint?

Use a Bootstrap container to center your content and add spacing. Put your heading and paragraph inside it.

4
Add Bootstrap JavaScript bundle and finalize the page
At the end of the <body> but before the closing </body> tag, add a <script> tag that loads the Bootstrap JavaScript bundle from https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js. This will enable interactive Bootstrap components if needed. Make sure the integrity and crossorigin attributes are not required for this exercise.
Bootsrap
Need a hint?

Add the Bootstrap JavaScript bundle at the end of the body to enable interactive features.