Home/ Questions/Q 8788829
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T22:14:05+00:00

I am using twitter bootstrap and I would like to create a grid that

  • 0

I am using twitter bootstrap and I would like to create a grid that will shrink according to the width of the screen and move it cells down. Right now I managed to create a grid like this: http://jsfiddle.net/D2RLR/3179/.

The problem is that the grid is not aligned very well and if I shrink the window the images are getting smaller instead of moving to the next row.

Is there any well knows practice to do that?

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div id="search" class="well form-search search">
                <input id="search-term" type="text" placeholder="Type search term">
                <button id="search-button" class="btn btn-primary">Search</button>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row-fluid">
        <div id="grid" class="span9">
            <div class="span3">
                <img class="img-polaroid" src="http://lh5.googleusercontent.com/public/zSxr-JuTje4AqFmN8zOFNcRaRm7L_QxmCaqzYSdnzHfKSHCIeM9G5NHKsdNy8BwnMLwhYHI4h_G6gNXA3c_3Zc8ggsXtPeG-fhk_IALFoH0b1HPrdxsBIszYLsUye_lvyffBsdxn_hfF9Ktng7BAgWjT56mDYBqpZXX25BC-odQ2mn8O" alt=""/>
            </div>
            <div class="span3">
                <img class="img-polaroid" src="http://lh3.googleusercontent.com/public/tN2kf46FC7y_IEd2vzJz9v4PhVsMFjV4scZovvLYRVTMk8OdYRBBlM1l263Nuak7rQVQHT107NfwWsZQ-9_MFoiOXKozErla4banQF51QyT5igHT-QKo6cRmUiTvVbQVkjgRYIh8sPutpY-XTrG8nEludMnt6GTuOg" alt=""/>
            </div>
            <div class="span3">
                <img class="img-polaroid" src="http://lh6.googleusercontent.com/public/AF-Zvxnq21ZQFZNwC4_XQnwN9-sudTFlohx7d7llv11R_60jpmPNhW679uLMzcShWd73vNAHhuTYZHFJF3rsCh7EVczcRnm-cd6KcrLDJEWWceyBUePnOPDerPf_5sovWzACyipV4JMf4k9-HomEbOwYIrwa0SwoBDXc1mwhSxVWreCs8DLNpeMRx-o" alt=""/>
            </div>
            <div class="span3">
                <img class="img-polaroid" src="http://lh3.googleusercontent.com/public/IYgOn9vXVD4zHB1d67KpX9--z0NDR0URCxEPTA32KFWTSDn9l2f7XR3tt0TTRAekThgUOCH0f0dGJn5ZLh3dUAXh1IDDrlbFJNmxGeVZt_eTTIG4YB23pXSfDH1Cx5OhNoEiaCCz4QAr-e8c" alt=""/>
            </div>
            <div class="span3">
                <img class="img-polaroid" src="http://lh3.googleusercontent.com/public/QDiY5hfLbDwEbvJmAgrcX4vRURGFEMBO6V66-EW_4YJGW5xJNCSLwwCltUB0YT1f0QMkUeztQZaI07KcsnxqEaaByAIq-ihvwPxg4B6wJuhEDjBIh1Bu5Txz0NBijb9y1dRdnSbtPImzk2HoSAcHUqfphDJwE1gfmErGtT0Apw" alt=""/>
            </div>

            <div class="span3">
                <img class="img-polaroid" src="http://lh6.googleusercontent.com/public/jIGAV-2KIt3YoKQ7zDtJN44qj6puwAk5J_GVCJCRnTTOB_idlMB-cyI9d0KTy-FL965GcOJbBeH1C8ros9FMhGxQW6ZToyr-qOYYx18FomndcKpC8TxsJAMpaz9IsT48WGfe_OgsKf9heJoEGhHGTw" alt=""/>
            </div>
        </div>
        <div id="term-history" class="span3">
            <h2>Search history:</h2>
            <ul>
                <li>
                    <a href="javascript:void(0);">camera</a>
                </li>
            </ul>
        </div>
    </div>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Change the container-fluid and row-fluid classes to container and row. Then include the bootstrap-responsive.css file. Work from there. Fluid and responsive is not the same thing, although they’re related and often used together. Fluid layouts adjust their widths when resized, which seems to be not what you want. Responsive layouts generally adjust their layout when resized.

    http://jsfiddle.net/tylergreen/9v296/

    You will still probably want to mess with the layout a bit, but the functionality is there.

    • 0