# freeCodeCamp Challenge Guide: Add id Attributes to Bootstrap Elements

**URL:** <https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-add-id-attributes-to-bootstrap-elements/16639>\
**Category:** freeCodeCamp Contributors\
**Tags:** guide\
**Created:** [July 2, 2016, 6:38pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-add-id-attributes-to-bootstrap-elements/16639 "2016-07-02T18:38:27Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![camperbot](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/camperbot/32/18364_2.png) [@camperbot](https://forum.freecodecamp.org/u/camperbot)\
**Post date:** [July 2, 2016, 6:38pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-add-id-attributes-to-bootstrap-elements/16639/1 "2016-07-02T18:38:27Z")

</div>

# [Add id Attributes to Bootstrap Elements](https://www.freecodecamp.org/learn/front-end-libraries/bootstrap/add-id-attributes-to-bootstrap-elements)

* * *

## Problem Explanation

The last challenge had you adding a class to your button elements, this time you have to add id(s) to the div(s) which have the well class.

* * *

## Hints

### Hint 1

An id is declared as follows:

```html
<element id="id(s)List"></element>

```

### Hint 2

Edit the div tags which have the well class

### Hint 3

Use different id(s) for both wells.

### Hint 4

Give the well on the left the id of `left-well` and the well on the right the id of `right-well`.

* * *

## Solutions

> **Solution 1 (Click to Show/Hide)**
>
> ```html
> <div class="container-fluid">
> <h3 class="text-primary text-center">jQuery Playground</h3>
> <div class="row">
> <div class="col-xs-6">
> <div class="well" id="left-well">
> <button class="btn btn-default target"></button>
> <button class="btn btn-default target"></button>
> <button class="btn btn-default target"></button>
> </div>
> </div>
> <div class="col-xs-6">
> <div class="well" id="right-well">
> <button class="btn btn-default target"></button>
> <button class="btn btn-default target"></button>
> <button class="btn btn-default target"></button>
> </div>
> </div>
> </div>
> </div>
> 
> ```

---

<div class="post-metadata">

**Author:** ![anon52159105](https://avatars.discourse-cdn.com/v4/letter/a/45deac/32.png) [@anon52159105](https://forum.freecodecamp.org/u/anon52159105)\
**Post date:** [August 6, 2017, 11:22pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-add-id-attributes-to-bootstrap-elements/16639/2 "2017-08-06T23:22:56Z")

</div>

Closed on August 6, 2017, 11:22pm UTC



---

<div class="post-metadata">

**Author:** ![camperbot](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/camperbot/32/18364_2.png) [@camperbot](https://forum.freecodecamp.org/u/camperbot)\
**Post date:** [August 10, 2019, 1:17am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-add-id-attributes-to-bootstrap-elements/16639/3 "2019-08-10T01:17:32Z")

</div>

Opened on August 10, 2019, 1:17am UTC



---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 8, 2025, 4:03pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-add-id-attributes-to-bootstrap-elements/16639/4 "2025-01-08T16:03:02Z")

</div>

Closed on January 8, 2025, 4:03pm UTC