Twitter Bootstrap Sideways Caret

Twitter Bootstrap sideways caret

Just switch up the borders (see fiddle):

HTML

<b class="caret-right"></b>

CSS

.caret-right {
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    border-left: 4px solid;
    display: inline-block;
    height: 0;
    opacity: 0.3;
    vertical-align: top;
    width: 0;
}

Bootsrap Carets: Making sub carets and float them to the right?

To achieve the desired result, you should change your markup. <caret> div should before the text. Then you can give float right;

Working Demo

<b class="caret-right"></b>  
News - a very long title

CSS

.caret-right {
float:right;
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-left: 5px solid;
  border-left-color:#999999;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  margin-top:5px;
  margin-right:-8px;
}

Can't change color of opened caret?

The correct selector for the caret is as follows:

.dropdown.open a.dropdown-toggle .caret {  }

You should use tools such as Developer Tools or Firebug to inspect your document and see what classes get applied to what elements when you change their state. It really helps when trying to figure out how to target certain elements.

Not sure about what you mean by "change dropdown's form", can you elaborate on that?

how to display caret via rails link_to for dropdown in bootstrap

Try this,
<%= link_to 'Setup <b class="caret"></b>'.html_safe, root_path, :id => 'setupdrop', :'data-toggle' => 'dropdown', :class => 'dropdown-toggle' %>

Bootstrap adding a dropdown caret

Twitter bootstrap adds the caret by default if you are using dropdowns within a navigation bar. These are the CSS rules:

.navbar .nav > li > .dropdown-menu::before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #CCC;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.navbar .nav > li > .dropdown-menu::after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid white;
  border-left: 6px solid transparent;
  content: '';
}

So make sure you have this DOM structure or copy the style.

Hope this helps!

How to make Twitter Bootstrap menu dropdown on hover rather than click

I created a pure on hover dropdown menu based on the latest (v2.0.2) Bootstrap framework that has support for multiple submenus and thought I'd post it for future users:

