CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Yash
Yash

Reputation: 256

how to wrap form elements within the div tag(with background-color) using twitter bootstrap and CSS

I am new to twitter bootstrap. I was trying to include all the form elements inside the div tag and fill it with some background-color in CSS and align it properly and this is working fine but I am loosing the responsive nature of the div tag along with form elements. can anyone help me with this?

The following is my index.html page.

<body>
 <div class="container">
   <div class="row">
      <div class="col-md-12 col-xs-12" id="bg">
        <div class="row">
            <div class="col-md-9 col-xs-9 " id="main">
                <form class="form-horizontal" name="submit" role="form" action="create_leads.php" method="post">
                    <div class="form-group">
                        <label for="lname"> Name:</label>
                        <input type="text" name="lname" class="form-control" id="focusedInput" placeholder="Please enter your name" required /> 
                    </div>
                    <div class="form-group">
                        <label for="mobile"> phone-number: </label>
                        <input type="text" name="mobile" class="form-control" placeholder="please enter your phone number" required/>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>
</div>
</body>

The following is my CSS code

body{

        background: gray url('../images/bg8.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-position: fixed;
        background-size: 100% auto;

 }

 #main  {
        position:absolute;
        border: 5px solid gray;
        background-color: gray;
        opacity: 0.8;
        margin: 200px 200px 200px 200px;
    }

Upvotes: 0

Views: 1274

Answers (2)

Wild Beard
Wild Beard

Reputation: 2927

If you're trying to center the login inside the very center of the page here's an easy example on how to do it.

Fiddle

You didn't need to embed the column inside an embedded row but just use the first one. You can tinker with the col width and col-md-offset to get the width of your box the way you want it.

Upvotes: 1

Rob Scott
Rob Scott

Reputation: 8049

If I understand what you're asking, you're trying to center the form in the middle of the page. You can use the "transform" technique. Don't forget to add prefixes ('-webkit-, etc').

#main {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

You'd want to get rid of all the div's surrounding the "#main" element, since bootstrap won't really care about "container" and "row", etc when using absolute positioning and nothing else is on the page. The "transform" CSS will literally take the "#main" and put it in the center of the page, kind of like a modal.

<body>
    <div id="main" class="col-md-9">
        // your form
    </div>
</body>

Additionally, since you're new to bootstrap, if you have the class "col-md-9", there's no reason to add "col-xs-9" since on that viewport width it cannot use the "col-md-9"'s width. You can just leave it as only "col-md-9" only, and remove the "col-xs-9".

Note: the "transform" CSS only works for modern browsers.

Edit:

You actually do need the "row" and container class applied since you have floating elements inside the "#main" element, and therefore it will not clear for padding, margins, etc. The "container" class will give you that padding on the edges that you need for mobile views

<body>
    <div class="container">
        <div class="row">
            <div id="main" class="col-md-9">
                // your form
            </div>
        </div>
    </div>
</body>

Upvotes: 0

Related Questions