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 ...

Every website has a navigation which help direct users to the right place and find the right information.  As I am learning the code, I always want to create a navigation bar. I did tried to build nav-bar before, but I failed.  Today, the Udemy course instructor showed how to apply Bootstrap Nav-bar to create a responsive nav-bar.  Step One: Add the nav default element We copy the <nav> with the default class attribute value on the HTML page.  On the top of the page shows a light gray area. The nav-bar content will be displayed in this area. Step Two: Put the website name in the navbar-header We apply the navbar-header div code in the HTML page and put the website name "My Blog" in the <a> tag. As the result, the web page show your brand name or website name on the navi-bar. Step Three: Create navigation list Under the navbar-header, we  give the <ul> a class attribute value "nav navbar-nav". The...

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...