Question

Can anyone help me to implement transparent square fluid with bootstrap?(https://twitter.com/ladygaga)

also I’d like to know how to implement rounded square in that transparent square.
Thanks in advance!!

Answer 1

It seems they’re just using a semitransparent background image on that div to get the glassy texture. The image or background-color(such as RGBA(0,0,0,0.2)) would need to have it’s alpha channel set to something other than 100%. Their CSS looks like this.

.wrapper, .wrapper-narrow, .wrapper-permalink {
    position: relative;
    width: 837px;
    min-height: 100%;
    padding: 54px 14px 15px;
    margin: 0 auto;
    background: url(../img/wash-white-30.png);
}

Assuming you were going to use a similar approach. With a ‘wrapper’ class providing the transparent background, and a ‘whitebg’ class providing the solid white background:

<div class="container-fluid wrapper">
  <div class="row">
    <div class="span2 well whitebg">
      content..
    </div>
  </div>
</div>

with this CSS to give you what you need for your class:

.whitebg {
  background-color:white;
}