CODEWITHSUNDEEP
csstwitter-bootstrap
Jordy
Jordy

Reputation: 150

Bootstrap ordering panels

I've a bootstrap website but when i want that the panels are close together like on my screenshot.

As you can see the blue panel is far away from the panel above.

I want that the panel is like the green one but... i don't get it.

Tried to use all the cols in one row but it does not work.

Green is good, but i need the blue one up

Here is my source code:

<div class="container">
<div class="row">
    <div class="col-md-3 col-sm-4">
        <div class="panel panel-main">
            <div class="panel-heading">
                <h3 class="panel-title">CSS Frameworks</h3>
            </div>
            <div class="panel-body">
                <ul class="list-unstyled">
                    <li><a href="">Bootstrap</a></li>
                    <li><a href="">Foundation</a></li>
                    <li><a href="">Skeleton</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="col-md-3 col-sm-4">
        <div class="panel panel-main">
            <div class="panel-heading">
                <h3 class="panel-title">Hulp bij programmeren</h3>
            </div>
            <div class="panel-body">
                <ul class="list-unstyled">
                    <li><a href="">Stackoverflow</a></li>
                    <li><a href="">W3Schools</a></li>
                    <li><a href="http://www.phptuts.nl">PHPTuts.nl</a></li>
                    <li><a href="">Codeschool</a></li>
                    <li><a href="">Lynda</a></li>
                    <li><a href="">Treehouse</a></li>
                    <li><a href="https://css-tricks.com/">CSS-Tricks</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="col-md-3 col-sm-4">
        <div class="panel panel-main">
            <div class="panel-heading">
                <h3 class="panel-title">Generators</h3>
            </div>
            <div class="panel-body">
                <ul class="list-unstyled">
                    <li><a href="https://coveloping.com/tools/border-radius-generator">Border radius generator</a></li>
                    <li><a href="https://coveloping.com/tools/css-animation-generator">CSS Animation generator</a></li>
                    <li><a href="https://coveloping.com/tools/css-box-shadow-generator">CSS Box shadow generator</a></li>
                    <li><a href="https://coveloping.com/tools/css-button-generator">CSS button generator</a></li>
                    <li><a href="https://coveloping.com/tools/css-filter-generator">CSS filter generator</a></li>
                    <li><a href="https://coveloping.com/tools/text-shadow-generator">CSS text shadow generator</a></li>
                    <li><a href="https://coveloping.com/tools/css-shapes-generator">CSS shapes generator</a></li>
                    <li><a href="https://coveloping.com/tools/google-maps-generator">Google maps generator</a></li>
                    <li><a href="https://coveloping.com/tools/hash-generator">Hash generator</a></li>
                    <li><a href="https://coveloping.com/tools/html5-responsive-form-generator">HTML5 responsive form generator</a></li>
                    <li><a href="https://coveloping.com/tools/meta-tag-generator">Meta tag generator</a></li>
                    <li><a href="https://coveloping.com/tools/pricing-tables">Pricing table generator</a></li>
                    <li><a href="https://coveloping.com/tools/qr-code-generator">QR Code generator</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="col-md-3 col-sm-4">
        <div class="panel panel-main">
            <div class="panel-heading">
                <h3 class="panel-title">Webdesign</h3>
            </div>
            <div class="panel-body">
                <ul class="list-unstyled">
                    <li><a href="http://flatuicolors.com/">Flat UI Colors</a></li>
                    <li><a href="https://coveloping.com/tools/colour-shades-generator">Color shades generator</a></li>
                    <li><a href="http://www.freeimages.com/">Freeimages</a></li>
                    <li><a href="http://dribbble.com/">Dribbble</a></li>
                    <li><a href="https://www.behance.net/">Behance</a></li>
                    <li><a href="http://line25.com/">Line25</a></li>
                    <li><a href="https://css-tricks.com/">CSS-Tricks</a></li>
                </ul>
            </div>
        </div>
    </div>


    <div class="col-md-3 col-sm-4">
        <div class="panel panel-main">
            <div class="panel-heading">
                <h3 class="panel-title">Bootstrap</h3>
            </div>
            <div class="panel-body">
                <ul class="list-unstyled">
                    <li><a href="http://getbootstrap.com/getting-started/" target="blank">Download bootstrap</a></li>
                    <li><a href="http://getbootstrap.com/customize/" target="blank">Customize and download</a></li>
                    <li><a href="http://getbootstrap.com/css/" target="blank">CSS</a></li>
                    <li><a href="http://getbootstrap.com/components/" target="blank">Components</a></li>
                    <li><a href="http://getbootstrap.com/javascript/" target="blank">JavaScript</a></li>
                    <li><a href="http://www.w3schools.com/bootstrap/" target="blank">Bootstrap W3schools</a></li>

                </ul>
            </div>
        </div>
    </div>

    <div class="col-md-3 col-sm-4">
        <div class="panel panel-main">
            <div class="panel-heading">
                <h3 class="panel-title">Bootstrap</h3>
            </div>
            <div class="panel-body">
                <ul class="list-unstyled">
                    <li><a href="http://getbootstrap.com/getting-started/" target="blank">Download bootstrap</a></li>
                    <li><a href="http://getbootstrap.com/customize/" target="blank">Customize and download</a></li>
                    <li><a href="http://getbootstrap.com/css/" target="blank">CSS</a></li>
                    <li><a href="http://getbootstrap.com/components/" target="blank">Components</a></li>
                    <li><a href="http://getbootstrap.com/javascript/" target="blank">JavaScript</a></li>
                    <li><a href="http://www.w3schools.com/bootstrap/" target="blank">Bootstrap W3schools</a></li>

                </ul>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Views: 373

Answers (1)

dfsq
dfsq

Reputation: 193261

Just put the last panel block into the first .col-md-3.col-sm-4:

<div class="col-md-3 col-sm-4">
    <div class="panel panel-main">
        <div class="panel-heading">
            <h3 class="panel-title">CSS Frameworks</h3>
        </div>
        <div class="panel-body">
            <ul class="list-unstyled">
                <li>
                    <a href="">Bootstrap</a>
                </li>
                <!-- ... -->
            </ul>
        </div>
    </div>

    <div class="panel panel-main">
        <div class="panel-heading">
            <h3 class="panel-title">Bootstrap</h3>
        </div>
        <div class="panel-body">
            <ul class="list-unstyled">
                <li>
                    <a href="http://getbootstrap.com/getting-started/" target="blank">Download bootstrap</a>
                </li>
                <!-- ... -->
            </ul>
        </div>
    </div>
</div>

Demo: http://plnkr.co/edit/VIzi52ziUDbm9vHuIfsk?p=preview

Upvotes: 1

Related Questions