Tutorialspoint

Add dropdown menu to buttons using Bootstrap

With Bootstrap, which class should I use to add a dropdown menu to buttons? The following is what I want to achieve:
Maheshwari Thakur
Answered on 20th Jun, 2018

To add a dropdown to a button, simply wrap the button and dropdown menu in a .btn-group.You can try to run the following code to add dropdown menu to buttons:ExampleLive Demo<!DOCTYPE html> <html>    <head>       <title>Bootstrap Example</title>       <link href = "/bootstrap/css/bootstrap.min.css" rel="stylesheet">     ... Read More

Make a set of buttons appear vertically with Bootstrap

I want to make a set of buttons to appear vertically. Which class should I use? The following is what I want i.e. vertical buttons
karthikeya Boyini
Answered on 20th Jun, 2018

The btn-group-vertical class makes a set of buttons appear vertically stacked rather than horizontally.You can try to run the following code to make a set of buttons appear vertically with a vertical button groupExampleLive Demo<!DOCTYPE html> <html>    <head>       <title>Bootstrap Example</title>       <link href = ... Read More

Create a Button Group with Bootstrap

How to create a button group in Bootstrap? Which class should I use to achieve this?
Chandu yadav
Answered on 20th Jun, 2018

Use the class .btn-group to create a button group. You can try to run the following code to implement the btn-group class:ExampleLive Demo<!DOCTYPE html> <html>    <head>       <title>Bootstrap Example</title>       <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">       <script src = "/scripts/jquery.min.js"></script>   ... Read More

Vertical Buttongroup with Bootstrap

How can I work with vertical buttongroup in Bootstrap? I want to achieve the following:
Samual Sam
Answered on 20th Jun, 2018

The btn-group-vertical class makes a set of buttons appear vertically stacked rather than horizontally.You can try to run the following code to work with a vertical button groupExampleLive Demo<!DOCTYPE html> <html>    <head>       <title>Bootstrap Example</title>       <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">     ... Read More

img-thumbnail Bootstrap class

What is the role of img-thumbnail class in Bootstrap? How can I work with it correctly?
Krantik Chavan
Answered on 20th Jun, 2018

Use the .img-thumbnail Bootstrap class to add thumbnail to images.You can try to run the following code to implement the img-thumbnail class:Example Live Demo<!DOCTYPE html> <html>    <head>       <title>Bootstrap Images</title>       <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">       <script src = "/scripts/jquery.min.js"></script>   ... Read More

Img-circle Bootstrap class

What is the usage of img-circle class in Bootstrap? How can I work with it correctly?
Lakshmi Srinivas
Answered on 20th Jun, 2018

Use the img-circle Bootstrap class to style your image and make it completely round.You can try to run the following code to implement the img-circle classExampleLive Demo<!DOCTYPE html> <html>    <head>       <title>Bootstrap Images</title>       <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">       <script ... Read More

Usage of Bootstrap .btn-group-* class

What is the role of btn-group-* class in Bootstrap? How can I work with it correctly to form the following size of buttons:
Maheshwari Thakur
Answered on 20th Jun, 2018

To learn the usage of .btn-group-* class, you can try to run the following code:ExampleLive Demo<!DOCTYPE html> <html>    <head>       <title>Bootstrap Example</title>       <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">       <script src = "/scripts/jquery.min.js"></script>       <script src = "/bootstrap/js/bootstrap.min.js"></script>   ... Read More

Bootstrap btn-group class

What is the role of btn-group class in Bootstrap? How can I work with it correctly?
Rishi Rathor
Answered on 20th Jun, 2018

Use the class .btn-group to create a button group.You can try to run the following code to implement the btn-group class:ExampleLive Demo<!DOCTYPE html> <html>    <head>       <title>Bootstrap Example</title>       <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">       <script src = "/scripts/jquery.min.js"></script>     ... Read More

Bootstrap Button Group Classes

What is the usage of Button Group class in Bootstrap? How can I work with it correctly to form a group of buttons?
karthikeya Boyini
Answered on 20th Jun, 2018

Use the class .btn-group to work with Bootstrap Button Group Class. You can try to run the following code to form button groupExampleLive Demo<!DOCTYPE html> <html>    <head>       <title>Bootstrap Example</title>       <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">       <script src = "/scripts/jquery.min.js"></script> ... Read More

Add header to label sections in dropdown menu with Bootstrap

With Bootstrap, which class should I use to add header to labels in dropdown menu. I want the result to be like the following menu:
Ankith Reddy
Answered on 20th Jun, 2018

To add a header to label sections in the drop-down menu, use the dropdown-header class in Bootstrap:ExampleLive Demo<!DOCTYPE html> <html>    <head>       <title>Bootstrap Example</title>       <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">       <script src = "/scripts/jquery.min.js"></script>       <script src = ... Read More

Caret Bootstrap class

What is the usage of caret class in Bootstrap? How can I work with it correctly?
Samual Sam
Answered on 20th Jun, 2018

Use carets to indicate dropdown functionality and direction. To get this functionality use the class caret with a <span> element.You can try to run the following code to implement caret Bootstrap classExampleLive Demo<!DOCTYPE html> <html>    <head>       <title>Bootstrap Example</title>       <link href = "/bootstrap/css/bootstrap.min.css" rel ... Read More

Set disabled state for Bootstrap Buttons

How can I set the disabled state for buttons in Bootstrap? Which class is to be used in Bootstrap to achieve this?
George John
Answered on 20th Jun, 2018

To set disabled state, use the disabled class.You can try to run the following code for the disabled state of a button:ExampleLive Demo<!DOCTYPE html> <html>    <head>       <title>Bootstrap Example</title>       <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">       <script src = "/scripts/jquery.min.js"></script>   ... Read More

Bootstrap class dropdown-header

What is the usage of dropdown-header in Bootstrap? How can I work with it correctly? The following is my dropdown:
karthikeya Boyini
Answered on 19th Jun, 2018

Add a header to label sections of actions in any drop-down menu by using the class dropdown-header.You can try to run the following code to implement the dropdown-header Bootstrap classExampleLive Demo<!DOCTYPE html> <html>    <head>       <title>Bootstrap Example</title>       <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> ... Read More

Align Dropdown to the right with Bootstrap

I want to align dropdown to the right like the following in Bootstrap
karthikeya Boyini
Answered on 19th Jun, 2018

To align dropdown to the right, add the class .pull-right to .dropdown-menu. You can try to run the following code to align dropdown to the rightExampleLive Demo<!DOCTYPE html> <html>    <head>       <title>Bootstrap Example</title>       <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">       <script ... Read More

Bootstrap class pull-right

I want to learn the usage of pull-right class in Bootstrap. What is its role and how can I work with it correctly?
Samual Sam
Answered on 19th Jun, 2018

Float an element to the right with class pull-right.You can try to run the following code to implement the pull-right classExampleLive Demo<!DOCTYPE html> <html>    <head>       <title>Bootstrap Example</title>       <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">       <script src = "/scripts/jquery.min.js"></script>     ... Read More

Advertisements
Loading...
Unanswered Questions View All