You wrapped up the Cat Photo App project freeCodeCamp has students work with during the Bootstrap course. This post shows 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 about building a jQuery playground that will be used later in freeCodeCamp’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. freeCodeCamp 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.
freeCodeCamp 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.
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.
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 freeCodeCamp’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 freeCodeCamp site get a little bit bigger to look like actual buttons.
28. Create a Class to Target with jQuery Selectors.
freeCodeCamp 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 freeCodeCamp's Bootstrap course. This post will be a quick review of how to comment code as well as how to label the buttons.
This post was originally published on February 7, 2018 on the blog The Original BritishPandaChick. I made minor changes to the original post to work here on CodeNewbie.
Top comments (0)