Twitter Bootstrap Question posted in

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

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    Try this for the overflowing

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

    }

    to get an idea to make those box with shapes,
    See this DEMO

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search