JSFiddle

  • Morris graphs in bootstrap tabs #1 is the latest revision

    jQuery 1.9.1, HTML, CSS, JavaScript

    <div id="monitor" class="panel panel-default tab-box">
        <div class="panel-heading">
             <h3 class="panel-title">
                <i class="fa fa-signal"></i>
                Monitoring report
            </h3>
    
            <ul class="nav nav-tabs">
                <li class="active"> <a href="#fuel-tab" data-toggle="tab" data-identifier="line, donut">Fuel data</a>
    
                </li>
                <li> <a href="#co2-tab" data-toggle="tab" data-identifier="bar1">Co2 data</a>
    
                </li>
            </ul>
        </div>
        <div class="panel-body">
            <div class="tab-content">
                <div id="fuel-tab" class="tab-pane active">
                    <div class="row">
                        <div class="col-sm-12 col-md-7 chart">
                            <div class="caption">Fuel consumption last 12 months <span class="label label-default">Liter/100km</span>
    
                            </div>
                            <div id="fuel-consumption"></div>
                            <div class="legend"> <span id="city" class="label">City</span>
     <span id="highway" class="label">Highway</span>
     <span id="idle" class="label">Idle</span>
    
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-5 chart">
                            <div class="caption">Fuel projection this month ...</div></div></div></div></div></div></div>
  • Morris graphs in bootstrap tabs #33 is the latest revision

    jQuery 1.9.1, HTML, CSS, JavaScript

    $('ul.nav a').on('shown.bs.tab', function (e) {
        var types = $(this).attr("data-identifier");
        var typesArray = types.split(",");
        $.each(typesArray ...
  • Bootstrap 3.0 Glyphicon Inside Input Box #497 is the latest revision

    jQuery 2.0.2, HTML, CSS, JavaScript

    <p>Full Size:</p>
    <div class="left-inner-addon ">
        <i class="icon-user"></i>
        <input type="text"
               class="form-control" 
               placeholder="Username" />
    </div>
    <div class="right-inner-addon ">
        <i class="icon-search"></i>
        <input type="search"
               class="form-control" 
               placeholder="Search" />
    </div>
    
    
    <br/>
    
    <p>Smaller:</p>
    <div class="col-xs-6" >
        <div class="left-inner-addon">
            <i class="icon-user"></i>
            <input type="text"
                   class="form-control" 
                   placeholder="Username" />
        </div>
    </div>
    <div class="col-xs-6" >
        <div class="right-inner-addon">
            <i class="icon-search"></i>
            <input type="search"
                   class="form-control" 
                   placeholder="Search" />
        </div>
    </div>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    <!-- Post Info -->
    <div style='position:fixed;bottom:0;left:0;    
                background:lightgray;width:100%;'>
        About this SO Question: <a href=' http://stackoverflow.com/q/18838964/1366033'>Add Bootstrap Glyphicon to Input Box</a><br/>
        Find documentation: <a href='http://getbootstrap.com/components/#input-groups'>Bootstrap 3.0 Input Groups ...</a></br/></div></!--></br/>
  • Morris graphs in bootstrap tabs #656 is the latest revision

    jQuery 1.9.1, HTML, CSS, JavaScript

    $('ul.nav a').on('shown.bs.tab', function (e) {
        var types = $(this).attr("data-identifier");
        var typesArray = types.split(",");
        $.each(typesArray ...