Why Bootstrap class needs a separate div?

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

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.

@nowiz Technically what you suggest will work. It is considered bad practice, because h1, h2, h3 elements are meant to display content and not structure which is how divs are meant to be used. It is best not to mix content with structure/styling in your html document. From an accessibility standpoint, h1 is interpreted by screen readers to contain important content and has nothing to do with the structure. Separating content elements from structure elements makes your code more readable and semantic.

The main reason you can not use this syntax for this challenge is that the tests are validating you are using the row/col div structure.

Bootstrap is mainly just CSS classes and CSS classes can be applied to any element you want to assign them to. There is nothing special about Bootstrap that prevents certain classes from achieving the same effect as long as you understand how the underlying css properties are being applied to the element. Using certain classes with certain elements may not always have the same effect as using them as the documentation recommends them to be used.

1 Like

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

@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!

Made my concept more clear. Thanks @RandellDawson.

@nowiz Sure anytime… Happy Learning… :slight_smile: