change horizontal-form to align left (bootstrap)

0
votes

i want the contact form be aligned left. But it always aligns at center. I tried an hour to align this, now i am at the end with my knowledge.

I uploaded the website here:

http://jsfiddle.net/uetc8ed4/

<body>

    <div class="col-lg-4 col-md-5 col-sm-12" style="font-size: 2em;background-color: white; color: #f97d04; padding-left: 10px; padding-top: 5px; padding-bottom: 0px; padding-right: 10px;">
        &gt;&gt; <a id="start" class="" href="./kontakt_files/kontakt.html">Startseite</a> / 
        <a id="referenzen" href="./kontakt_files/kontakt.html">Referenzen</a> / 
        <a href="./kontakt_files/kontakt.html" id="kontakt" class="active">Kontakt</a>
    </div>



    <div style="padding-top: 55px" class="col-lg-12 col-md-12 col-sm-12">
    </div>

    <div id="content">
<div style="background-image: url(&#39;kontaktbg.jpg&#39;);background-size: cover;">
<div class="container" style="">
    <div class="row">
        <div class="col-md-12">
                <form class="form-horizontal" method="post">
                    <fieldset>
                        <h1>Kontaktieren Sie webFuchs</h1>                    
                        <div class="form-group">
                            <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
                            <div class="col-md-8">
                                <input id="lname" name="name" type="text" placeholder="Name" class="form-control" required="">
                            </div>
                        </div>

                        <div class="form-group">
                            <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-envelope-o bigicon"></i></span>
                            <div class="col-md-8">
                                <input id="email" name="email" type="text" placeholder="Email" class="form-control" required="">
                            </div>
                        </div>

                        <div class="form-group">
                            <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-phone-square bigicon"></i></span>
                            <div class="col-md-8">
                                <input id="phone" name="phone" type="text" placeholder="Telefon" class="form-control" required="">
                            </div>
                        </div>

                        <div class="form-group">
                            <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-pencil-square-o bigicon"></i></span>
                            <div class="col-md-8">
                                <textarea class="form-control" id="message" name="message" placeholder="Geben Sie hier Ihre Nachricht an mich ein. Ich antworte innerhalb von zwei Tagen." rows="7"></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-12 text-center">
                                <button type="submit" class="btn btn-primary btn-lg">Submit</button>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
    </div>
</div>
</div>
</div>

    <div id="footer" class="col-xs-12">
        <a href="./kontakt_files/kontakt.html" id="impressum">Impressum</a>
    </div>





</body>

Thank You!

4
jqueryhtmlcsstwitter-bootstrapalignment
You could change <div class="col-md-12"> to <div class="col-md-6 col-sm-6"> for example, jsfiddle.net/uetc8ed4/3 – Leandro Carracedo

4 Answers

1
votes

The culprit seems to be Bootstrap's .form-control class - part of its style is to set the width of the element to 100%. To correct this, override the style in your local CSS (should be referenced after the Bootstrap CSS file):

.form-control { width: 30%; }

... or whatever value suits your needs.

1
votes

The bootstrap class .container has a set width (depending on screen size) and auto margins (which put the content in the centre). You could override the class or not use .container. I would override container (less work)

In your CSS

#content .container{
    margin:2px;
}

See: http://jsfiddle.net/uetc8ed4/4/

1
votes

The .container css has the following:

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

Setting margin-left and margin-right to auto will cause the element to be center horizontally.

0
votes

In your case I think the form with css class form-horizontal is left align and the div inside it with css class form-group is also left align. you use col-md-offset-x class of bootstrap which is giving the space on left side.

check out this Full view

Jsfiddle

Css change made to button

.text-adjust {
    text-align: left;
 }