DEV Community

Cover image for Zhush it up with animations & some Bootstrap!
Ellaine Tolentino
Ellaine Tolentino

Posted on • Updated on

Zhush it up with animations & some Bootstrap!

Hey! Hello there!

The goal of this blog is to tell you how I 'upgraded' my practice project from my first blog from this...

Alt Text

To this!

Did you see that? Below I would be sharing how I was able to use a little Bootstrap styling on those pages and show you what other sources I found interesting if you're looking into adding a little pizzazz into your project's HTML framework.

First, what is Bootstrap?

Bootstrap is an open-source toolkit for your styling needs. There is a lot of styling framework to choose from but unfortunately, not all come for free.

There are a lot more open-source websites to get style formats from too! I have browsed and experiment on a couple like the ones below:

--> Foundation by Zurb - they have a good basic HTML layout/framework you can download and play around with.
--> Bulma -free and open-source for CSS framework. Installed through npm.
--> GroundworkCSS - has a good amount of other sources within the website to try! Even animations!
--> Animate.css - easy installation instruction! Just needs to be installed using npm or yarn, or add the stylesheet link on your HTML head.

But since I got to apply styling with Bootstrap first, I'll show you how I utilize it in code first.


Click the “Documentation” link above the page and copy the stylesheet link on the CSS section. Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

Alt Text
Disclaimer: Doing it this way won't make you have access to the full scope of Bootstrap. Some elements like dropdowns or carousel will require popper.js/util.js.

Once you copied the stylesheet link to your HTML file, you are now ready to start and play around with Bootstrap!

Let’s try an easy one to apply… maybe a navbar?

From the documentation page, go to Components, then a list of elements would dropdown. Let's click Navbar.

On that page, it should show you a detailed description of how it works. When you scroll down, it has a lists of options to choose from for just navbars, let’s try and choose the first one which has this HTML layout;

Alt Text

Copy the HTML code snippet and paste that inside your <body> tags, change the necessary values, and viola! A working navbar!

Up next is that big display card with a big text on it. It's a thing called jumbotron. Identical pattern as to how we got the navbar styled, we copy the HTML of want we want it to look like and replace the values! Cat Ipsum link here.

Alt Text

See that set of colorful buttons on our newly built jumbotron? Alright next up, are buttons!

So, same procedure, from components, click Buttons. There would also be a list to choose from on what styling you want. Well, I'm gonna try them all for demonstration purposes! The HTML syntax on making a button should be familiar, the only difference would be that it needs to be a specific class type.

Alt Text

Add all the elements you need, in my case, I added a form at the bottom of the page, some badges, and I changed the photos plus styled them. The next thing we can tackle are those pretty funky animations!

That's where Animate.css comes in handy!

Alt Text

They really mean it when they say "Just-add-water CSS animations"!

Installation & Usage:
There are 3 easy ways to install animate, and that's through npm, yarn, or stylesheet.
We're choosing the stylesheet route for demonstration.

Alt Text
You know the drill, copy and paste it inside your <head> tag!

Now since the elements we want to animate have their individual class types from Bootstrap, we would need to tack animate's class in the current class type of our elements. Our HTML syntax would look like this;
Alt Text

Then now you can do the same to the elements you want animated. The only thing you would need to change is the last part of the class which is the animation name.

Alt Text

And there you have it!

Another good source that I mentioned was Bulma, GroundworkCSS, and Foundation By Zurb. I tried to make another page using Foundation and here's what the result is;
Alt Text

I kept my CSS styling about the same and just used the HTML formatting required by Foundation. Here's a good snippet of the Bootstrap and Foundation attribute differences on HTML.

Alt Text

Pretty similar isn't it? I haven't done any research on performance but if you're just really looking into other alternatives to style your projects, maybe look into these!

I hope this helped you get your engines going in styling!


~ Alternatives for Bootstrap
~ Bootstrap cheat sheet - all Bootstrap class in one page.
~ GroundworkCSS Github repo - for readme on how to get started.
~ Freepik - my source for the cute photos!
~ Cat Ipsum

Top comments (0)