DEV Community

Randy Rivera
Randy Rivera

Posted on

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>
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๐Ÿ‘