freeCodeCamp

2.9 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
bad87fee1348bd8acde08812	Center Text with Bootstrap	0		Centro de texto con Bootstrap

Description

Ahora que estamos usando Bootstrap, podemos centrar nuestro elemento de encabezado para que se vea mejor. Todo lo que necesitamos hacer es agregar la clase text-center a nuestro elemento h2 . Recuerde que puede agregar varias clases al mismo elemento separando cada una de ellas con un espacio, como este: <h2 class="red-text text-center">your text</h2>

Instructions

Tests

tests:
  - text: Tu elemento <code>h2</code> debe centrarse aplicando el <code>text-center</code> la clase
    testString: 'assert($("h2").hasClass("text-center"), "Your <code>h2</code> element should be centered by applying the class <code>text-center</code>");'
  - text: Tu elemento <code>h2</code> todavía debería tener la clase <code>red-text</code>
    testString: 'assert($("h2").hasClass("red-text"), "Your <code>h2</code> element should still have the class <code>red-text</code>");'

Challenge Seed

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<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">CatPhotoApp</h2>

  <p>Click here for <a href="#">cat photos</a>.</p>

  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
  <p>Things cats love:</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>

Solution

// solution required

2.9 KiB Raw Blame History