Working with Bootstrap: Part 3
Tags: beginners, css, webdev, javascript
Published: 2021-12-26 15:13:15

###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.
```html
<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`.

```html
<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.

```html
<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`

```html
 <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`.

```html
<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`.

```html
<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