Develop Reference

Issue on Adding Animation To Cart Arrow on Dropdown Button

Can you please take a look at this demo and let me know why I am not able to properly animate the .fa classes? As you can see the animation works fine on clicking on each button but is not affecting to other buttons. For Example if you click on Action A and then click on Action B the arrow on Action A still is in previous state.
$(".dropper").on("click", function(){
//$('.dropper').find('.fa').removeClass('css-chevron-down').addClass('css-chevron-right');
$(this).find('.fa').toggleClass('css-chevron-right css-chevron-down');
});
.css-chevron-down{
transform: rotate(0.25turn);
transition: all 0.5s ease;
}
.css-chevron-right{
transition: all 0.5s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="col-sm-12">
<div class="col-sm-6 "><div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle dropper" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action A <i class="fa fa-chevron-right css-chevron-right" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div></div>
<div class="col-md-6" style="float:left; margin-left:200px;"><div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle dropper" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action B <i class="fa fa-chevron-right css-chevron-right" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div></div>
</div>

You have to write some code to bring the arrow to its original state, when the dropdown closes. The event you need for that is hide.bs.dropdown. The following piece of code will do the trick:
Code:
$("body").on("hide.bs.dropdown", function (e) {
var i = $(e.relatedTarget).find(".fa");
i.removeClass("css-chevron-down").addClass("css-chevron-right");
});
Also, be sure to check out the following snippet to see live how it works.
Snippet:
/* ----- JavaScript ----- */
$(".dropper").on("click", function() {
$(this).find('.fa').toggleClass('css-chevron-right css-chevron-down');
});
$("body").on("hide.bs.dropdown", function (e) {
var i = $(e.relatedTarget).find(".fa");
i.removeClass("css-chevron-down").addClass("css-chevron-right");
});
/* ----- CSS ----- */
.css-chevron-down {
transform: rotate(0.25turn);
transition: all 0.5s ease;
}
.css-chevron-right {
transition: all 0.5s ease;
}
<!----- HTML ----->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-sm-12">
<div class="col-sm-6 ">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle dropper" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action A <i class="fa fa-chevron-right css-chevron-right" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
<div class="col-md-6" style="float:left; margin-left:200px;">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle dropper" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action B <i class="fa fa-chevron-right css-chevron-right" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
</div>

bootstrap dynamic dropdown in list-group

I'm trying to build a list-group, with each item in the list have an icon which will trigger a dropdown menu. I have a few problems how to position the dropdown, also the glyphicon is not visible at all, unless I put text in the button, and then it has a bad position.
Also I want to build and position the dropdown dynamically with javascript, but first I need to see one that is position correctly, then I will do all the JS DOM work..
Thanks for help!
jsfiddle:
https://jsfiddle.net/DTcHh/24900/
Some code:
<div class="container">
<div class="col-sm-4">
<ul class="list-group">
<li class="list-group-item">
option
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="glyphicon glyphicon-option-vertical"></i>ICON</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</div></li>
<li class="list-group-item">
option
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="glyphicon glyphicon-option-vertical"></i></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</div></li>
</ul>
</div> <!--.col-sm-4 -->
<div class="col-sm-8">
</div>
</div>

I've updated the version of bootstrap css to a cdn version which includes the glyphicons. I have then moved the anchor element next to the icon which I believe is what you're looking for. I also removed your custom css which was causing a layout issue.
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="glyphicon glyphicon-option-vertical"></i>
option
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</div>
https://jsfiddle.net/DTcHh/24902/

Bootstrap - Why my scrollspy is not working?

I've never used scrollspy in my project and I need to know how it works. I have seen the documentation from the bootstrap page, some other stackoverflow questions and youtube videos.
I have this code:
For the nav:
<!-- Start nav -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img id="logo" src="images/logo.png" alt="Brand"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<!--<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>-->
<ul class="nav navbar-nav navbar-right" id="navbar">
<li>Incio</li>
<li>Nuestros Servicios</li>
<li>Portafolio</li>
<!--<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>-->
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- End nav -->
For the body:
<!-- Body container -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12 menu-1" id="Inicio"></div>
<div class="col-md-12 menu-2" id="NuestrosServicios"></div>
<div class="col-md-12 menu-3" id="Portafolio"></div>
</div>
</div>
<!-- End Body container -->
The JavaScript side:
$(function() {
$("body").scrollspy({target: "#navbar"});
});
The full example in jsbin:

The target should indicate to the element id. In your navbar element I don't see the id attribute. Try adding id to the navbar.
Also add the position: relative; css to your body element.
if the above didn't fix the issue use the data attribute like this data-spy="scroll" data-target="#navbar-example" in the body tag instead of javascript and don't forget the id attribute for the navbar element.

Input Group Buttons with dropdowns not working in Bootstrap

I am trying to use the twitter bootstrap to show input with dropdown button as mentioned in http://getbootstrap.com/components/
Below is the complete html same the one specified in the sample, But I am unable to get this working.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div>
</body>
</html>
Request anyone to point out what is going on wrong as the dropdown is missing?
Thanks in Advance,
-Senthil

You are missing bootstrap js
Add this js in your <head> section
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

You'll want to add a "data-target" attribute to the button and an "id" to the dropdown.
<button data-target="#MYIDHERE" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action</button>
<ul id="MYIDHERE" class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
</ul>

bootstrap navigation bar autocomplete issue

I am working with bootstrap. I added a Google autocomplete to an input box. But autocomplete is appearing under the navigation bar.
css file is here http://getbootstrap.com/2.3.2/assets/css/bootstrap.css
<form class="navbar-form pull-right">
<div class="input-prepend input-append">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Place Search
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Places</li>
<li>Something 1</li>
<li>Something 2</li>
</ul>
</div>
<input class="input-xlarge" id="searchBox" type="text">
<div class="btn-group">
<button type="submit" class="btn dropdown-toggle">S</button>
</div>
</div>
</form>

<ul class="dropdown-menu" style="position:relative;z-index:99">
<li>Places</li>
<li>Something 1</li>
<li>Something 2</li>
</ul>
Use position:relative;z-index:99