Bootstrap responsive not working when I resize browser

Question

I am new to bootstrap, I need to convert a static page to bootstrap responsive, Width is 980 px. so I created boot columns according to design and put every div in column with css correction. In normal view everything is fine, But when I re-size window it show like this.

http://imgur.com/zOnLh3a

I have never converted a non-responsive to responsive, please help

Note: What are media queries? Do i have to write css for 3 different sizes?

Answer 1

from twitter bootstrap take the needed template and save the file..and from that take needed js and css of bootstrap..and integrate in the site...

the media query mainly used for responsive are

/* CSS Document */
@media (max-width:1200px)
@media (min-width:992px) and (max-width:1199px)
@media (max-width:991px)
@media (min-width:991px)
@media (min-width:768px) and (max-width:991px)
@media (max-width:767px)
@media (max-width:480px)
@media only screen and (min-width: 320px)

Answer 2

Media query is missing.

        @media screen(max-width:800px) { 
            body { font-size:0.8em; }
            img { width:300px; }
        }

For the better understanding go through the link