I wanted to create a ui layout with twitter bootstrap. What i wanted to achieve was to have a list of thumbnails which will be search results inside an tab. But the except the first row the other rows are having only 3 items. I am not good in css. So please help on achieving this layout.


<div class="container-fluid">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="#">Title</a>
                <div class="nav-collapse collapse navbar-responsive-collapse">
                    <ul class="nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li class="nav-header">Nav header</li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-search pull-left" action="#">
                        <input type="text" class="search-query span5" placeholder="Search">
                    </form>
                    <ul class="nav pull-right">
                        <li><a href="#">Link</a></li>
                        <li class="divider-vertical"></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /.nav-collapse -->
            </div>
        </div>
        <!-- /navbar-inner -->
    </div>

    <ul class="breadcrumb">
        <li><a href="#">Home</a> <span class="divider">/</span></li>
        <li><a href="#">Library</a> <span class="divider">/</span></li>
        <li class="active">Data</li>
    </ul>

    <div class="row-fluid">
        <div class="span2">
            <form class="form">
                <!-- Text input-->
                <div class="control-group">
                    <label class="control-label" for="brandName">Brand</label>
                    <div class="controls">
                        <input id="brandName" name="brandName" type="text" placeholder="Enter the brand name of the item" class="input-large" data-bind="TypeAhead: { source: brandSuggestions, minLength: 2 }, value: brand">
                        <p class="inputError" data-bind="validationMessage: brand"></p>
                    </div>
                </div>

                <!-- Button Drop Down -->
                <div class="control-group">
                    <label class="control-label" for="itemCategory">Item Category</label>
                    <div class="controls">
                        <div>
                            <select class="combobox" id="itemCategory" data-placeholder="Select an Item Category" data-bind="options: itemCategory, value: selectedItemCategory"></select>
                        </div>
                        <p class="inputError" data-bind="validationMessage: itemCategory"></p>
                    </div>
                </div>

                <!-- Button Drop Down -->
                <div class="control-group">
                    <label class="control-label" for="itemSubCategory">Item Sub Category</label>
                    <div class="controls">
                        <div>
                            <select class="combobox" id="itemSubCategory" data-placeholder="Select an Item SubCategory" data-bind="options: itemSubCategory, value: selectedItemSubCategory"></select>
                        </div>
                        <p class="inputError" data-bind="validationMessage: itemSubCategory"></p>
                    </div>
                </div>

                <!-- Range Slider-->
                <div class="control-group">
                    <label class="control-label" for="rating">Rating</label>
                    <div id="rating"></div>
                </div>

                <!-- Button Drop Down -->
                <div class="control-group">
                    <label class="control-label" for="itemCondition">Item Condition</label>
                    <div class="controls">
                        <div>
                            <select class="combobox" id="itemCondition" data-placeholder="Select an Item Condition" data-bind="options: itemCondition, value: selectedItemCondition"></select>
                        </div>
                        <p class="inputError" data-bind="validationMessage: itemCondition"></p>
                    </div>
                </div>

                <div class="control-group">
                    <div class="controls">
                        <label class="checkbox">
                            <input type="checkbox">
                            Has an Image
                        </label>
                    </div>
                </div>

                <!-- Button Drop Down -->
                <div class="control-group">
                    <label class="control-label" for="soldBy">Sold By</label>
                    <div class="controls">
                        <div>
                            <select class="combobox" id="soldBy" data-placeholder="Select items Sold By" data-bind="options: soldBy, value: selectedSoldBy"></select>
                        </div>
                        <p class="inputError" data-bind="validationMessage: soldBy"></p>
                    </div>
                </div>

                <input type="button" class="btn" data-bind="click: filter" value="Filter Search" />
            </form>
        </div>
        <div class="span10">
            <p>Something about the search.</p>
            <div class="tabbable tabs-right">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#rA" data-toggle="tab">Tab1</a></li>
                    <li><a href="#rB" data-toggle="tab">Tab2</a></li>
                    <li><a href="#rC" data-toggle="tab">Tab3</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="rA">
                        <ul class="thumbnails">
                            <li class="span3">
                                <div class="thumbnail">
                                    <img data-src="holder.js/300x200" alt="300x200" style="width: 300px; height: 200px;" src="data:image/png;base64,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">
                                    <div class="caption">
                                        <h3>Thumbnail label</h3>
                                        <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </div>
                    <div class="tab-pane" id="rB">
                        <div data-bind="compose: 'viewmodels/checkInList'"></div>
                    </div>
                    <div class="tab-pane" id="rC">
                        <div data-bind="compose: 'viewmodels/buyList'"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Attached is the screenshot enter image description here

1 Answers

0
prem On Best Solutions

If you want seven thumbnails to be inside span10 you should include three .span3 thumbnail classes in a row because four span3 classes constitute span12 which will not be fit into span10. So if you are following span10 division keep three span3 classes in a row.

Coming to solution, include the three thumbnails into a row div followed by another row div having three thumbnails and finally followed by a div containing one thumbnail.

The structure looks like below:

<!-- 3 thumbnail div's in first row-->
<div class="span10">
 ......
 <div class="row">
   <ul class="thumbnails">
      <li class="span3">
         <div class="thumbnail">
            <img ...>
            <div class="caption">
            <h3>Thumbnail label</h3>
            <p>
                 <a href="#" class="btn btn-primary">Action</a> 
                 <a href="#"class="btn">Action</a>
            </p>
         </div>
      </li>
      <li class="span3">
         ...
      </li>
      <li class="span3">
         ...
      </li>
    </ul>
</div>
<!-- followed by 3 thumbnail div's in second row -->
<div class="row">
   <ul class="thumbnails">
      <li class="span3">
         ...
      </li>
      <li class="span3">
         ...
      </li>
      <li class="span3">
         ...
      </li>
    </ul>
<!-- followed by 1 thumbnail div's in second row -->
<div class="row">
   <ul class="thumbnails">
      <li class="span3">
         ...
      </li>
    </ul>
 </div>
</div>

Hope this helps.