Working with Bootstrap: Part 3

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>

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>

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>

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>

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">

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>

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

Blog