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

Question

How can I float or make all my caret to the right?

I follow this answer to make sub carets in my menu.

But it displays the carets to be inline-block and that my sub carets don't look align.

enter image description here

I would want the sub carets to be align like this,

enter image description here

Is it possible?

css,

.caret-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;
}

html,

<li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Category <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li class="el-dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border:1px solid red;">News - a very long title <b class="caret-right"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#/3">Add</a></li>
                    <li><a href="#/4">Manage</a></li>
                </ul>
            </li>
            <li class="el-dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog <b class="caret-right"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Add</a></li>
                    <li><a href="#">Manage</a></li>
                </ul>
            </li>
          </ul>
        </li>

EDIT:

If I float the display to right,

enter image description here

Please paste your HTML and CSS – Pattle Feb 20 '14 at 09:51 — Pattle, Feb 20 '14 at 09:51
Sorry I forgot! please see my edit above thanks! – Run Feb 20 '14 at 09:56 — Run, Feb 20 '14 at 09:56

score 6 · Accepted Answer · answered Feb 20 '14 at 12:12

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;
}

score 0 · Answer 2 · answered Feb 20 '14 at 10:01

0

You could add float: right

.caret-right {
  float: right; /*Added */
  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;
}

answered Feb 20 '14 at 10:01

Pattle

5,983
8
33
56

Can you do a jsFiddle? – Pattle Feb 20 '14 at 10:06
here it is http://jsfiddle.net/9Hf6c/ but I dunno how to make Bootsrap to work on jsfiddle. thanks. – Run Feb 20 '14 at 10:11

score 0 · Answer 3 · answered Nov 17 '16 at 19:44

Old question but you can do this simply by adding class="pull-right".

<li><a href="#">2011 <span class="caret-right pull-right"></span></a></li>

CSS

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

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

3 Answers3