bootstrap nav pills menu custom size width

debugcn Published at Dev

stafan bomba

I want to edit my right menu (nav pills) to setup custom fixed size, independent of the length of menu categories... for example I want this menu to be large 150px, my actual code is : http://www.bootply.com/3BzZ4kQyuT

I want to look like this:

Badge need to be on left of menu, and all buttons need have same size.

Jyothi Babu Araja

Just use class pull-right for your number badge s

.thumbnail.product {
    position: relative;
    text-align: center;
  }
  .thumbnail.product .label {
    display: inline-block;
    margin-bottom: 5px;
  }
  .thumbnail.product .product-price {
    display: inline-block;
    border: 1px solid transparent;
    padding: 5px 10px;
    cursor: pointer;
  }
  .thumbnail.product .product-price:hover {
    border: 1px solid #CCC;
    border-radius: 5px;
  }
  .thumbnail.product .product-price:active {
    background-color: #EEE;
  }
  div.thumbnail{
    padding:0px;
  }

.thumbnailheader h3, .thumbnail p
{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="panel panel-default">
        <div class="panel-body">
      <ul class="nav nav-pills">

          <li class="pull-left">
              <a href="/"><img src="/static/logo.png" alt=""></a>
          </li>

        

        
        <li class="pull-right" style="margin-left: 20px;">
          <div class="dropdown">
            <a href="#" class="btn dropdown-toggle" id="accountDropdownMenu" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> <strong>admin <span class="caret"></span></strong></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
              <li class="dropdown-header"> <span class="label label-success"><i class="glyphicon glyphicon-star"></i> PREMIUM MEMBER</span></li>
              <li class="divider"></li>
            <li><a role="menuitem" href="/account/sell/products.html"><i class="glyphicon glyphicon-record"></i> Products</a></li>
              <li><a role="menuitem" href="/account/messages.html"><i class="glyphicon glyphicon-envelope"></i> Messages <span class="badge badge-success">0</span></a></li>

              <li class="dropdown dropdown-submenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-star"></i> Favorites</a>
                <ul class="dropdown-menu dropdown-menu-left">
                  <li><a role="menuitem" href="/account/favorite-items.html">Items <span class="badge badge-success">0</span></a></li>
                  <li><a role="menuitem" href="/account/favorite-searches.html">Search <span class="badge badge-success">0</span></a></li>
                </ul>
              </li>
              
                <li class="divider"></li>
                <li><a role="menuitem" href="/account"><i class="glyphicon glyphicon-dashboard"></i> Dashboard</a></li>
              
              <li class="divider"></li>
              <li><a role="menuitem" href="/admin/"><i class="glyphicon glyphicon-cog"></i> Admin panel</a></li>
              
              <li class="divider"></li>
              <li><a role="menuitem" href="/logout.html"><i class="glyphicon glyphicon-log-out"></i> Logout</a></li>
            </ul>
          </div>

        </li>
        
        
        
            <li class="pull-right" style="margin-left: 20px;"><a role="menuitem" href="/account/add-product.html">Add product</a></li>
        

      </ul>
    </div></div>
    

<div class="row">
  <div class="page-header">

  <div class="pull-right">
      <form action="/" method="GET">
        
        <input type="text" name="q" placeholder="Search market..." size="20" value="">
        <button class="btn btn-xs btn-primary" type="submit">Search</button>
      </form>

      <form action="" method="GET">
        
        
        Sort by:
        <select name="sort">
          
          <option value="-date">Date added</option>
          
          <option value="price">Lower price</option>
          
          <option value="-price">Higher price</option>
          
          <option value="-orders">Best Sellers</option>
          
        </select>
        <button class="btn btn-xs btn-primary" type="submit">Apply</button>
      </form>
    </div>

    <h1>New
      </h1>


  </div>
</div>

<div class="row">
  <div class="col-md-2">
    <ul class="nav nav-pills nav-stacked">
      
        <li>
          <a href="/category/app-1.html">app
            <span class="badge pull-right">
            
              1
            
            </span> 
          </a>
        </li>
        
      
        <li>
          <a href="/category/software-2.html">software
            <span class="badge pull-right">
            
              1
            
            </span>
          </a>
        </li>
        
      
        <li>
          <a href="/category/voucher-3.html">voucher
            <span class="badge pull-right">
            
              0
            
            </span>
          </a>
        </li>
        
      
    </ul>
  </div>
  <div class="col-md-10">
    

    <div class="row">
    
    <div class="col-sm-4 col-md-4 col-lg-3">


      <div class="thumbnail product">
<h5><a href="&#10;  &#10;      /product/product-4-24820861725.html&#10;  &#10;">product 4</a></h5>
        <a href="&#10;  &#10;      /product/product-4-24820861725.html&#10;  &#10;">
  
    <p>
    
      <img src="/static/uploads/16/thumb.02556996-product-4.jpg">
    
    </p>
  
</a>

              <span class="label label-info"><i class="glyphicon glyphicon-tag"></i>app</span>
        
        
        <span class="label label-info"><i class="glyphicon glyphicon-user"></i> admin</span>

<div class="panel-footer">
1.00 $
</div>

      </div>

    </div>

    
    <div class="col-sm-4 col-md-4 col-lg-3">


      <div class="thumbnail product">
<h5><a href="&#10;  &#10;      /product/product-111-22234646298.html&#10;  &#10;">product 111</a></h5>
        <a href="&#10;  &#10;      /product/product-111-22234646298.html&#10;  &#10;">
  
    <p>
    
      <img src="/static/uploads/15/thumb.91861739-product-111.jpg">
    
    </p>
  
</a>

              <span class="label label-info"><i class="glyphicon glyphicon-tag"></i>software</span>
        
        
        <span class="label label-info"><i class="glyphicon glyphicon-user"></i> admin</span>

<div class="panel-footer">
1.00 $
</div>

      </div>

    </div>

    
    </div>

    
  <nav>
    <ul class="pagination">
      
      
    </ul>
  </nav>

  </div>
</div>


    <br><br>
    <div class="panel panel-default">
      <div class="panel-body">
        <div> © 2016 
          <a href="/">selfmarket.net</a> /
          <a href="/atom.xml">RSS Feed</a> /
          <a href="/static/sitemap.xml">sitemap.xml</a>
        </div>
      </div>
    </div>
  </div>

Collected from the Internet

Please contact [email protected] to delete if infringement.