Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

rnw98613
rnw98613
348 Points
Posted by rnw98613
rnw98613
348 Points

Bootstrap custom markup with javascript functionality

Hello,

How to take advantage of bootstrap javascript functionality with custom html markup, for example I have this html markup for dropdown menus

<div class="dropdown">
  <button class="button button-success" id="dropdownButtonExample" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>

  <ul class="dropdown-list" aria-labelledby="dropdownButtonExample">
    <li class="dropdown-item"><a class="dropdown-link" href="#">Dropdown item 1</a></li>
    <li class="dropdown-item"><a class="dropdown-link" href="#">Dropdown item 1</a></li>
    <li class="dropdown-item"><a class="dropdown-link" href="#">Dropdown item 1</a></li>
  </ul>
</div>

and I want to target the functionality of bootstrap dropdown;

2 Answers

hombah
seal-mask
.a{fill-rule:evenodd;}techdegree
hombah
Python Web Development Techdegree Student 16,241 Points
hombah
.a{fill-rule:evenodd;}techdegree
hombah
Python Web Development Techdegree Student 16,241 Points

assuming that you have wired up bootstrap correctly on your using the link tab at the top of the html file

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

and the necessary scripts at the bottom

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

they have a nice starter template https://getbootstrap.com/docs/4.1/getting-started/introduction/#starter-template

you can then simple copy the code from the bootstrap page and paste it in the page. it should then work automatically https://getbootstrap.com/docs/4.1/components/dropdowns/

rnw98613
rnw98613
348 Points
rnw98613
rnw98613
348 Points

@hombah, Thanks, but please read the question again;

hombah
.a{fill-rule:evenodd;}techdegree
hombah
Python Web Development Techdegree Student 16,241 Points

apologies, I just reread, I misunderstood the Q the first time. the Bootstrap javascript is probably targeting a specific html node id (you can check the source code for which id the relevant function is targeting - but my guess is id="dropdownMenuButton")