CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Robert J.
Robert J.

Reputation: 2701

CSS layout items with bootstrap

I am trying to lay my items, so in the end they look like following (black lines are there just to show you that it is made out of three blocks):

enter image description here

I have tried quite a bunch of things. For example I have tried to use panel class for the two right items which worked like a charm; but the problem was with the icon...I simply could not make the div element to fill the 100% of the height and my icon was constantly aligned to the top.

Another problem I have encountered was, that I could not figure out how to setup my grid layout when I have more items. Basically in the end I am trying to have something like this in a row:

enter image description here

As you can see (I apologize for such a small picture) I would like to have three groups of these items in a row, where they also have to be aligned to the right. When I started playing with the grid system, then I either could not fit three elements properly to the row (not mentioning vertical alignment of my icon), but also the text was not fitting properly.

Any help in this matter would be more than appreciated.

Upvotes: 1

Views: 136

Answers (2)

Rocket Risa
Rocket Risa

Reputation: 383

In my opinion, the example you gave in the beginning would be coded differently than how you have it shown towards the bottom.

You can use "clearfix" or "clear float" to remove the spacing in between grid items or prevent weird wrapping. In my first example, I hid the other two columns so you can see that they will line up as you have specified in your first example.

Example of Grid Spacing:

<style>
[class*="col-"] {
    background-color: rgba(86, 61, 124, 0.15);
    border: 1px solid rgba(86, 61, 124, 0.2);
    padding-bottom: 15px;
    padding-top: 15px;
}
h1{
    text-align: center;
}
</style>

<div class="container">
    <div class="row clearfix">
        <div class="col-xs-6 col-sm-3" style="height: 150px;">
            .col-xs-6 .col-sm-3
            <br>
            Resize your viewport or check it out on your phone for an example.
        </div>
        <div class="col-xs-6 col-sm-3" style="margin-top: 22px;margin-bottom: -40px;">.col-xs-6 .col-sm-3</div>
        <div class="col-xs-6 col-sm-3" style="visibility: hidden">.col-xs-6 .col-sm-3</div>

        <div class="clearfix visible-xs"></div>
        <div class="col-xs-6 col-sm-3" style="visibility: hidden">.col-xs-6 .col-sm-3</div>

        <div class="col-xs-6 col-sm-3" style="margin-top: 22px;">.col-xs-6 .col-sm-3</div>
    </div>
</div>

For your second example picture, which would be your end solution, you actually don't line it up as a second box. It's just a different element on it's own line. I would do it like this:

== Grid Solution w/Multiple CSS Elements ==

Custom CSS

<style>
.margin-bottom-5, .margin-bottom-10, .margin-bottom-15, .margin-bottom-20, .margin-bottom-25, .margin-bottom-30, .margin-bottom-35, .margin-bottom-40, .margin-bottom-45, .margin-bottom-50, .margin-bottom-55, .margin-bottom-60, .margin-bottom-100 {
    clear: both;
}
* {
    border-radius: 0;
}
.content-boxes-in-v4 {
    overflow: hidden;
    padding: 0 10px;
}
.content-boxes-v4 h2 {
    color: #555;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: -10px;
    margin-bottom: 0px;
}
.content-boxes-v4 h3{
    color: #72c02c;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: right;
    margin-top: 0px;

}
.content-boxes-v4 a {
    color: #72c02c;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}
.box{
    margin-top: 50px;
    width: 900px;
    margin-left: auto;
    margin-right: auto;

}
.icon-lrg{
    align: left;
    font-size: 26px;
    vertical-align: middle;
    text-align: left;
    margin-right: 5px;
    margin-top: 15px;
    color: #72c02c;
}
</style>

HTML

<div class="box">
   <div class="row content-boxes-v4 content-boxes-v4-sm margin-bottom-30">
     <div class="col-md-4 md-margin-bottom-40">
       <span class="pull-left glyphicon glyphicon-tags icon-lrg"></span>
       <div class="content-boxes-in-v4">
       <h3>70,423</h3>
       <h2># of Orders Processed by Individual Owners</h2>
       <a href="#">Learn More</a>
     </div>
   </div>
   <div class="col-md-4 md-margin-bottom-40">
     <span class="pull-left glyphicon glyphicon-time icon-lrg"></span>
     <div class="content-boxes-in-v4">
       <h3>128,444</h3>
       <h2># of Orders Received By Amazon Fulfillment</h2>
       <a href="#">Learn More</a>
     </div>
   </div>
   <div class="col-md-4 md-margin-bottom-40">
     <span class="pull-left glyphicon glyphicon-shopping-cart icon-lrg">
     </span>
     <div class="content-boxes-in-v4">
     <h3>123,423</h3>
     <h2># of Orders shipped from eBay from member stores</h2>
     <a href="#">Learn More</a>
   </div>
 </div>
</div>
</div>

EDIT: If you want to make it completely responsive and not have it wider than the screen size, add the section below to your CSS or Style tag.

Responsive CSS

@media screen and (max-width: 1100px){
    .col-md-4{
        width: 100%;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
    .box {
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        align: center;
    }
    .content-boxes-in-v4 {
        max-width: 800px;
        text-align: 

    }
}

Upvotes: 2

Robert J.
Robert J.

Reputation: 2701

I managed to do it with the following code:

    <div class="row">
        <div class="col-md-12">
            <div class="col-md-4 Component_Statistics">
                <div class="col-md-2">
                    <i class="fa fa-mobile fa-4x"></i>
                </div>
                <div class="col-md-10">
                    <div class="panel panel-default no-margin-bottom">
                        <div class="panel-body">
                            55,215 min
                        </div>
                        <div class="panel-heading">
                            <p>Odpracovany cas</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

and CSS:

.Component_Statistics {
    display:flex;
    align-items:center;
    margin-top:10px;
    margin-bottom:10px;
}

.no-margin-bottom {
    margin-bottom:0;
}

Upvotes: 0

Related Questions