Do webdevelopers code out every line of CSS that they use? You have probably noticed that CSS is rather tricky and requires quite a bit of code in order to create a page that renders in the way that we wish it to render. Enter BOOTSTRAP.
Bootstrap is a framework of predefined CSS classes that we can import and use on our webpages. By using this framework we can quickly make our websites look more professional without reinventing the wheel. Additionally, they have extensive documentation that we can copy from and then modify on our pages. You can see some pages that were made exclusively with Boostrap here.
GOAL: You have been tasked with creating a Bootstrap page that showcases images and information about some of your favorite things.
Today we are going to practice setting up Bootstrap on a webpage and adding cards and navigation bars to create some additional style! Below outlines the steps you need to take in order to add Bootstrap to your page.
- Navigate to Bootstrap's documentation.
- Scroll down to the header that says CSS. Copy and paste the style tag into the head of your index.html file (and any other HTML file you want to use Bootstrap on). If you did this correct, you'll see the font has changed.
- Scroll down to the JS header. Copy and paste the three script tags at the end of the body before the
</body>tag.
- ADDING A CARD: Now that have Bootstrap connected, we are going to add a card to our page. Cards are great because they are predefined containers that help to neatly organize information on our webpage. Websites love to use these (Pintrist is basically exclusively cards). To make a card you can:
- Search 'cards' on the Bootstrap website or open this link.
- Pick the card you want to use
- Copy and paste the entire code between the
<body>and</body>tags - This gif shows you the steps as well!
- ADDING MORE CARDS: Add at least 5 cards with images and information about your favorite things. This can be anything that you find interesting (activities, artists, songs, food, etc.). Make sure the cards contain an image, title, and some backgroudn information about the item.
- STRETCH - ADDING A NAVIGATION BAR: If you were able to do steps 1 - 4, try adding a navigation bar! Navigation bars are incredably powerful tools to create organization and structure on your webpage. To make a card you can:
- Search 'navbar' on Bootstrap.
- Pick the navbar you want
- Copy and paste the entire code between the
<body>and</body>tags - This gif shows you the steps as well!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent