admin-dashboard-main

by shyamh

HTML

<link rel="stylesheet" href="view-source:http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="view-source:http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<div class="container-fluid">
    <div id="home" class="row-fluid">
        <div class="span12">
            <div class="row-fluid row-header">
                <div class="span12">
                          <div class="controls row-header-control">
                            <div class="input-prepend">
                              <span class="add-on"><i class="icon-search"></i></span>

                    <input type="text" data-provide="typeahead" placeholder="Type something…" />
                </div>
            </div>
        </div>
    </div>
    <div class="row-fluid outer-row">
        <div class="span4">row 2 column 1 span 4 consectetur adipiscing elit. Fusce a felis sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
        <div class="span2">Trial</div>
        <div class="span6 hidden-tablet hidden-phone">
            <div class="spark-chart"></div>
        </div>
    </div>
    <div class="row-fluid outer-row">
        <div class="span4">row 2 column 1 span 4</div>
        <div class="span2">Trial</div>
        <div class="span6 hidden-tablet hidden-phone"><div class="spark-chart"></div></div>
    </div>
    <div class="row-fluid outer-row">
        <div class="span4">row 2 column 1 span 4</div>
        <div class="span2">Free</div>
        <div class="span6 hidden-tablet hidden-phone"><div class="spark-chart"></div></div>
    </div>
    <div class="row-fluid outer-row">
        <div class="span4">row 2 column 1 span 4</div>
        <div class="span2">&nbsp;</div>
        <div class="span6 hidden-tablet hidden-phone"><div class="spark-chart"></div></div>
    </div>
    <div class="row-fluid...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');

/* http://stackoverflow.com/questions/11037517/bootstrap-making-responsive-changes-to-layout */
@media (screen-width: 900px){
    .span4 {
        width: 60%;
    }
    .span2 {
        width: 40%;
    }
}

.container-fluid {
    margin-top: 10px;
}

.row-fluid {
    padding: 4px;
    vertical-align: top;
}
.row-header {
    background-color: #eee;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
.row-header-control {
    margin-top: 5px;
    margin-left: 5px;
}
.outer-row {
    border-bottom: 1px dotted #ccc;
}
.spark-chart {
    min-height: 30px;
    width: 100%;
    background-color: #efefff;
}