Bootstrap Carets

0 4573

Bootstrap .carets class to indicate drop down functionality and direction. caret will reverse automatically in drop up menus. Through this class everyone can understand this is the sign for the use of drop down. It's look like down triangle icon.

Very useful class (.carets), and it's almost use to all websites or webpages, there requirement for drop down in any navigation.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!- Bootstrap css file ->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>

<body>

<div class="container">

<h1> Bootstrap Carets </h1>
<a href="#" data-toggle="tooltip" data-placement="left" class="btn btn-success"> Tooltip <span class="caret"> </span> </a>

</div>

<!- Bootstrap js file ->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>

</html>