Posted in how to
3673
2:49 am, January 28, 2020
 

How to do a simple bootstrap landing page from Scratch - Part 3

Ok in out previous Part 1 and Part 2 of How to do a simple bootstrap landing page from Scratch, we have so far added a base file, bootstrap, jquery, top nav, hero image and hero text.

Time to add some boxes to this landing page. Every landing page needs three boxes, doesn’t it? Well apparently this one does, so lets add them.

Let’s add some boxes.

Bootstrap will do all the heavy lifting for box styles using the card class and the bootstrap grid to align them in a row.

Add a container

This acts like a wrap, making sure that the content does not go all the way to the edge of the screen so will keep our three boxes in the middle of the screen rather than going all over the place.

Then we will add the columns.

They will all be the same size so bootstrap will figure out the widths.

Let’s have a look and make sure it’s all looking ok so far.

Looking ok so far, now to add the actual boxes, into the grid.

We can use the bootstrap card for this to give it a bit of a border and title.

Reload it again and see what the cards look like.

Yep cards look ok, just need to add some margin to the top there, or at the bottom of the hero image, to pad it out a bit.

Save and reload again to see if it looks good.

Yep looking better.

Now we need to add an action button to each card, and center the text.

Let’s add a class to cover all of our promo cards to easily center the text.

Add a style selector for this as well to the styles.

Looking a bit neater now.

Now to add some icons, we will use font awesome for this as they are fairly easy to add and have a ton of icons.

Installing Font Awesome

Once again to install font awesome we just need to head over to cdnjs and type in font awesome.

Then copy the link and paste into the header of our landing page. As its a css we should add this to the header. Copy the Link Tag and paste it under the existing bootstrap css.

Now the font awesome library is available, you can browse the icons available here. https://fontawesome.com/icons?d=gallery

Let’s pick some icons for our cards.

Click on the icon (on the font awesome website) and, up the top of the page there is a Copy HTML link.

Just click on that top copy the code to your clipboard.

Just make a small change to the card and change the title to a h5 tag, so that the card has a nicer title.

Then underneath this we can past the icon.

Now to paste in the icon code.

Reload the landing page and see how it looks.

Not too bad, but the icon is a bit small. Add a class to the icon to make it larger, font awesome comes with built in classes to do this. Fa-2x, 3x, 4x, etc. Or you can change it with css, but we may as well just use the built in class. Try 4x and see what it looks like. Fa-4x

Now i think the icon looks a bit strange under the title so we will swap them, and make the icon a bit lighter in colour.

Change the class on the icon wrap, from card-text to card-icon and then add a css style for it.

Reload the landing page, and have a look.

Yep looks like a box.

As this is already a couple of pages long, ill end part 3 here. Not sure how many parts this will end up as, hopefully not too many. Will see at the end!

Files

You can look at my files so far here, if you want to see what it looks like, or just cheat and copy it! :)

Demo

I have uploaded a demo of the files so far, so you can see what it looks mid progress / or so far. Check out the demo so far here.

View Statistics
This Week
73
This Month
366
This Year
317

No Items Found.

Add Comment
Type in a Nick Name here
 
Search Articles
Search Articles by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
In this case my anchor this week becomes driving almost 2hrs outside of Atlanta to one of my favorite hard core gyms in the world.. MetroFlex aka The Dungeon. The gym owners turn the heat way up so it becomes a fun sweat box and the gym members just watch from afar and leave me alone. I happily drive myself long distances to find MY ANCHOR. Our anchor allows us to have balance, focus and be as productive as possible. And if you're in the middle of a heavy set and your headphones start to fall off your head, like mine did here.. well.. f*ck the headphones. Let em break and fall. You can always get a new pair, but the iron ain't ever gonna lift itself.
Unknown
Random CSS Property

border-inline-width

The border-inline-width CSS property defines the width of the logical inline borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width and border-bottom-width, or border-left-width, and border-right-width property depending on the values defined for writing-mode, direction, and text-orientation.
border-inline-width css reference