Embedded Files
PROGRAMMING FOR THE WEB: BOOTSTRAP
Basic Bootstrap Page
Basic Bootstrap Page
Follow this guide to create a simple webpage using Bootstrap components. Your page should include:
A navbar with links
A carousel
A 3-column layout
A footer
Step 1: Set Up Your HTML File
Step 1: Set Up Your HTML File
Accept the GitHub Classroom invite
Open your Web Programming folder using VS Code
Clone the GitHub repository for this assignment.
E.g. git clone https://github.com/mullumhs/project-17-bootstrap-your_username.gitCreate the index.html file using the terminal.
Go to https://getbootstrap.com/docs/5.3/getting-started/introduction/
Copy the Basic Template from the Bootstrap Introduction page.
Paste this template into your index.html file.
Step 2: Add a Navbar
Step 2: Add a Navbar
Choose a navbar example that suits your needs (e.g., the one with a search form).
Copy the HTML for the navbar and paste it at the top of your <body>.
Customize the navbar:
Change the brand name
Modify the navigation links
Adjust colors using Bootstrap's colour utilities if desired
Step 3: Create a Carousel
Step 3: Create a Carousel
Visit https://getbootstrap.com/docs/5.3/components/carousel/
Copy the HTML for a basic carousel with controls and indicators.
Paste it below your navbar in the HTML file.
Customize the carousel:
Replace placeholder images with your own (you can use https://picsum.photos for placeholder images)
Update the text content in each slide
Adjust the number of slides as needed
Step 4: Implement a 3-Column Layout
Step 4: Implement a 3-Column Layout
This next step will involve learning about Bootstrap's grid layout system which consists of containers, rows and columns.
Please famialiarise yourself with the documentation before proceeding.
After the carousel, create a new <div> with the class container.
Inside this container, create a <div> with the class row.
Within the row, add three <div> elements, each with the class col-md-4.
In each column, you can add content such as:
An image (you can use <img> tags with Bootstrap's img-fluid class)
A heading (<h2> or <h3>)
Some paragraph text
A button
Step 5: Add a Footer
Step 5: Add a Footer
At the bottom of your <body>, create a <footer> element.
You may set up rows and columns inside as necessary.
Inside the footer, you could add:
Copyright information
Links to various pages (e.g., About, Contact, Terms of Service)
Social media icons
Step 6 - Refine
Step 6 - Refine
After getting the basics in you may like to adjust and refine the design. Example of how to adjust spacing and colours:
To add more space above an element, you can use margin-top classes like mt-3, mt-4, or mt-5.
To change background colors, you can use classes like bg-primary, bg-secondary, bg-success, etc.
To change text colors, you can use classes like text-primary, text-secondary, text-white, etc.
Documentation: Color and background Spacing Shadows Colors Background Position
Step 7 - Commit and Push
Step 7 - Commit and Push
Remember to commit and push your code when done! Here are the terminal commands to do so:
Commit your changes with a meaningful message:
git commit -am "Your message here"
Note: The -a flag automatically stages all modified files before committing, -m is to add a message.Push your changes to GitHub:
git push origin main
Page updated
Report abuse