As a full-stack developer, we come across many tools that can bring our application visual to life or, take it another step when it comes to the interface. It wasn’t too long ago, we were developing command-line apps that limited us to the terminal interface. Project week in Mod3 gives us the freedom to use google and implement new and creative ways to enhance our applications. Today’s blog, I will introduce an open-source toolkit we can implement using HTML, CSS, and Javascript.
Bootstrap divides a webpage into rows and columns. Each row is divided into 12 columns and, by design, any element can take up any number of columns. This can be seen having one <div> </div> and using an event listener for that document. You can click anywhere on the page since it falls under that tag. We can utilize the rows and columns to create our application and user experiences when on our page. Think of a three-panel brochure or a newspaper. Each section is broken down by a different image/article. We can also make a section static so that section, never changes when a user goes to a different view. Refer to the twitter left panel. No matter how far, or long, you scroll down the left panel stays in position
How to setup Bootstrap
We can go to the site, https://getbootstrap.com/, that breaks down the process of using Bootstrap in our programs. There is a downloadable package we can install on our computer or we can install using these terminal commands (version should also be verified for updates)
How to use Button in Bootstrap
For our Mod3 project, I was curious to create buttons that would stand out to a user. Bootstrap gives us a selection of buttons and ways we can customize user interaction. This code to implement the first blue botton is a html button code: <button type=”button” class=”btn btn-primary”>Primary</button>
This works because we already installed Bootstrap and added the correct links that let our program know what’s under the hood. Bootstrap will also give you side panel bars, navigation panels, as well as many visual effects such as hovering over a button.
