Bootstrap two column centered container with rounded corners

Question

HERE IS ZIP TO MY FULL SOURCE: https://www.zipshare.com/download/eyJhcmNoaXZlSWQiOiI3Y2MzNDc5Ny00NDhmLTQ5YzctYjQ2MS1iYTI5ZTQ0ZmI1ZDYiLCJlbWFpbCI6ImNhdWNhdUBpbmJveC5sdiJ9

I have a question about coding 2 column boxes which are written in existing template.

Basically I have a PSD which represents the template of my website, but I'm a bit stuck in getting two container boxes containing the bottom table-like list with the information (see in screenshot). Next column box is divided by 2 and I thought that I could just do something like this:

<div class="row">
  <div class="col-md-6 col-md-push-6">.col-md-6 .col-md-push-3</div>
  <div class="col-md-6 col-md-pull-6">.col-md-6 .col-md-pull-6</div>
</div>

Where should I actually start?

Answer 1

Here is the code for the 2 column and also find the screen shot attached for the below sample..

     <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <div class="panel panel-default">
                    <!-- Default panel contents -->
                    <div class="panel-heading">Panel heading</div>
                    <!-- List group -->
                    <ul class="list-group">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Morbi leo risus</li>
                        <li class="list-group-item">Porta ac consectetur ac</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                <div class="row">
                    <div class="col-md-push-12">
                        <pre class="text-justify">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzZ
                    zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzZ
                    zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzZ
                    zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzZ  </pre>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-push-12">
                        <pre class="text-justify"> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa                 
                    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa
                    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa
                    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa</pre>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                <pre class="text-justify"> 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 

        </pre>
            </div>
        </div>
    </div>

Hope this helps. Please mark is answered / if this answer is helping you solve your current issue/ problem.

Happy Learning.