Shooting Hoops!

Components - plug in and play!

In this unit, you will be introduced to Bootstrap components.

These are sweet little blocks of html that Bootstrap provides for us.

We can just plug them into our webpages and edit the content to suit our purposes.

Here is some HTML markup from Bootstrap's website that I copied and pasted into my webpage. The result is on the right, a dropdown menu.

Dropdown button

</button>

<a class="dropdown-item" href="#">Action</a>

<a class="dropdown-item" href="#">Another action</a>

<a class="dropdown-item" href="#">Something else here</a>

</div>

Now all I have to do is edit it for my webpage idea.

Things to do

</button>

<a class="dropdown-item" href="#">Food and Drink</a>

<a class="dropdown-item" href="#">Sport events</a>

<a class="dropdown-item" href="#">Fashion shows</a>

</div>

Note that the btn-secondary class applied to the button element is just one option. According to Bootstrap's component documentation there are other options, too

The following video introduces how to plug components into your webpage if you need more help.

Follow these instructions and let's put some components into our responsive web page!

Create a folder called TokyoResponsive on your computer.
Click this link to download a zipped folder.
Extract the contents of the zipped folder into your TokyoResponsive folder.
Open index.html in a text editor.
In the HEAD section, copy and paste the CDN links from W3 School's Bootstrap 4 Get Started section.
In the BODY section, create 3 rows using <div> tags and Bootstrap's row class.
In the first row, copy and paste dropdown button component html from Bootstrap's component page. Edit it so that the button says Tokyo on it and it has links to the other 4 webpages in the folder.
Divide the second row up into 4 columns each spanning 3 segments of the Bootstrap Grid System. Design for sm devices.
Copy and paste the html for a card component into each column. Edit the cards so that you get this design:

Edit each card so that the correct image is shown, it has the correct text on it and when the user clicks the Go! button, it navigates to the correct webpage in the project folder. Note that the text and the button are centre-aligned.

In the third row, insert a Bootstrap carousel component. The carousel should have a slideshow of at least 6 images. You can research the carousel component at getbootstrap.com or w3 schools.

Resize your browser window to ensure that your design is responsive.

Upload your Tokyo folder to your shared online folder.