DEV Community

Randy Rivera
Randy Rivera

Posted on

Working with Bootstrap: Part 3

#beginners #css #webdev #javascript

Create a BootStrap Headline

  • Now let's build something from scratch to practice our HTML, CSS and Bootstrap skills. FreeCodeCamp Provides us with the following instructions.

  • To start with, create an h3 element, with the text jQuery Playground.

  • Then Color your h3 element with the text-primary Bootstrap class, and center it with the text-center Bootstrap class.

<h3 class="text-primary text-center">JQuery Playground</h3>
Enter fullscreen mode Exit fullscreen mode

House our page within a Bootstrap container-fluid div

  • Continuing from the last lesson, now they want us to just make sure all the content on your page is mobile-responsive.

  • By nesting the h3 element within a div element with the class container-fluid.

<div class="container=fluid <h3 class="text-primary text-center">JQuery Playground</h3> </div>
Enter fullscreen mode Exit fullscreen mode

Creating a Bootstrap Row, Splitting the row, bootstrap wells, adding elements within Bootstrap Wells, applying the default bootstrap button style..

  • FreeCodeCamp just wanted us to add in extra things to our code as you see below nothing new except for the wells which can create a visual sense of depth for your columns. 
<div class="container-fluid"> <h3 class="text-primary text-center">jQuery Playground</h3> <div class="row"> <div class="col-xs-6"> <div class="well"> <button class="btn btn-default"></button> <button class="btn btn-default"></button> <button class="btn btn-default"></button> </div> </div> <div class="col-xs-6"> <div class="well"> <button class="btn btn-default"></button> <button class="btn btn-default"></button> <button class="btn btn-default"></button> </div> </div> </div> </div>
Enter fullscreen mode Exit fullscreen mode

Create a Class to Target with jQuery Selectors

  • Sometimes we create classes for the purpose of selecting these elements more easily using jQuery. By giving each of our button elements the class target 
 <button class="btn btn-default target"></button> <button class="btn btn-default target"></button> <button class="btn btn-default target"></button> </div> </div> <div class="col-xs-6"> <div class="well"> <button class="btn btn-default target"></button> <button class="btn btn-default target"></button> <button class="btn btn-default target"></button>
Enter fullscreen mode Exit fullscreen mode

Add id Attributes to Bootstrap Elements

  • We can give each of our elements an id attribute.
  • Each id should be unique to a specific element and used only once per page.
  • Let's give the well on the left the id of left-well and the one of the right the id of right-well. 
<div class="well" id="left-well"> <button class="btn btn-default target"></button> <button class="btn btn-default target"></button> <button class="btn btn-default target"></button> </div> </div> <div class="col-xs-6"> <div class="well" id="right-well">
Enter fullscreen mode Exit fullscreen mode

Give Each Element a Unique id

*Let's give each of our buttons a unique id starting with a target1 and ending with target6.

<button class="btn btn-default target" id="target1"></button> <button class="btn btn-default target" id="target2"></button> <button class="btn btn-default target" id="target3"></button> </div> </div> <div class="col-xs-6"> <h4>#right-well</h4> <div class="well" id="right-well"> <button class="btn btn-default target" id="target4"></button> <button class="btn btn-default target" id="target5"></button> <button class="btn btn-default target" id="target6"></button>
Enter fullscreen mode Exit fullscreen mode

Larson, Q., 2019. Frontend Development Libraries. [online] Freecodecamp.org. Available at: https://www.freecodecamp.org/learn/front-end-development-libraries/bootstrap

Top comments (1)

Collapse
 
suhakim profile image
sadiul hakim •

Nice series👍