Zhush it up with animations & some Bootstrap!
Tags: css, bootstrap, codenewbie
Published: 2020-11-29 01:37:21

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](https://dev-to-uploads.s3.amazonaws.com/i/a2khcemxrszu5znwiaxs.png)

To this!

<img src ="https://media.giphy.com/media/BA4gDF5n8LwRZduiJ0/giphy.gif">


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](https://getbootstrap.com/docs/4.5/getting-started/introduction/) 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](https://get.foundation/sites/getting-started.html)** - they have a good basic HTML layout/framework you can download and play around with.
--> **[Bulma](https://bulma.io/)** -free and open-source for CSS framework. Installed through npm.
--> **[GroundworkCSS](https://groundworkcss.github.io/groundwork/?url=docs/home)** - has a good amount of other sources within the website to try! Even [animations](https://groundworkcss.github.io/groundwork/?url=docs/animations)!
--> **[Animate.css](https://animate.style/)** - 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.

**BOOTSTRAP**
Documentation:

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](https://dev-to-uploads.s3.amazonaws.com/i/oz15cgotm23u8mfs5gy6.png)
_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._
**Application:**

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](https://dev-to-uploads.s3.amazonaws.com/i/7cufq8w24dzb23y5dlpi.png)

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

<img src='https://media.giphy.com/media/wJzahuLVUl5GxA1Aah/giphy.gif'>

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](http://www.catipsum.com/) link here.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5rg2hy61tecwb2z2iogm.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/06azd40h941ips7ysyyv.png)

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](https://animate.style/)** comes in handy! 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vxg25d48gibeipwnpo94.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/uftpzbjvyogngk68fa71.png)
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](https://dev-to-uploads.s3.amazonaws.com/i/zpyscehf8be4748zbm98.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/ue2odb2p7i6itph9w6rx.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/u5gai88zyx3dz802rena.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/0hvg6fjpvo7fbzkw119u.png)

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!

Links:

~ [Alternatives for Bootstrap](https://hackr.io/blog/top-bootstrap-alternatives)
~ [Bootstrap cheat sheet](https://hackerthemes.com/bootstrap-cheatsheet/) - all Bootstrap class in one page. 
~ [GroundworkCSS Github repo](https://github.com/groundworkcss/groundwork) - for readme on how to get started.
~ [Freepik](https://www.freepik.com/) - my source for the cute photos!
~ [Cat Ipsum](http://www.catipsum.com/)