freeCodeCamp Challenge Guide: Label Bootstrap Buttons

Label Bootstrap Buttons


Solutions

Solution 1 (Click to Show/Hide)
<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>
2 Likes

#target1

my is not working? will you please post some answer out? thanks! i have been tried many ways, but still not work.

Ignore the periods they are there so you can see the code…For some reason I had to label them <.h4>#target1</h4.> and so on. The hint above mentions labeling wells is also similar.

<.div class=“well” id=“left-well”.>
<.button class=“btn btn-default target” id=“target1”>#target1</button.>
<.button class=“btn btn-default target” id=“target2”>#target2</button.>
<.button class=“btn btn-default target” id=“target3”>#target3</button.>

5 Likes

jQuery Playground

<div class="col-xs-6">
  <h4>#left-well</h4>
  <div class="well" id="left-well">
    <button class="btn btn-default target" id="target1">#target1</button>
    <button class="btn btn-default target" id="target2">#target2</button>
    <button class="btn btn-default target" id="target3">#target3</button>
  </div>
</div>

<div class="col-xs-6">
  <h4>#right-well</h4>
  <div class="well" id="right-well">
    <button class="btn btn-default target" id="target4">#target4</button>
    <button class="btn btn-default target" id="target5">#target5</button>
    <button class="btn btn-default target" id="target6">#target6</button>
  </div>
</div>
2 Likes

How is this step any different than the last one, if anything it’s actually simpler as we aren’t adding the ID to the button, just the text on top, like I was told to on the previous one…