DEV Community

Randy Rivera
Randy Rivera

Posted on

Working with Bootstrap Notes: Part 1

#javascript #beginners #programming #css
  • We can also center our heading element to make it look way better, by just adding the class text-center to our h2 element.
  • Remember to separate each of them with a space when adding several classes like this. 
<h2 class="red-text text-center">your text</h2>
Enter fullscreen mode Exit fullscreen mode
  • Code: 
 <div class="container-fluid"> <h2 class="red-text">CatPhotoApp</h2>
Enter fullscreen mode Exit fullscreen mode
  • Answer: 
<h2 class= "text-center red-text">CatPhotoApp</h2>
Enter fullscreen mode Exit fullscreen mode

Create A BootStrap Button

  • Let's create a new button element below our kitten photo(below is a link to the creator of FreeCodeCamp to follow along). We're gonna give it the btn and btn-default classes as well as the text of like

  • Code:

<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera."> /* insert button here */
Enter fullscreen mode Exit fullscreen mode
  • Answer: 
 <button class="btn btn-default">Like</button>
Enter fullscreen mode Exit fullscreen mode

Create a Block Element Bootstrap Button

*Normally, your button elements with the btn and btn-default classes are only as wide as the text that they have.

  • It would only be as wide as the word Submit. By Making them Block Elements with the additional class of btn-block, our button will stretch to fill the page's entire horizontal space and any elements following it flow onto a new line below the block, like so. 
<button class="btn btn-default btn-block">Submit</button>
Enter fullscreen mode Exit fullscreen mode

Taste the Bootstrap Color Rainbow

  • The btn-primary class is the main color we'll be using in our app. It's useful for highlighting actions you want your user to take. By just replacing Bootstrap's btn-default class with btn-primary in our button. 
<button class="btn btn-primary btn-block">Like</button>
Enter fullscreen mode Exit fullscreen mode

Call out Optional Actions with btn-info

  • The btn-info class is used to call attention to optional actions that the user can take. Let's create a new block-level Bootstrap button below the like button with the text info and add Bootstrap's btn-info and btn-block classes to it. 
<button class="btn btn-info btn-block">Info</button>
Enter fullscreen mode Exit fullscreen mode

Warn Your Users of a Dangerous Action with btn-danger

  • The btn-danger class is the button color you'll use to notify users that the button performs a destructive action, such as deleting a cat photo. 
 <button class="btn btn-block btn-danger">Delete</button>
Enter fullscreen mode Exit fullscreen mode

Use the Bootstrap Grid to Put Elements Side by Side

  • Bootstrap uses a responsive 12-column grid system, which makes it easy to put elements into rows and specify each element's relative width.
  • For Example Bootstrap's col-md-* class. md means medium, and * is a number specifying how many columns wide the element should be.
  • We'll use col-xs-*, where xs means extra small(like an extra-small mobile phone) and * is the number of columns specifying how many columns wide the element should be. 
<div class="row"> <div class="col-xs-4"> <button class="btn btn-block btn-primary">Like</button> </div> <div class="col-xs-4"> <button class="btn btn-block btn-info">Info</button> </div> <div class="col-xs-4"> <button class="btn btn-block btn-danger">Delete</button> </div> </div>
Enter fullscreen mode Exit fullscreen mode
  • We put Like, Info, and Delete buttons side-by-side by nesting all three of the, within one <div class="row"> element. Then each of them within a <div class="col-xs-4"> element.

Ditch Custom CSS for Bootstrap

  • Here FreeCodeCamp just wants us to clean up our code and make our app look more conventional by using Bootstrap's built-in styles.
  • In the current code 
<style> .red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } </style> <div class="container-fluid"> <h2 class="red-text text-center">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
Enter fullscreen mode Exit fullscreen mode
  • They want us to Delete the .red-text-. p, and smaller-image CSS declarations from your style element so that the only declarations left in your style element are h2 and thick-green-border. Then delete the p element that contains a dead link. Then remove the red-text class from your h2 element and replace it with the text-primary Bootstrap class.
  • Finally!!! They want us to remove the smaller-image class from the first img element and replace it with the img-responsive
  • Answer: 
<style> h2 { font-family: Lobster, Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } </style> <div class="container-fluid"> <h2 class="text-primary text-center">CatPhotoApp</h2> <a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
Enter fullscreen mode Exit fullscreen mode

Use a span to target Inline Elements

  • We can also use spans to create inline elements. Remember when we used the btn-block class to make the button fill the entire row?
  • Well with that being said by Using the inline span element. We can put several elements on the same line, and even style different parts of the same line differently.
  • Let's do so by nesting the word love inside the p element that currently has the text things cats love. Give the span the class text-danger to make the text red.
  • Code 
<p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul>
Enter fullscreen mode Exit fullscreen mode
  • Answer: 
<p>Things cats <span class="text-danger">love:</span></p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul>
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 (0)