Landing page sections in Bootsrap - Mini Project: Build & Apply

Landing Page Sections with Bootstrap

📖 Scenario: You are building a simple landing page for a new app. The page will have a header, a main section with a welcome message, and a footer. You will use Bootstrap to style the page and make it look neat on all devices.

🎯 Goal: Create a landing page with three sections: a header with a navigation bar, a main section with a welcome message inside a container, and a footer with copyright text. Use Bootstrap classes to style and arrange these sections responsively.

📋 What You'll Learn

Use Bootstrap 5 CSS from CDN

Create a <header> with a Bootstrap navbar containing the brand name 'MyApp'

Create a <main> section with a Bootstrap container and a centered welcome message inside an <h1>

Create a <footer> with a dark background and white text, containing the text '© 2024 MyApp. All rights reserved.'

Make sure the page is responsive and uses semantic HTML5 elements

💡 Why This Matters

🌍 Real World

Landing pages are the first impression for many websites and apps. Knowing how to build them with Bootstrap helps create professional, responsive designs quickly.

💼 Career

Web developers often use Bootstrap to speed up layout and styling tasks. Understanding how to structure landing page sections is a common job requirement.

1

Create the basic HTML structure with Bootstrap link

Write the basic HTML5 skeleton with lang="en", meta charset="UTF-8", and viewport meta tag. Include the Bootstrap 5 CSS CDN link inside the <head>. Add empty <header>, <main>, and <footer> elements inside the <body>.

Bootsrap

    
    
    Landing Page
    


    
    
    
    

Hint

Remember to include the Bootstrap CSS link inside the <head> section.

2

Add a Bootstrap navbar inside the header

Inside the <header>, add a Bootstrap navbar with the class navbar and bg-light. Include a container inside the navbar. Add a brand link with class navbar-brand and text 'MyApp'.

Bootsrap

    
    
    Landing Page
    


    
        
    
    
    

Hint

Use a <nav> element with classes navbar bg-light and place the brand link inside a div with class container.

3

Add a welcome message inside the main section

Inside the <main>, add a Bootstrap container. Inside it, add an <h1> with the text 'Welcome to MyApp!' and center the text using Bootstrap classes.

Bootsrap

    
    
    Landing Page
    


    
        
            
                MyApp
            
        
    
    
        
    
    

Hint

Use a div with classes container text-center mt-5 to center the heading and add some top margin.

4

Add a footer with dark background and white text

Inside the <footer>, add a div with Bootstrap classes bg-dark text-white text-center py-3. Inside it, add the text '© 2024 MyApp. All rights reserved.'.

Bootsrap

    
    
    Landing Page
    


    
        
            
                MyApp
            
        
    
    
        
            Welcome to MyApp!
        
    
    
        
    

Hint

Use Bootstrap classes bg-dark, text-white, text-center, and py-3 on a div inside the footer.

Practice

1. Which HTML tag is best to use for defining distinct sections in a Bootstrap landing page?

easy

A. <div>

B. <section>

C. <span>

D. <article>

Solution

1. Step 1: Understand semantic sectioning tags

   The <section> tag is designed to group related content into distinct parts of a page, making it ideal for landing page sections.

2. Step 2: Compare with other tags

   While

   is a generic container, it lacks semantic meaning. <span> is inline and not for sections. <article> is for self-contained content, not general sections.

3. Final Answer:

   <section> -> Option B

4. Quick Check:

   Semantic sections = <section> [OK]

Hint: Use <section> for clear, semantic page parts [OK]

Common Mistakes:

• Using <div> without semantic meaning
• Confusing <article> with <section>
• Using inline tags like <span> for layout

2. Which Bootstrap class would you use to create a responsive container for a landing page section?

easy

A. container-fluid

B. col

C. row

D. container

Solution

1. Step 1: Understand Bootstrap container classes

   The container class creates a responsive fixed-width container that adapts to screen sizes, perfect for landing page sections.

