CodeNewbie Community

loading...

What You Need to Create a jQuery Playground with Bootstrap

Sarah Bartley
Front-end web developer | Moderator for Elphas Can Code | Creator of Disney Codes Challenge
・5 min read

Originally published February 7, 2018 on The Original BritishPandaChick blog. I made tweaks to the original post so it would work for Code Newbie.

You wrapped up the Cat Photo App project Free Code Camp has students work with during the Bootstrap course. This post was showing the ways Bootstrap can be used to style parts of your website without writing the standard custom CSS. Just one Bootstrap class can add lots of style elements that would take lots of lines of regular CSS.

Today’s post is building a jQuery playground that will be used later in Free Code Camp’s jQuery course. This playground will be using lots of Bootstrap. Throughout this post, you’ll be putting the grid system to work to organize elements on the page. You’ll learn some new Bootstrap classes and see how they work in your code.

20. Create a Bootstrap Headline.

The first thing we need to do is add a headline. Free Code Camp wants an h3 element so add an h3 tag to your site. Inside your opening and closing tags, add the text jQuery Playground.

Now let’s turn to Bootstrap. We are adding two classes to the site. Inside the opening tag, add text-primary and text-center as a class. Remember we can have multiple classes for any element as long as is there a space between each class.

21. House our page within a Bootstrap Container Fluid Div.

This site needs to work on all screen sizes so let’s add the container-fluid. Nest your new h3 tag inside a div tag. Give the div tag a class container-fluid.

22. Create a Bootstrap Row.

This site will have lots of inline elements, meaning we’ll need some rows. Underneath the h3 tag, add another div tag. We won’t be adding anything inside the div tag in this step, but you do need to give it a class so all the elements will line up in a row. Therefore add a class row to your div tag.

23. Split your Bootstrap row.

Free Code Camp wants students to have two columns inside the row div tag we just made. This is where you’ll be using the grid system mentioned in the last two Bootstrap posts. Put two div tags inside the row div tag. These div tags will be for each column.

Inside each of the new div tags, add the class col-xs-6. This will tell the computer the columns will be six columns wide each. We won’t be adding any elements inside these columns right now so you won’t see any changes right now.

24. Create Bootstrap Wells.

It is time for a brand new class! One of the newer Bootstrap classes in today’s post is the well class. This class creates a sense of depth in your columns.

In order to do this, you’ll be adding the well class to another div tag in each of the col-xs-6 div tags you made. Make a brand new div tag inside each col-xs-6 class. Give each of these new div tags a class well.

Don’t worry. This is the last div tag you’ll be adding.

jQuery Playground with wells with three boxes in each well

26. Add Elements within your Bootstrap wells.

Time to add the rest of the elements. This time, you’ll be nesting buttons within the well div tags you just made. Add 3 button tags inside each well.

Now inside the sample project on Free Code Camp’s site, you’ll see some of the items starting to take shape. You should have six button tags on the site when you are finished.

27. Apply the Default Bootstrap Button Style.

Let’s add some more classes to customize the buttons a bit. We are going to use the Bootstrap class btn-default. For each button, add “btn btn-default” to the opening button tag. You’ll automatically see the buttons on the Free Code Camp site get a little bit bigger to look like actual buttons.

28. Create a Class to Target with jQuery Selectors.

Free Code Camp begins this lesson with an important reminder about classes. There won’t be corresponding CSS for every class. Developers use classes just to help them when they use jQuery.

Selecting elements needs to be easy especially in jQuery with developers often referring to classes to help them add functionality to different elements. In this lesson, we are going to add the class attribute target to the button. In each button tag, add the class target after btn-default in the opening tag.

29. Add ID Attributes to Bootstrap Elements.

Bootstrap isn’t all about using as many classes as possible. Developers can also use the ID attribute. IDs are great for making unique changes to a specific element. The only downside about ID attributes is that they can only be used once per page.

Let’s start this lesson by adding an ID to each well div tag. On the left well div tag, add an ID tag name left-well. Add the ID right-well to the right well div tag.

30. Label Bootstrap Wells.

The final Bootstrap lesson for today is labeling the Bootstrap wells. This means adding some text tags. Inside the left well, add an h4 tag inside the div tag with the col-xs-6 class. This should be above the well div tag.

Put #left-well as your headline’s text. On the right well, add another h4 tag above this well div tag only using the text #right-well instead.

Conclusion

That’s a wrap today! We made a lot of progress on the jQuery playground project today. A large amount of this post was just organizing our page by setting up rows and wells using Bootstrap classes.

You started adding the buttons inside the wells and gave a little bit of style thanks to some of the Bootstrap classes discussed in other posts. Finally, we started adding IDs and we began labeling some of our elements.

The jQuery is almost done and the next post will be putting the final touches on this project. Tomorrow, I review the last three lessons in Free Code Camp's Bootstrap course. This post will be a quick review of commenting code as well as labeling the buttons.

Discussion (0)