Blog Post 2

Hello, everyone welcome back to my Blog.

Last time I introduced you all to the wonderful world of Bootstrap CSS. This time around we will be expanding on the topic and also mixing in some bootstrap JavaScript in order to do some more advanced things. This is where we will really see some advantages of using Bootstrap. over the course of this blog you will notice that the code used to make things work is much less than what you might do if you were creating all these great components yourself. This is because in order to accomplish these things normally you would need to write all of your own JavaScript and CSS, so instead of writing three hundred lines of code would essentially cut that number down and maybe write about one hundred and fifty.

so the first thing we will focus on in this blog post will be the search icon button and its animation.

you will notice that the search button is a light blue color and it is outlined as well. This is done by adding the bootstrap classes: "btn" & "btn-outline-primary" as shown below.

The "btn" class is a bootstrap class that formats the object in a bootstrap boiler-plate style. The more interesting of the two is the "btn-outline-primary" class. this class not only clears out the background to make it clear but then also adds an outline and the blue color. If instead you were to replace this with "btn-danger" it would make the outline red and it would also have a background color, like so.

The next step is to animate it to change color when it is being selected. Well normally you would be correct, but in the case of Bootstrap it is all done for you when you added that "btn" class the formatting of the button made it so that it would automatically become darker when being hovered.

Next we have the navigation bar, or how Bootstrap likes to call it the "navbar".

the nav bar is the menu you would see on any regular old page except it is pre formatted and highly customizable. For example you can have regular old links to the next page or you can use dropdown menus within the nav bar or even disable the current page link. 

this allows you to have the most comprehensive menu you can allowing users to not get lost while navigating your page. this makes it less frustrating to use your page and also more accessible to people with special barriers to interfaces.

The dropdown menu is created very simply by using this structure as well as the following classes:

<li class="nav-item dropdown"> 

(This class indicates to Bootstrap that you are starting a dropdown menu under this specific list item.)

                <a class="nav-link dropdown-toggle"></a>

(This class indicates to Bootstrap that this is the link acting as a button to activate the dropdown menu.)

                <ul>

                        <li><a class="dropdown-item"></a></li>

(This class indicates to Bootstrap that this the list of menu options inside the dropdown menu. they can be links or                            images or anything you like really but mainly people use links to other pages or even different parts to the same page.)

                </ul>

</li>

these classes automatically use the pre-written Bootstrap code to hide the menu items until they are requested by clicking on the dropdown menu item.

lastly we have the carousel this is an element that if you have ever done by hand you probably hate. But once again Bootstrap is here to help with such issues. This carousel is composed of three images and it rotates through them on its own, it also has the arrows on either side for control over the direction it spins as well as the image indicator for even more control.

the arrows and indicators are done by using buttons and styling them using Bootstrap classes such as:

these classes are used in both the CSS and JavaScript pages you added to the top of your html code last time. they are all preloaded on Bootstrap and do all the leg work for you. so the animations as well as the style of the buttons themselves.

This time around my recording software was malfunctioning so stay tuned for an update where ill put a video tutorial in showing exactly how to code this yourself but for now ill leave you my full code below so you can recreate this page.

This is all of my HTML code where I included the Bootstrap CSS and JavaScript classes: 

This is absolutely ALL of my own CSS code, everything else is preloaded in Bootstrap CSS:

If you have any questions you can contact me here: andres.tovardibenedetto@edu.siat.ca