2. Step 2: Differentiate from other classes

   container-fluid spans full width always, row and col are for grid layout inside containers.

3. Final Answer:

   container -> Option D

4. Quick Check:

   Responsive fixed container = container [OK]

Hint: Use 'container' for fixed responsive width [OK]

Common Mistakes:

• Using container-fluid when fixed width is needed
• Confusing row or col as containers
• Not wrapping content in a container

3. What will be the visual result of this Bootstrap landing page section code?

<section class="container text-center py-5">
  <h1>Welcome</h1>
  <p>Your journey starts here.</p>
</section>

medium

A. Text aligned right with horizontal padding

B. Left-aligned text with no padding

C. A centered heading and paragraph with vertical padding

D. No visible content due to missing classes

Solution

1. Step 1: Analyze Bootstrap classes used

   container centers content horizontally with fixed width, text-center centers text, py-5 adds vertical padding top and bottom.

2. Step 2: Predict visual output

   The heading and paragraph will appear centered horizontally with space above and below them inside a fixed-width container.

3. Final Answer:

   A centered heading and paragraph with vertical padding -> Option C

4. Quick Check:

   text-center + py-5 = centered text with vertical padding [OK]

Hint: text-center centers text; py-5 adds vertical padding [OK]

Common Mistakes:

• Assuming text aligns left by default
• Confusing py-5 with horizontal padding
• Thinking container removes padding

4. Identify the error in this landing page section code:

<section class="container text-center py-5">
  <h2>Features</h3>
  <p>Easy to use and responsive.</p>
</section>

medium

A. Mismatched heading tags (<h2> and </h3>)

B. Missing container class

C. Incorrect use of text-center class

D. No closing section tag

Solution

1. Step 1: Check HTML tag pairs

   The heading starts with <h2> but closes with </h3>, which is invalid HTML and causes rendering errors.

2. Step 2: Verify other parts

   The container class is present, text-center is correctly used, and the section tag is properly closed.

3. Final Answer:

   Mismatched heading tags (<h2> and </h3>) -> Option A

4. Quick Check:

   Matching tags required = mismatched tags error [OK]

Hint: Match opening and closing tags exactly [OK]

Common Mistakes:

• Closing tags different from opening tags
• Forgetting to close section
• Misusing Bootstrap classes

5. You want a landing page call-to-action section with a full-width background color, centered text, and a button that scales on small screens. Which Bootstrap structure is best?

hard

A. <section class="bg-primary text-white text-center py-5"><div class="container"><h2>Join Us</h2><button class="btn btn-light btn-lg">Sign Up</button></div></section>

B. <section class="container bg-primary text-center"><h2>Join Us</h2><button class="btn btn-light">Sign Up</button></section>

C. <section class="text-center py-5"><div class="container bg-primary text-white"><h2>Join Us</h2><button class="btn btn-light btn-lg">Sign Up</button></div></section>

D. <section class="bg-primary text-white py-5"><h2 class="text-center">Join Us</h2><button class="btn btn-light btn-lg">Sign Up</button></section>

Solution

1. Step 1: Ensure full-width background color

   Applying bg-primary and padding to the <section> ensures the background color spans full width.

2. Step 2: Center text and contain content

   Using text-center on the section centers text. Wrapping content inside a container keeps it aligned and responsive.

3. Step 3: Use scalable button

   The button uses btn-lg for larger size and scales well on small screens with Bootstrap's responsive utilities.

4. Final Answer:

   Option A has all correct structure and classes -> Option A

5. Quick Check:

   Full-width bg + container + centered text + scalable button = <section class="bg-primary text-white text-center py-5"><div class="container"><h2>Join Us</h2><button class="btn btn-light btn-lg">Sign Up</button></div></section> [OK]

Hint: Put bg on section, content in container, use btn-lg for scaling [OK]

Common Mistakes:

• Putting bg-primary on container limits width
• Missing container causes content to stretch too wide
• Not using btn-lg for button size