Bootsrapmarkup~30 mins

Form layout (inline, horizontal) in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Bootstrap Form Layout: Inline and Horizontal

📖 Scenario: You are building a simple contact form for a website. The form should look neat and easy to use on both desktop and mobile devices.

🎯 Goal: Create a Bootstrap form with two different layouts: an inline form and a horizontal form. The inline form places inputs side by side on larger screens, and the horizontal form aligns labels and inputs in rows.

📋 What You'll Learn

Use Bootstrap 5 classes for styling and layout

Create an inline form with a text input and a submit button on the same line

Create a horizontal form with labels on the left and inputs on the right

Ensure the forms are responsive and accessible with proper labels

Include the Bootstrap CSS link in the HTML head

💡 Why This Matters

🌍 Real World

Forms are everywhere on websites for collecting user information. Knowing how to layout forms nicely with Bootstrap helps create professional and user-friendly interfaces.

💼 Career

Web developers often need to build accessible and responsive forms. Mastering Bootstrap form layouts is a valuable skill for front-end development jobs.

Progress0 / 4 steps

Set up the basic HTML structure with Bootstrap CSS

Create a basic HTML5 document with lang="en", meta charset="UTF-8", and meta viewport tags. Add the Bootstrap 5 CSS link inside the <head>. Inside the <body>, add a <main> element with a container <div class="container mt-4"> to hold the forms.

Bootsrap

">

Need a hint?

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

Add an inline form with a text input and submit button

Inside the container <div class="container mt-4">, add a <form> with the class row row-cols-lg-auto g-3 align-items-center to create an inline form. Inside the form, add a text input with id="inlineInput" and label with for="inlineInput". Also add a submit button with the class btn btn-primary. The input and button should appear side by side on large screens.

Bootsrap




    
    
    
    Bootstrap Form Layout

Need a hint?

Use visually-hidden class on the label to keep it accessible but hidden in the inline form.

Add a horizontal form with labels and inputs aligned in rows

Below the inline form, add a <form> with the class row g-3. For each form group, use a <div> with class col-md-3 for the label and col-md-9 for the input. Add two fields: one text input with id="horizontalName" and label for="horizontalName" with text "Name", and one email input with id="horizontalEmail" and label for="horizontalEmail" with text "Email". Add a submit button below aligned to the left with class btn btn-success.

Bootsrap




    
    
    
    Bootstrap Form Layout


    
        
            
                
                    Name
                    
                
                
                    Submit

Need a hint?

Use col-md-3 for labels and col-md-9 for inputs to align them horizontally on medium and larger screens.

Make the forms accessible and add final touches

Add aria-label="Name input" to the inline form text input and aria-label="Submit button" to its submit button for accessibility. Also, add aria-label="Name input" and aria-label="Email input" to the horizontal form inputs. Finally, add a <header> with a heading <h1> above the forms with the text "Contact Us".

Bootsrap




    
    
    
    Bootstrap Form Layout

Need a hint?

Use aria-label attributes on inputs and buttons to improve accessibility. Add a header with a clear page title.