Bootstrap 4: Three Steps To Create A Fancy Pattern Card Page

Today, I learned how to add picture card on the page. The Udemy course shows a simple pattern project to demonstrate it. Then, I follow the instructor's steps and create my own pattern page.

Step One: Create Simple Nav Bar

On the top of page, we need to create a nav. Inside the <nav> tag, I set the background color (bg-dark) and navbar color (navbar-dark). You can always change your background color to light or any other choices.

The instructor showed us how to install an icon from Font Awesome. Basically, you find your ideal icon from their icon page and copy the tag and paste in your HTML.

Moreover, we also need to add a support link from Font Awesome Start Page inside header tag, so the icon tag will work.

The result: dark nav bar with a small icon in front of the brand name.

Step Two: Create A Jumbotron

We create a Jumbotron, and inside it we adding the header text, paragraph text and two small buttons. All the button class value are selected from Bootstrap 4 Button Code.

We also want to add a pattern image background for the Jumbotron, so we create a simple <style> and set the ID selector "header" background image.

Normally, we create another CSS file to do it, but this is the only CSS part for this project, so we just add it in the HTML page.

The result:

Step Three: Add Card Image

Bootstrap 4 add a brand new card component. We will use the basic card style which has top image and some body text.

We add an card top image first by adding the image link in the card.

The result:

By following the card code, we add the the card title, card text, and two buttons under the top image. One of the buttons is the icon from Font Awesome.

Since the card is too large on the page, we don't have enough space for the other two cards. We set the grid class value "col-lg-4" to let the card only scale 4 columns for the large device size.

The result: The card becomes smaller and only accounts for 1/3 of the page.

Then, we copy the card twice inside the container, and update the top image links and card title. At the end, the final page looks a lot attractive.

Comments

Express Study Notes: Five Steps To Develop My First Express App

In the last post, I shared my study note about one of the most important reason that Node is very popular is because Node has the largest package ecosystem of open source libraries in the world. Node's NPM, the package manager for Javascript, contains almost 200,000 packages which are centralized on the NPM website. And more importantly, NPM has a command line tool which help us to install packages really easily. The course instructor told us that we are going to learn Express.js to develop Apps in this course. screenshot for the Express.js.com homepage What is Express.js? Express.js is a web development framework. According to the course, framework is a bunch of code that someone else wrote just like a library is except when we use a framework, we have less control. The goal of using this framework is to make our development of APPs faster. Why do we use Express.js? 1. It is the most popular Node web development framework so far. 2. It is a very lightweight ...

Intro To Authentication: Three Useful Tools Will Make Everything Easier

Authentication is very important for both users and websites. It helps to keep users' information safe and also helps us to manage the accounts. Authentication is also complex because there is a lot of moving pieces that have to fit together in just the right way to make that work. The course introduce three tools to make authentication more quickly and safely. 1. Passport.js Passport.js will make our life easier and make our code shorter. It also helps to make implementation faster. Most importantly, it is used a lot in the real word. 2. Passport Local Passport Local is for username and password. It's about providing this entry point into all sorts of destinations. 3. Passport Local Mongoose This package will help us implement authentication with passport, and it's specially made to work with mongoose. We are also going to use these three tools into a Secret Page App project, which will show in next few posts.

Intermediate Express.js: How To Render HTML From A EJS File?

The Express.js apps we have developed so far are just simply getting requests from users and sending matched message back to them. However, it is not what we want in the real web application. In most case, we want to send back a relevant web page when our app receives request from user. In order to do that, we need to npm install ejs file in the Express, create HTML page in the ejs file, and render HTMl from the ejs file. I know it sounds confuse now. I am going to explain more details in the example. EJS stands for embedded JavaScript. It lets us embed JavaScript code variables if statements loops inside of HTML. How to render HTML from a EJS file? Step One: Create a HTML page in EJS file Firstly, in our server, we create a folder named "EJSDemo". In this folder, we touch two files, one is "app.js", and the other one is "home.ejs". We are going to write a simple HTML code in the "home.ejs" file. The instructor create a dog page,...

Learn Bootcamp From Zero

Search This Blog