Why its showing like for few id.
What i am making wrong on this
<div class="btn-group btn-group-sm" role="group">
<button id="startHour" type="button" class="btn btn-secondary" data-toggle="dropdown" href="#">hour</button>
<div class="dropdown-menu" aria-labelledby="startHour">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">4</a>
<a class="dropdown-item" href="#">5</a>
<a class="dropdown-item" href="#">6</a>
<a class="dropdown-item" href="#">7</a>
<a class="dropdown-item" href="#">8</a>
<a class="dropdown-item" href="#">9</a>
<a class="dropdown-item" href="#">10</a>
<a class="dropdown-item" href="#">11</a>
<a class="dropdown-item" href="#">12</a>
</div>
<span style="color:white; background-color:#5A6268">:</span>
<div class="btn-group btn-group-sm" role="group">
<button id="startMinute" type="button" class="btn btn-secondary"
data-toggle="dropdown" href="#">min</button>
<div class="dropdown-menu" aria-labelledby="startMinute">
<a class="dropdown-item" href="#">00</a>
<a class="dropdown-item" href="#">05</a>
<a class="dropdown-item" href="#">10</a>
<a class="dropdown-item" href="#">15</a>
<a class="dropdown-item" href="#">20</a>
<a class="dropdown-item" href="#">25</a>
<a class="dropdown-item" href="#">30</a>
<a class="dropdown-item" href="#">35</a>
<a class="dropdown-item" href="#">40</a>
<a class="dropdown-item" href="#">45</a>
<a class="dropdown-item" href="#">50</a>
<a class="dropdown-item" href="#">55</a>
</div>
</div>
<button type="button" class="btn btn-secondary">am</button>
<button type="button" class="btn btn-secondary">zone</button>
<button type="button" class="btn btn-primary">Set</button>
</div>
</td>
<td>
<div class="btn-group btn-group-sm" role="group">
<button type="button" class="btn btn-secondary">hour</button>
<button type="button" class="btn btn-secondary">min</button>
<button type="button" class="btn btn-secondary">am</button>
<button type="button" class="btn btn-secondary">zone</button>
<button type="button" class="btn btn-primary">Set</button>
</div>
</td>
</tr>
Here i am using same for drop down list. startHour and startMinute are the unique id which, I am using for drop down the hour and minute and also, it used for more than 20 times. For few drop down it shows id must be unique. what does it mean..
In html every tag need to be unique. If you need same id for 2 element, time to for thinking class.
For more info click here
in javascript the dom's id just like a public variable；
example this domObject is in window.a;
so the id must be unique;
Related
I have used two dropdown from mdbootstrap https://mdbootstrap.com/docs/jquery/components/dropdowns/
But both the dropdown has same dropdown items why so? In console -> source I am able to see different options but while displaying it is not shown why so? In below screenshots you can see dropdown items for both are same why is this happening? I am not able to debug this because in console -> source also it show shopping, travel etc but it is not displaying in dropdown why so?
code:
import React from "react";
import "./transaction.css";
const Transaction = () => {
return (
<div className="transactionContainer">
<h5 class="card-header info-color white-text text-center py-4">
<strong>Transaction Information</strong>
</h5>
<div class="card">
<div class="card-body px-lg-5 pt-0">
<form class="text-center" style={{ color: "#757575" }} action="#!">
<div class="md-form">
<input type="text" id="amount" class="form-control" />
<label for="amount">Amount</label>
</div>
<button
class="btn btn-primary dropdown-toggle mr-4"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Payment Method
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
Cash
</a>
<a class="dropdown-item" href="#">
Debit/Credit Card
</a>
<a class="dropdown-item" href="#">
Net Banking
</a>
</div>
<button
class="btn btn-primary dropdown-toggle mr-4"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Category
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
Shopping
</a>
<a class="dropdown-item" href="#">
Travel
</a>
<a class="dropdown-item" href="#">
Entertainment
</a>
</div>
<button
class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0"
type="submit"
>
Add transaction
</button>
</form>
</div>
</div>
</div>
);
};
export default Transaction;
Screenshots:
Each dropdown needs to be wrapped inside a div with class of dropdown like this:
<div className="dropdown">
<button
class="btn btn-primary dropdown-toggle mr-4"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Payment Method
</button>
<div id="menu1" class="dropdown-menu">
<a class="dropdown-item" href="#">
Cash
</a>
<a class="dropdown-item" href="#">
Debit/Credit Card
</a>
<a class="dropdown-item" href="#">
Net Banking
</a>
</div>
</div>
Bootstrap class dropdown-menu can autodetect the viewport of the screen and adapt accordingly
So if there is no room for the dropdown to open to the bottom it opens up, as shown by the example bellow
However it doesn't happen for the horizontal limits of the viewport, and I end up getting this horizontal scroll, here's an example of this happening:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bd-example">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
</div>
I also created a gif demonstrating exacly what I mean:
How can I reproduce the same behavior as vertical viewport detection to reposition the element? Ideally it should look like this, aligning itself with the other end of the button.
Everywhere you have the class dropdown-menu add dropdown-menu-right Note that you need both classes, and dropdown-menu-right should be second. i.e. class="dropwdown-menu dropdown-menu-right"
This should leave you with this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bd-example">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
</div>
I was able to do it with jQuery using a method found on this page.
Now it may not be elegant, but it does work!
$(".dropdown-toggle").click(function(){
setTimeout(
function()
{
$(document).scrollLeft(1);
if($(document).scrollLeft() != 0){
$(".dropdown-menu").css("marginRight", "100px");
}
$(document).scrollLeft(0);
}, 10);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="bd-example">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!-- /btn-group -->
</div>
I want to replace a text test with a select bootstrap when I click to the text and I want do this with jquery.
Here my html :
<text class="TextDb" style="text-decoration:underline;color:blue;cursor:pointer">Test</text>
Here the select bootstrap that i want add it in the code jquery :
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
Here's a solution with Bootstrap 4.3 and jQuery 3.3.1
I'm making some assumptions here but it does literally what you asked.
https://codepen.io/anon/pen/aXGjww
<text class="TextDb" style="text-decoration:underline;color:blue;cursor:pointer">Test</text>
<div class="dropdown d-none">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
// Shorthand for $( document ).ready()
$(function() {
$('.TextDb').on('click', function() {
$(this).hide();
$('.dropdown').removeClass('d-none');
});
});
Try the following code
$("#yourdropdownid").on("change",function(e){
$("#yourtextid").val( $("#yourdropdownid option:selected").text());
})
How can I append the value of the dropdowm menu item in the text "Sorted by"?
I want to show in the button text something like this:
Sorted by: Highest positive votes or Sorted by: Alphabetic according to the dropdown item selected.
<div class="btn-group float-right">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Sorted By</span>
</button>
<div class="dropdown-menu item-sorted" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#" id="datesort" name='thumbsUp'>Highest positive votes</a>
<a class="dropdown-item" href="#" id="datesort" name='thumbsDown'>Highest negative votes</a>
<a class="dropdown-item" href="#" id="datesort" name='comments'>Highest comments</a>
<a class="dropdown-item" href="#" id="datesort" name='alphabetic'>Alphabetic</a>
</div>
</div>
If the selected dropdown option is marked by a selected="true" attribute, for example, you can get it like so:
$("#dropdownMenuButton span").html("Sorted By " + $('dropdown-menu[aria-labelledby="dropdownMenuLink"] a.dropdown-item[selected="true"]').text());
Please keep in mind that this will not be triggered on an event click. To do it on an event click:
$("div.dropdown-menu a.dropdown-item").click(function(e){
$("#dropdownMenuButton span").html("Sorted By " + $(this).text()); // gets the selection text and puts it in the button
$(this).parent().find("a.dropdown-item[selected=true]").attr("selected", null); // unselects previous selections
$(this).attr("selected", "true"); // selects the current one
});
This attaches a listener to all anchor elements with a class dropdown-item that are children to any div with a dropdown-menu class.
something like this with jquery:
$('.dropdown-menu a').onClick(function () {
var text = $(this).text();
$('#dropdownMenuButton span').text( "Sorted By: " + text);
});
You can try following
Add an element that will show the sorted by text
Add click event listeners
document.querySelectorAll(".dropdown-item").forEach((el) => {
el.onclick = (ev) => document.getElementById("sorted-by").textContent = ev.currentTarget.textContent;
});
<div class="btn-group float-right">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Sorted By <span id="sorted-by"></span></span>
</button>
<div class="dropdown-menu item-sorted" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#" id="datesort" name='thumbsUp'>Highest positive votes</a>
<a class="dropdown-item" href="#" id="datesort" name='thumbsDown'>Highest negative votes</a>
<a class="dropdown-item" href="#" id="datesort" name='comments'>Highest comments</a>
<a class="dropdown-item" href="#" id="datesort" name='alphabetic'>Alphabetic</a>
</div>
</div>
You can do something like this. All you need to do is add a span with the class .option to your html and this small part of jquery which checks for when you click on your dropdown and adds said elements text to your button:
$('.dropdown-item').click(function() { // When dropdown is clicked:
$(".option").text($(this).text());
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="btn-group float-right">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Sorted By <span class="option"></span></span>
</button>
<div class="dropdown-menu item-sorted" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#" id="datesort" name='thumbsUp'>Highest positive votes</a><br/>
<a class="dropdown-item" href="#" id="datesort" name='thumbsDown'>Highest negative votes</a><br />
<a class="dropdown-item" href="#" id="datesort" name='comments'>Highest comments</a><br />
<a class="dropdown-item" href="#" id="datesort" name='alphabetic'>Alphabetic</a>
</div>
</div>
I am trying to a birthday input for my form which will contain three dropdown menus. The first one will have day, then month, and then year.
<div class="dropdown" style="position:inline-block">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
That is the code for one dropdown menu from the bootstrap website.
Have a look on below code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-lg-4 col-sm-4 col-xs-4">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-xs-4">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-xs-4">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
</div>
may it helps you.
You can use btn-group class to make your button menu side by side.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>