Why Bootstrap class needs a separate div?

HTML-CSS
1

Tell us what’s happening:

Your code so far

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<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">
   <div class="row"> 
     <div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
     </div>
     <div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
     </div> 
</div>
  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera. ">
  <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>
  <p>Things cats <span class="text-danger">love:</span></p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0.

Link to the challenge:
https://www.freecodecamp.org/challenges/create-a-custom-heading

Why cant we include “col-xs-8” inside h2 element rather than creating a separate div.Please help.
div class=“col-xs-8” (separate div created)
why not include “col-xs-8” inside h2 ,e.g:-
h2 class=“text-primary text-center col-xs-8”>CatPhotoApp

2

Bootstrap is basically a framework that is working on CSS, HTML and Javascript. So, behind the scenes what it does is checks for different classes on every element that you have created which is simple HTML and applies css using Javascript. It works on ‘divisions’ to create separate spaces for elements that are meant to be kept inside division. By the norms of Bootstrap, it provides us a way to write cleaner and maintainable code. As you asked why can’t we put ‘col-xs-8’ for the element h2 is because Bootstrap while designing CSS for elements did not put grid system or classes ‘col-xs-(sizes)’ for ‘h1, h2, …’ elements. It instead provides certain classes for certain elements. Division are provided with different classes so as textual elements. Divisions in bootstrap are a way of designing the page.

5

@camperextraordinaire Thank you Randell,that was enlightening.I was unable to find an answer.

6

@Sammi-93 Thank you Sammi. That was helpful.I think one needs to know the theory/behind the scene working to get a complete idea.I am just a beginner!

7

Made my concept more clear. Thanks @camperextraordinaire.

8

@nowiz Sure anytime… Happy Learning… :slight_smile: