CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapresponsive-design
Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

Fill full screen design with twitter bootstrap

i am trying to make the screen to fully fill with the design no empty things around and also be responsive i have tried it so far.

Also want to Size of text-box and Login button.

Demo fiddle

Result Screen

Current Output

enter image description here

Upvotes: 3

Views: 13265

Answers (4)

Ryan Knell
Ryan Knell

Reputation: 6322

A shameless plug but I just released an open source project to exactly this issue. It plays nicely with bootstrap but gives you the look you are going for with only a few lines of code:

https://github.com/rknell/snappyapps-layout

<div class="sa-container">
    <div class="sa-layout horiztonal">
        <div>Sidebar (obviously you will need to style this with colours etc)</div>
        <div class="grow">Content</div>
    </div>
</div>

Upvotes: 0

BENARD Patrick
BENARD Patrick

Reputation: 30975

Following TWB 2 syntax :

replace 

<div class="container">

by

<div class="container-fluid">

http://jsfiddle.net/smefhyyr/

Upvotes: 4

MackieeE
MackieeE

Reputation: 11862

Add -fluid to your container class:

<div class="container-fluid">
</div>

Even then, Bootstrap adds 20px padding either side of the document, which of course - you can remove like below:

<style type="text/css">
   #full-width {
       padding: 0;
   } 
</style>

<div id="full-width" class="container-fluid">
</div>

Example Fiddle: http://jsfiddle.net/qFKdF/1/

Upvotes: 6

Venu immadi
Venu immadi

Reputation: 1605

hope it will help you, u need to add custom div with width:100%

.container-full {
margin: 0 auto;
width: 100%;
}

demo

Upvotes: 2

Related Questions