body {  padding-top: 60px;  padding-bottom: 40px;}
.sidebar-nav {  padding: 9px 0;}
.dropdown-menu .sub-menu {  left: 100%;  position: absolute;  top: 0;  visibility: hidden;  margin-top: -1px;}
.dropdown-menu li:hover .sub-menu {  visibility: visible;}
.dropdown:hover .dropdown-menu {  display: block;}
.nav-tabs .dropdown-menu,.nav-pills .dropdown-menu,.navbar .dropdown-menu {  margin-top: 0;}
.navbar .sub-menu:before {  border-bottom: 7px solid transparent;  border-left: none;  border-right: 7px solid rgba(0, 0, 0, 0.2);  border-top: 7px solid transparent;  left: -7px;  top: 10px;}
.navbar .sub-menu:after {  border-top: 6px solid transparent;  border-left: none;  border-right: 6px solid #fff;  border-bottom: 6px solid transparent;  left: 10px;  top: 11px;  left: -6px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-fixed-top">  <div class="navbar-inner">    <div class="container-fluid">      <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">        <span class="icon-bar"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>      </a>      <a href="#" class="brand">Project name</a>      <div class="nav-collapse">        <ul class="nav">          <li class="active"><a href="#">Home</a></li>          <li><a href="#">Link</a></li>          <li><a href="#">Link</a></li>          <li><a href="#">Link</a></li>          <li class="dropdown">            <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>            <ul class="dropdown-menu">              <li>                <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>                <ul class="dropdown-menu sub-menu">                  <li><a href="#">Action</a></li>                  <li><a href="#">Another action</a></li>                  <li><a href="#">Something else here</a></li>                  <li class="divider"></li>                  <li class="nav-header">Nav header</li>                  <li><a href="#">Separated link</a></li>                  <li><a href="#">One more separated link</a></li>                </ul>              </li>              <li><a href="#">Another action</a></li>              <li><a href="#">Something else here</a></li>              <li class="divider"></li>              <li class="nav-header">Nav header</li>              <li><a href="#">Separated link</a></li>              <li><a href="#">One more separated link</a></li>            </ul>          </li>        </ul>        <form action="" class="navbar-search pull-left">          <input type="text" placeholder="Search" class="search-query span2">        </form>        <ul class="nav pull-right">          <li><a href="#">Link</a></li>          <li class="divider-vertical"></li>          <li class="dropdown">            <a class="#" href="#">Menu</a>          </li>        </ul>      </div>      <!-- /.nav-collapse -->    </div>  </div></div>
<hr>
<ul class="nav nav-pills">  <li class="active"><a href="#">Regular link</a></li>  <li class="dropdown">    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>    <ul class="dropdown-menu" id="menu1">      <li>        <a href="#">2-level Menu <i class="icon-arrow-right"></i></a>        <ul class="dropdown-menu sub-menu">          <li><a href="#">Action</a></li>          <li><a href="#">Another action</a></li>          <li><a href="#">Something else here</a></li>          <li class="divider"></li>          <li class="nav-header">Nav header</li>          <li><a href="#">Separated link</a></li>          <li><a href="#">One more separated link</a></li>        </ul>      </li>      <li><a href="#">Another action</a></li>      <li><a href="#">Something else here</a></li>      <li class="divider"></li>      <li><a href="#">Separated link</a></li>    </ul>  </li>  <li class="dropdown">    <a href="#">Menu</a>  </li>  <li class="dropdown">    <a href="#">Menu</a>  </li></ul>

How to make Twitter Bootstrap menu dropdown on hover rather than click

I created a pure on hover dropdown menu based on the latest (v2.0.2) Bootstrap framework that has support for multiple submenus and thought I'd post it for future users:

body {  padding-top: 60px;  padding-bottom: 40px;}
.sidebar-nav {  padding: 9px 0;}
.dropdown-menu .sub-menu {  left: 100%;  position: absolute;  top: 0;  visibility: hidden;  margin-top: -1px;}
.dropdown-menu li:hover .sub-menu {  visibility: visible;}
.dropdown:hover .dropdown-menu {  display: block;}
.nav-tabs .dropdown-menu,.nav-pills .dropdown-menu,.navbar .dropdown-menu {  margin-top: 0;}
.navbar .sub-menu:before {  border-bottom: 7px solid transparent;  border-left: none;  border-right: 7px solid rgba(0, 0, 0, 0.2);  border-top: 7px solid transparent;  left: -7px;  top: 10px;}
.navbar .sub-menu:after {  border-top: 6px solid transparent;  border-left: none;  border-right: 6px solid #fff;  border-bottom: 6px solid transparent;  left: 10px;  top: 11px;  left: -6px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-fixed-top">  <div class="navbar-inner">    <div class="container-fluid">      <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">        <span class="icon-bar"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>      </a>      <a href="#" class="brand">Project name</a>      <div class="nav-collapse">        <ul class="nav">          <li class="active"><a href="#">Home</a></li>          <li><a href="#">Link</a></li>          <li><a href="#">Link</a></li>          <li><a href="#">Link</a></li>          <li class="dropdown">            <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>            <ul class="dropdown-menu">              <li>                <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>                <ul class="dropdown-menu sub-menu">                  <li><a href="#">Action</a></li>                  <li><a href="#">Another action</a></li>                  <li><a href="#">Something else here</a></li>                  <li class="divider"></li>                  <li class="nav-header">Nav header</li>                  <li><a href="#">Separated link</a></li>                  <li><a href="#">One more separated link</a></li>                </ul>              </li>              <li><a href="#">Another action</a></li>              <li><a href="#">Something else here</a></li>              <li class="divider"></li>              <li class="nav-header">Nav header</li>              <li><a href="#">Separated link</a></li>              <li><a href="#">One more separated link</a></li>            </ul>          </li>        </ul>        <form action="" class="navbar-search pull-left">          <input type="text" placeholder="Search" class="search-query span2">        </form>        <ul class="nav pull-right">          <li><a href="#">Link</a></li>          <li class="divider-vertical"></li>          <li class="dropdown">            <a class="#" href="#">Menu</a>          </li>        </ul>      </div>      <!-- /.nav-collapse -->    </div>  </div></div>
<hr>
<ul class="nav nav-pills">  <li class="active"><a href="#">Regular link</a></li>  <li class="dropdown">    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>    <ul class="dropdown-menu" id="menu1">      <li>        <a href="#">2-level Menu <i class="icon-arrow-right"></i></a>        <ul class="dropdown-menu sub-menu">          <li><a href="#">Action</a></li>          <li><a href="#">Another action</a></li>          <li><a href="#">Something else here</a></li>          <li class="divider"></li>          <li class="nav-header">Nav header</li>          <li><a href="#">Separated link</a></li>          <li><a href="#">One more separated link</a></li>        </ul>      </li>      <li><a href="#">Another action</a></li>      <li><a href="#">Something else here</a></li>      <li class="divider"></li>      <li><a href="#">Separated link</a></li>    </ul>  </li>  <li class="dropdown">    <a href="#">Menu</a>  </li>  <li class="dropdown">    <a href="#">Menu</a>  </li></ul>

Is there an upside down caret character?

There's ▲: ▲ and ▼: ▼

Twitter Bootstrap Sideways Caret