Bootstrap is a popular web development library of pre-built HTML, CSS, and JavaScript components. Developed by Twitter, it gained widespread adoption due to its ease of use and ability to create responsive websites.
Bootstrap simplifies the web development process by offering a set of ready-to-use mobile-first UI components, such as buttons, navigation bars, forms, grids, and more.
Bootstrap’s responsive grid system allows developers to create flexible layouts based on a grid of twelve columns.
The library also includes a wide range of CSS classes and utility styles that can be easily applied to elements, providing consistent styling and interfaces.
Finally, Bootstrap offers a set of JavaScript plugins that enhance the functionality of the components, such as carousels, form validation ui, drop down menus, modals, tooltips, and more.
For this exercise, first go complete the Bootstrap 5 Crash Course video from Web Dev Simplified on YouTube.
Code along with the examples. The video is about 70 minutes long. Coding along will take a few hours to finish.
Then please
Your task is to create the responsive page shown in the movies and screenshots.
The “Twist”
However, you have one big limitation: with two exceptions (described below), you cannot add any css other that what you have already downloaded.
All styling must be done via Bootstrap classes.
Examine the downloaded CSS. It has two purposes:
- To give textarea elements a minimum height. I don’t think Bootstrap includes a way to do this.
- To output a “readout” of your responsive breakpoints. For this to work, you will need to include a box with a class of breakpoints in your html.
Note: About the Screenshots
Because of a bug in how Firefox captures positioned elements in screenshots, I had to hide the breakpoints box before taking the screenshot.
Please refer to the video for its location and appearance.
What to Hand In
Name the project folder firstname-lastname-bootstrap-intro.
Zip the folder.
Hand it in to our class hand in folder (Langara: Brightspace, Emily Carr: Moodle).