Bootstrap - How to generate this?

Question

I have been trying and trying to reproduce this, but don't seem to be getting the hang of it as I am new to bootstrap.

Here is the image I am trying to replicate:

I already have the Header - that wasn't too bad. But getting the checkmark in a nicely sized box that isn't relative width, putting a border around it, and getting the other content in that row is maddening to me :( I can't even seem to get the checkmark in there right much less the rest.

Even centering a glyphicon in a shaded box with a border (with no padding) seems hard to me right now.

My code is probably horrible, but here it is so far:

    <div class="container">
    <div class="row table-bordered">
        <div class="col-md-12">
            <div class="MyCheckBox"><img src="images/checkbox.png" /></div>
            <span class="ContractBrand">Contract</span> is verified accurate and hasn't changed since 2015-01-01.
        </div>
        <div class="col-md-2">
            VERIFIED 2015-11-06
        </div>
    </div>
</div>

My CSS is mostly background color, border color, text sizing, text color. Nothing special there.

Hopefully someone can steer me right. I feel flustered and I know it can't be that difficult.

Peter Girnus Peter Girnus · Accepted Answer · 2015-11-06T23:28:36

You just needed to rearrange some things, one problem was you already took up 12 columns so bootstrap was pushing everything to the next line. Just remember that the bootstrap framework works on a 12 column grid system.

Add a border, box-shadow, and line height 0 to get rid of extra whitespace on the bottom.

img{
  border: 1px solid #000;
  box-shadow: 0 0 5px #000;
  line-height: 0;
}

Here is a working demo

 <div class="container">
    <div class="row table-bordered">
        <div class="col-md-10">
            <div class="MyCheckBox"><img src="images/checkbox.png" />
              <span class="ContractBrand">Contract</span> is verified accurate and hasn't changed since 2015-01-01.
           </div>
        </div>
        <div class="col-md-2 pull-right">
            VERIFIED 2015-11-06
        </div>
    </div>
</div>

CODEPEN DEMO

Bootstrap - How to generate this?

1 Answers