Learn Bootcamp From Zero

I mentioned that flex box allows items to move inside a container. In the last post, I use buttons as an example to show how do those buttons move in the flex box. Today, I learned navs can also move in a flex box. I would love to share my study note here. Firstly, I copy the Bootstrap 4 starter template on the editor, and also put the base nav code in the body. In order to show how navs move in the flex, I add a border outside the navs. The result shows a base nav bar inside a box. Move in Row Then, I want to add some space between each nav items, so I set "justify-content-around" value in the <ul>. The result: You can also move the items to the right (justify-content-end) or to the center (justify-content-center). Move Vertically If I want to show my nav bar vertically, I can just simple set "flex-column" value. The result:  Responsive Nav If I want the nav bar change from the horizontal to vertical as the page cha...

Compare with Bootstrap 3, Bootstrap 4 has added many new functions and made some changes. Flex box is one of the new functions. According to the course instructor, flex box includes a bunch of CSSA properties to move things around the position elements inside of a container instead of a page. Basically, flex box is a model for positioning content inside a box. Let's see some flex box examples. Bootstrap 4 has a new starter template which includes the latest design and development standards. Therefore, I just copy the HTML template on my code editor. Then, I create two buttons inside a container and add a border to the container. This will help you to see how those buttons move inside the box. Justify-Content (Move in Row) To make two buttons move to the left in the flex box, we need to add a property value: "d-flex" . It means "display flex", and it will help to set the directions. For the default value, the items are on the left. The ...

I have learned how to create a image gallery, and now it's time to create a nice landing page. Add Bootstrap CSS and Java Script Links Firstly, we need to install Bootstrap CSS link in the <head> element and add the Java Script & J Query links at the bottom of the <body> . Create Major Content in Grid System I love coffee so much, so I would like to create a landing page named "Coffee Time". I want all my text in a container, so it will help to style them as a whole later. Since I only have two headline words, I want them to display in the full-size grid, which is 12 columns. Under the text, I add a large size bootstrap button, so users can click on it. The page looks like this: all the content is on the top left of the page, and I don't like it.  Style The Content I want all the content to be in the center of the page. Therefore, I add <div id="content"> tag outside the headers & button.  Then, I...

I have shared how to apply Bootstrap code to create Nav-bar, Jumbotron, and Grid System in previous posts, so today I am going to use all my bootstrap learning to create a Image Gallery. This is also a Udemy course project, so some image links are provided by instructor. I would like to share the project process here. Add Bootstrap CSS & Java Script Links I start to create a HTML page and link to the Bootstrap CSS code. At the bottom of <body>, I also add the Java Script and J Query links, so it will make sure the page is following the certain rule. Create A Jumbotron I apply the Jumbotron code in the HTML, and add h1 header as "The Image Gallery" and a short paragraph to describe what this site is about. By the way, just make sure the Jumbotron code is inside the "container", so everything will be moved to the center of the page. Add A Nav-Bar I just copy my old nav-bar code from previous Nav-bar exercise, but I make two...

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