Bootstrap Carets Tutorial
×

Bootstrap Carets

3590

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>

Result:




Best WordPress Hosting


Share:


Discount Coupons

Get a .COM for just $6.98

Secure Domain for a Mini Price



Leave a Reply


Comments
    Waiting for your comments