Learn Bootcamp From Zero

In this post, I will continue to play with grid sizes based on the last post example. Change Grid Size From Large To Medium Firstly, I make a 12 grids, and each grid is for large size device and scales to 1 units (col-lg-1). The result shows 12 grids in the same size on the desktop size page. If the window changes from desktop size to tablet size, we will change the grid size from large to medium, too. Therefore, I add additional value "col-md-2" in the class attribute. As we see, when I change the web page to a tablet size, each grid will scale 2 units to fit in a medium size device. Change Grid Size From Medium To Small Then, I create a new grid system which includes four same unit grids to fit both large and medium size device. They are colored in orange. The result shows four orange grids. If we want those grids to fit in a small device, we need to add another class attribute value "col-sm-6". When I change the w...

According to Bootstrap, grid systems are used for creating page layouts through a series of rows and columns that house your content. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. There are four main grid sizes :  Extra Small devices (col-xs-) : phone  Small devices (col-sm-) : tablet Medium devices (col-md-) : desktops Large devices (col-lg-) : desktops The instructor shows us how to build a responsive grid system. After we link the bootstrap css file, we are going to create the grid system on the body part. Since grid systems only scale up to 12 columns, we can create layouts in different units. In the HTML, we create a "container" first, so the grid system will be inside the container.  Then we create a class attribute value equal "row" in the div tag, so all units will stay in one row just like the table data stay in the table row. And ...

If you want to make your message outstanding on the web page, Jumbotron can be a good style choice. Jumbotron is a lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site. (From Bootstrap Components-Jumbotron) I would like to try this component on my page, so I create the HTML page and apply the Jumbotron code in the body part. I change the text "Hello, World!" to "This is Jumbotron" and also put its definition in the <p> element. If we want the whole part to be center of the page, the instructor told us a quick way to do that is adding a "container"  outside the jumbotron code. The instructor also recommended some common forms on Bootstrap. I prefer the inline form because it is very short and simple. I apply the inline form code under the Jumbotron code. The class value "form-group" will group that input, so it can leave some space between each input. As...

Create a fully designed website requires lots of work and time. The Udemy web develop course instructor introduces Bootstrap which is a very popular code resource. Lots of companies and web developers use it. Basically, we take someone else's code from Bootstrap and add into our own application. It helps us make good looking sites that are responsive and quickly. Moreover, we don't have to write a ton of our own code. In the Bootstrap, you can find many customized CSS, JS and Component code for different style web design. Some codes are free to use, so you can copy and paste those code in your HTML page, and then you make your own change. How do we apply Bootstrap into our application? I am going to use button as a simple example to show you how we apply Bootstrap to our own application. Add CSS Link We go to the "Download page"  , you can either download the file or just copy the highlight CSS link from Bootstrap CDN. You paste the link inside...