Help, I don't know if this is a bug

Help, I don't know if this is a bug
0.0 0

#1

Hi. I’ve been going through the bootstrap lessons of FreeCodeCamp, and I’m doing really well, but I’ve run into an issue trying to nest the form elements and the button elements into rows:

The buttons don’t align properly, and neither do the checkboxes, as if some element were using the empty space between them. But it is not a problem of my code, as it was accepted by the freeCodeCamp editor and after going through various lessons the problem persists. Is this a bug?


#2

If you post your HTML, we can give you insight into the why the layout appears this way.

The FreeCodeCamp editor is flexible because there are many ways to accomplish the same task. If you want a specific appearance or layout, however, there are additional considerations not required by the editor.


#3

Thanks for your answer. This is my code, I’m pretty sure it is the default one, though:

<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"><i class="fa fa-thumbs-up"></i> Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> 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">
    <div class="row">
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
      </div>
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-4">
        <label><input type="checkbox" name="personality"> Loving</label>
      </div>
      <div class="col-xs-4">
        <label><input type="checkbox" name="personality"> Lazy</label>
      </div>
      <div class="col-xs-4">
        <label><input type="checkbox" name="personality"> Crazy</label>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-7">
        <input type="text" class="form-control" placeholder="cat photo URL" required>
      </div>
      <div class="col-xs-5">
        <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
      </div>
    </div>
  </form>
</div>

#4

It’s not a bug, just a learning curve.
I can’t really recreate that “in a smartphone” look on codepen, so difficult to say what th eproblem is. But no, not a bug. Keep playing with it. Padding maybe?


#5

Ok, I thought that as it was the code used by default by freecodecamp, maybe it was som kind of error. I’ll keep playing with it until I achieve my desired result. Thank you all for your help! :slight_smile:


#6

As far as I know this is an issue with the display for the course, cause I’ve run into the same problems and I’ve seen others report it too. I don’t know what is specifically causing it, like whether it’s just how the site displays the code or how it displays the code + bootstrap causing issues, or something else. But you’re not alone.