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

Comments

[sadiul hakim]

Nice series👍