About 4 hours 45 minutes
Bootstrap is a popular and easy-to-use front-end framework first released by Twitter. Utilizing Bootstrap significantly reduces the amount of time spent styling your webpages, especially for mobile-development.
Example of working websites that have used bootstrap
Below are the examples of websites that have used bootstrap:
Participants will be able to:
Bootstrap (Video walkthrough of slides)
bootstrap.css and a bootstrap.js . The bootstrap.css file is what most people refer to when they talk about Bootstrap. The bootstrap.js file is only necessary when you want to make interactive components like drop-down menus, modals, and the like. In that case, you’ll need to use bootstrap.js in addition to bootstrap.css.bootstrap.js file needs jQuery in order to work. Make sure you’ve linked to the jQuery CDN above your link to the bootstrap.js CDN.Activity 1 - What Can Be Done with Bootstrap?
This is an independent activity and pairs will not be assigned.
Spend 20 minutes exploring this link given in the “Supplemental Materials” section above: Things you can build using Bootstrap. Make a list that includes some of the most useful components, your favorite components, or components you think would be really neat to add to a project.
Spend 10 minutes exploring this link given in the “Supplemental Materials” section above: Interactive Bootstrap features. Add some of these features to the list you created in the first portion.
Activity 2 - Your First Bootstrap Webpage!
Techtonica staff will assign pairs.
Using your Terminal, navigate to your Desktop.
Create a new directory called vegetables-webpage.
Navigate to vegetables-webpage. Open the whole directory with code . .
Create a file called vegetables.html. It should automatically appear in the left sidebar in VS Code as an editable file.
Open this lab exercise in a new tab by pressing <CONTROL> and clicking on the link. A selection box will appear. Click on “Open in new tab”.
Open the link provided in the first bullet point in a new tab as well. Using the Quick Source Viewer Chrome extension you installed in the “Chrome Developer Tools” lesson, view the HTML and talk through the code with your pair partner. Can you explain what each section accomplishes? Once you feel satisfied that you understand what the code is doing, move on to the next step.
Copy the HTML you accessed in the previous step into vegetables.html. Save the file. Close the Chrome tab that you opened in Step 6 (the one you used the Chrome Quick Source Viewer extension on).
In a new tab, open vegetables.html in Chrome using one of the techniques you learned in the “HTML” lesson. It should look the same as the example you saw a moment ago. You’ll refer back to this tab through this exercise as you add code and refresh this webpage.
Continue on with the tutorial you opened in Step 5 and see how far you can get. You’ll likely make small bursts of progress using trial and error. That’s OK! Be patient with yourself. Remember to stick to the 20-minute rule before asking a peer or instructor for help. Before clicking “Show Solution” at the bottom of the tutorial, please give this exercise a good-faith effort.
Did you specify in vegetables.html column widths for various screen sizes? If you didn’t, please do so now.
Using online resources, add a Bootstrap modal window component to your Vegetables webpage. The modal window should display some content, and also open and close. Remember: which Bootstrap CDN link do you need to add before you can add interactive features?
Form small groups and discuss - What is a grid system? - What is a responsive layout? - How to customize Bootstrap? - What can you build with Bootstrap? - Why use Bootstrap?