Implementation of a dropdown list in HTML/CSS

Question

I'm trying to implement a dropdown list in HTML/CSS and more specifically in React. I've found a tutorial here showing something that could interest me : Link

The only problem is that when I include this code and modify it a little in my React project nothing appends... It seems to be a problem of bootstrap but I can't identify it.
Here is what happens :

Here is my code :

import React, { Component } from "react";
import "./VerticalDots.css";


export default class VerticalDots extends Component {

  render() {
    return (
      <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <img src={require("../imgs/3dots-vertical.png")} alt="NotFound"/>
        </button>

        <ul class="dropdown-menu">
          <li>0123 4567 8912 3456</li>
          <li>0123 4567 8912 3456</li>
          <li>0123 4567 8912 3456</li>
        </ul>
      </div>
    );
  }
}

A little help would be much appreciated !

the ul should also have aria-labelledby="dropdownMenuButton" with the name dropdownMenuButton the same as the id of your button check it here — Pietro Nadalini
– Pietro Nadalini, Commented Jul 30, 2019 at 18:02
Did you require bootstrap.js and bootstrap.css in your project? Do you see any error in the console? — Matthieu Libeer
– Matthieu Libeer, Commented Jul 30, 2019 at 18:04

Matthieu Libeer · Accepted Answer · 2019-07-30 18:30:58Z

3

It seems you are not loading Bootstrap's assets. In the codepen you linked, you can see that, under "Settings > CSS" and "Settings > JavaScript", Bootstrap is required.

To load them, you must import them from your bundle, for instance if you use webpack, in App.js

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

Another option is to use a CDN, like Codepen does, but you probably want the above for a production build.

answered Jul 30, 2019 at 18:30

Matthieu Libeer

2,3551 gold badge14 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cocool97 · Accepted Answer · 2019-07-30 18:30:02Z

1

Solved by adding :

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

answered Jul 30, 2019 at 18:30

cocool97

1,2511 gold badge12 silver badges23 bronze badges

1 Comment

Stephen P Over a year ago

Rather than post how you solved it as an "answer", you should accept Matthieu Libeer's answer.

Collectives™ on Stack Overflow

Implementation of a dropdown list in HTML/CSS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related