Catphotoapp Bootstrap code doesn't give the same result when I copied and pasted it to my text editor

Catphotoapp Bootstrap code doesn't give the same result when I copied and pasted it to my text editor
0.0 0

#1

Hello FCC

I’m new to this platform and I am very much enjoying my learning experience so far! Thank you!!
So I’m on the bootstrap at the moment. And I just copied and pasted all the codes from the FCC web text editor to the sublime text, just because I wanted to find out how the code would look on my laptop and my phone.

I’ve used browser sync (browsersync.io) to live preview the code on my laptop AND from my phone as well. But it didn’t look anything like it did on FCC. I guess the primary reason for it is because my phone’s screen is bigger than xs setting.(So I don’t mind the bigger picture of the cat image next to the h2 header.)

But I was left wondering why the 3 buttons(like, info, delete), radioboxes and checkboxes were all hand to hand with each other without proper spacing between them? Especially the buttons are block level, so I thought they would fill up the whole horizontal but they aren’t? (The same question with the submit button and text field too…)

So long story short, grid works well with the images but not at all with contents below.

Also I noticed that my like, info, delete buttons weren’t block levels and neither they had fa icons on it… Could anyone help me understand what I am missing here please?

The same code worked fine on FCC.

I’m pasting my code below.

      <div class="row">
        <div class="col-mid-4">
          <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
        </div>
        <div class="col-mid-4">
          <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
        </div>
        <div class="col-mid-4">
          <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
        </div>

      <form action="/submit-cat-photo">
        <div class="row">
          <div class="col-mid-6">
            <label><input type="radio" name="indoor-outdoor"> Indoor</label>
          </div>
          <div class="col-mid-6">
            <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
          </div>
        </div>

        <div class="row">
          <div class="col-mid-4">
            <label><input type="checkbox" name="personality"> Loving</label>
          </div>
          <div class="col-mid-4">
            <label><input type="checkbox" name="personality"> Lazy</label>
          </div>
          <div class="col-mid-4">
            <label><input type="checkbox" name="personality"> Crazy</label>
          </div>
        </div>

        <div class="row">
          <div class="col-mid-7">
            <input type="text" class="form-control" placeholder="cat photo URL" required>
          </div>
          <div class="col-mid-5">
            <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
          </div>
        </div>
      </form>
    </div>

This is how it looks like from my mobile and it looks exactly the same way from my laptop.


#2

Is this the only code on your page?

I do not see the code where you have loaded the relevant external libraries that were used for the FCC challenge. Can you post that section (I assume you have it in the head portion of the document)?


#3

Hello Randell

Thanks for your response!
I’m pasting the whole code below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


    <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>
    
  </body>
</html>

#4

The FCC challenge uses the Bootstrap 3 library. You are using Bootstrap 4. Take out the following lines and see if it works better for you.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

#5

Thank you very much!

I’ve taken it out and replaced it with bootstrap 3 source code. And it’s fine now! :smile: :smile: