Bootstrap++

A collection of missing components from Bootstrap.

Examples

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Comment:

<div class="plus-comment">
  <div class="pointer"></div>
    <div class="plus-comment-details">
    <img class="img-circle blogheadimg" src="images/face.png">
    <label class="plus-comment-name"><a href="#">Jamal Khan</a></label>
    <label class="plus-comment-date">3 days ago</label>
    </div>
    <span>
      <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur.
      </p>  
    </span>
    <div class="plus-comment-tools">
        <a href="#"><i class="icon-share-alt"></i>Reply</a>
        <a href="#"><i class="icon-thumbs-up"></i>Vote Up</a>
        <a href="#"><i class="icon-thumbs-down"></i>Vote Down</a>
    </div>
</div>

Comment Reply:

<div class="plus-comment-reply">
  <div class="pointer"></div>
    <div class="plus-comment-details">
    <img class="img-circle blogheadimg" src="images/face.png">
    <label class="plus-comment-name"><a href="#">Jamal Khan</a></label>
    <label class="plus-comment-date">3 days ago</label>
    </div>
    <span>
      <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur.
      </p>  
    </span>
    <div class="plus-comment-tools">
        <a href="#"><i class="icon-share-alt"></i>Reply</a>
        <a href="#"><i class="icon-thumbs-up"></i>Vote Up</a>
        <a href="#"><i class="icon-thumbs-down"></i>Vote Down</a>
    </div>
</div>

  • plus-comment is the comment class.
  • plus-pointer is the arrow pointing to the user image.
  • plus-comment-details is the div containing the user info.
  • plus-comment-name is the name of the user.
  • plus-comment-date is the date.
  • plus-comment-tool contain the tools like reply or like.
  • <i class="icon-share-alt"></i> is the image you use from the bootstrap images (glyphicon images): Details

Examples

                  <div class="navbar plus-menu">
      <div class="navbar-inner">
        <div class="container" style="width: auto;">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#"></a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Mega Menu On Hover <b class="caret"></b></a>
                <!-- plus-mega class makes the drop down menu work on hover -->
                <!-- cols6 class indicates the 6 columns mega menu -->
                <ul class="dropdown-menu plus-mega plus-hover">
                    <li>
                   <div class="plus-mega-content">
                  <div class="span2">
                  <li><a href="#"><i class="icon-search"></i>Find People</a></li>
                  <li><a href="#"><i class="icon-plus-sign"></i>Add People</a></li>
                  <li><a href="#"><i class="icon-edit"></i>Edit Entries</a></li>
                  <li><a href="#"><i class="icon-envelope"></i>Messages</a></li>
                  <li><a href="#"><i class="icon-comment"></i>Comments</a></li>
                  </div>
                  
                  <div class="span2">
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One More</a></li>
                  <li><a href="#"><i class="icon-thumbs-up"></i>Likes</a></li>
                  <li><a href="#">One More</a></li>
                  <li><a href="#">Lorem Ipsum</a></li>
                  </div>

                  <div class="span2">
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One More</a></li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#"><i class="icon-info-sign"></i>Logs</a></li>
                  <li><a href="#">XYZZZZZZ</a></li>
                  </div>

                  <div class="span2">
                  <li><a href="#"><i class="icon-star"></i>Ratings</a></li>
                  <li><a href="#">One More</a></li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One More</a></li>
                  <li><a href="#">XYZZZZZZ</a></li>
                  </div>
  

                  <div class="span2">
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One More</a></li>
                  <li><a href="#"><i class="icon-ban-circle"></i>Warnings</a></li>
                  <li><a href="#">One More</a></li>
                  <li><a href="#">XYZZZZZZ</a></li>
                  </div>


                   <div class="span2">
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One More</a></li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#"><i class="icon-leaf"></i>Project Green</a></li>
                  <li><a href="#">XYZZZZZZ</a></li>
                  </div>                 
                  </li>

Example

 
 <ul class="dropdown-menu plus-metro plus-hover">
         <div class="arrow-up"></div>
               <div class="plus-metro-nav span9 well">
               <!-- height3 class will make the metro menu 3 rows high -->
               <!-- red, brown, lightblue, green, pink, deviant, purple classes are background colors -->
                 <a href=""><div class="span3 box red height3"><h5><i class="icon-home"></i>Home</h5></div></a>
                    <a href=""><div class="span3 box lightblue"><h5><i class="icon-info-sign"></i>About</h5></div></a>
                    <a href=""><div class="span3 box purple"><h5><i class="icon-pencil"></i>Contact Us</h5></div></a>
                    <a href=""><div class="span3 box green"><h5><i class="icon-map-marker"></i>Map</h5></div></a>
                    <a href=""><div class="span3 box deviant"><h5><i class="icon-question-sign"></i>FAQs</h5></div></a>
                    <a href=""><div class="span3 box brown"><h5><i class="icon-screenshot"></i>Mission</h5></div></a>
                    <a href=""><div class="span3 box pink"><h5><i class="icon-edit"></i>Blog</h5></div></a>
                  </div>
      </ul>

You can make any menu into a Hover Menu by adding the class "plus-hover"

  
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Mega On Hover <b class="caret"></b></a>
                <ul class="dropdown-menu plus-mega cols3 plus-hover">

                  <div class="span2">
                  <li><a href="#"><i class="icon-search"></i>Find People</a></li>
                  <li><a href="#"><i class="icon-plus-sign"></i>Add People</a></li>
                  <li><a href="#"><i class="icon-edit"></i>Edit Entries</a></li>
                  <li><a href="#"><i class="icon-envelope"></i>Messages</a></li>
                  <li><a href="#"><i class="icon-comment"></i>Comments</a></li>
                  </div>
                  
                  <div class="span2">
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One More</a></li>
                  <li><a href="#"><i class="icon-thumbs-up"></i>Likes</a></li>
                  <li><a href="#">One More</a></li>
                  <li><a href="#">Lorem Ipsum</a></li>
                  </div>

                  <div class="span2">
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One More</a></li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#"><i class="icon-info-sign"></i>Logs</a></li>
                  <li><a href="#">XYZZZZZZ</a></li>
                  </div>

                </ul>
            </li>

You can make draggable widgets like jQueryUI easily i

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        <div class="span6 plus-draggable well">
              <div class="navbar">
             <div class="navbar-inner">
             <a class="brand" href="#">Draggable Box</a>
             <a class="btn pull-right icon_drag"><i class="icon-fullscreen"></i></a>
            </div>
            </div>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
              quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
              proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>

  • plus-draggable class will make a widget dragabble.
  • <a class="btn pull-right icon_drag"><i class="icon-fullscreen"></i></a> is the button that drags the widget, required if you need the dragging feature.

Use the arrow to collapse/expand the widget

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="span6 plus-collapsible">
      <div class="navbar">
     <div class="navbar-inner">
     <a class="brand" href="#">Collapsible Box</a>
     <a class="btn pull-right icon_collapse" href="#"><i class="icon-chevron-up"></i></a>
    </div>
    </div>
    <p class="well">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</div>

  • plus-collapsible class will make a widget collapsible.
  • <a class="btn pull-right icon_drag"><i class="icon-fullscreen"></i></a> is the button that drags the widget, required if you need the dragging feature.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Scrolling Menu is the side menu with scrolling drop-down feature.

    <ul class="nav nav-list">
    <li class="plus-verticalMenu">
        <a>Home<b class="caret pull-right" style="margin-top:12px;"></b></a>
        <ul>
        <li><a href="">About</a></li>
        <li><a href="">Map</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Help</a></li>
      </ul>
    </li>
    <li class="active"><a href="#">Library</a></li>

    <li class="plus-verticalMenu">
        <a>School<b class="caret pull-right" style="margin-top:12px;"></b></a>
        <ul>
        <li><a href="">Students</a></li>
        <li><a href="">Teachers</a></li>
        <li><a href="">Parents</a></li>
        <li><a href="">Attendance</a></li>
      </ul>
    </li>

    <li><a href="#">Notifications</a></li>
    <li><a href="#">Emails</a></li>

    <li class="plus-verticalMenu">
        <a>School<b class="caret pull-right" style="margin-top:12px;"></b></a>
        <ul>
        <li><a href="">Students</a></li>
        <li><a href="">Teachers</a></li>
        <li><a href="">Parents</a></li>
        <li><a href="">Attendance</a></li>
      </ul>
    </li>
    </ul>
//that's it:
  <div class="span12 gmap" data-location="Islamabad, Pakistan;" data-zoom='14'>

</div>

  • data-location is the location you want to show.
  • data-zoom is the amount of zoom you need.
  • span12 is the width of the container (from Bootstrap).
  • gmap is the class that shows the google map.
  • Free

  • $ 0

  • 1 Domain
  • 250mb Bandwidth
  • 250mb Bandwidth
  • 1 Gb Space
  • No SSL
  • Silver

  • $ 20

  • 10 Domain
  • 2 Gb Bandwidth
  • 50 Gb Bandwidth
  • 100 Gb Space
  • 1 Shared SSL
  • Gold

  • $ 30

  • 20 Domain
  • 500 Gb Bandwidth
  • 50 Gb Bandwidth
  • Unlimited Space
  • Private SSL
<ul class="span3 plus-pricing">
      <li class="plus-pricing-head"><h2>Free</h2></li>
      <li class="plus-pricing-price"><h3>$ 0</h3></li>
      <li class="plus-pricing-details">1 Domain</li>
      <li class="plus-pricing-details">250mb Bandwidth</li>
      <li class="plus-pricing-details">250mb Bandwidth</li>
      <li class="plus-pricing-details">1 Gb Space</li>
      <li class="plus-pricing-details">No SSL</li>
      <li class="plus-pricing-button"><button class="btn btn-info" type="button">Buy Now</button></li>
</ul>

  • plus-pricing class makes this un-ordered list into a pricing table.
  • span3 defines the width of the pricing table, it can be span4, span5, span6 and so on.
  • plus-pricing-head is the label section.
  • plus-pricing-price is the price section.
  • plus-pricing-details is the further details about the package.

Examples

Featured

Static Ribbon:

Top Right:
<div class="plus-pic span3">
<img src="img/up.jpg" />
<div class="plus-badge right-top">Featured</div>
</div>
Featured
Bottom Right:
<div class="plus-pic span3">
<img src="img/up.jpg" />
<div class="plus-badge right-bottom">Featured</div>
</div>
Featured
Top Left:
<div class="plus-pic span3">
<img src="img/up.jpg" />
<div class="plus-badge left-top">Featured</div>
</div>
Featured
Top Left:
<div class="plus-pic span3">
<img src="img/up.jpg" />
<div class="plus-badge left-bottom">Featured</div>
</div>
Featured
Hover Ribbon:
<div class="plus-pic span3">
<img src="img/toystory.jpg" />
<div class="plus-badge left-bottom plus-hover"><a href="#">Buy Now</a></div>
</div>
Images Ribbons:
<div class="plus-pic span3">
<img src="img/walle.jpg" />
<a class="btn right-top" href="#"><i class="icon-shopping-cart"></i></a>
</div>

  • plus-pic is the class that has the image in it.
  • span3 is the width of the container (from bootstrap).
  • plus-hover enables to show the ribbon only when mouse is over the image.
  • left-bottom, left-top, right-top, right-bottom are the positions of the ribbons on the image.
  • <i class="icon-shopping-cart"></i> is the icon you want to use (from bootstrap).

Empty Space

One of my friend ask me to add this feature too, it just adds a blank space between html elements.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <div class="well">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>

            //this div will add 50px gap between these elements
            <div class="plus-empty-50"></div>

            <div class="well">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>

  • plus-empty-50 class will add 50px gap between the upper and lower elements.
  • plus-empty-5 class will add 5px gap between the upper and lower elements.
  • plus-empty-10 class will add 10px gap between the upper and lower elements.
  • plus-empty-20 class will add 20px gap between the upper and lower elements.
  • plus-empty-30 class will add 30px gap between the upper and lower elements.
  • plus-empty-40 class will add405px gap between the upper and lower elements.