Quantcast
Channel: Free Online Tutorials, PHP, CSS, and Android | On Time IT Solution
Viewing all articles
Browse latest Browse all 174

Bootstrap Carets

$
0
0

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>

OUTPUT:

bootstrap-carets


Abhishek

Note: There is a rating embedded within this post, please visit this post to rate it.


Viewing all articles
Browse latest Browse all 174

Trending Articles