How to make square in Twitter Bootstrap around the item?

I am trying to make some web page as show in image .I am able to make almost 90%.But I have one issue

  • how to make square as shown in image (a square which have triangle in bottom.I know we can make square using border .but how to make triangle in that bottom triangle
  • how to make contend scrollable mean my contend it not scrolling I already use overflow:auto and scroll

)

.bg {
    background: #597A4D!important;
    width: 100%!important;
}
.nav_bar {
    background: #597A4D!important;
    border-style: none;
    height: 44px;
    border: 0px!important;
    border-radius: 0px!important;

}
.display_menu li a{
    font-size: 1.2em!important;
    color: #ffffff!important;
}

ul.display_menu li:last-child{
    background:#3C86D7;
}

.rowClass {
    display: block;
    margin-top: 3%;

}
.rowClass >div {
    padding: 3em;
    text-align: center;
}
.text_row div{
    display: block;
    border: 1px ;
    padding: auto;
    color: #ffffff;
    margin-top: 3%;

}

.rowClass span {
    display: block!important;
    color: #ffffff;
}
.logo_image{
  width: 60px;
    height: 60px;
}

.email_div label {
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}
.email_div{
    width: 50%;
    margin: auto;
}
.email_div  label {

}
.email_div input {
    background: transparent;
    border: 1px solid #3C86D7;
    display: inline;
    width: 50%;
}
.email_div button {
    display: inline;
}

.wrapper{
    overflow: auto!important;
    overflow: scroll!important;
}

Here is my plunker: http://plnkr.co/edit/G8mp53rQlF562hEkgmgT?p=preview

enter image description here

just do this

.wrapper{
    overflow: auto!important;
    overflow: scroll!important
    height: 200px;
}

or desired height instead of

.wrapper{
    overflow: auto!important;
    overflow: scroll!important;
}

it will start scrolling because it will only scroll if data is overflowing

and for shape this article may help but you don't need to use any thing just use bootstrap tooltip

Try this for the overflowing

.wrapper{
overflow: auto!important;
overflow: scroll!important
height: 250px;

}

To get your mind offset making those box with shapes,

Try this DEMO