Skip to main content

Posts

Showing posts with the label card

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