CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
iJup
iJup

Reputation: 281

Centering <div>s on a page by Bootstrap colums

I have some jQuery script to show a contact form by clicking on Get in contact. Both, the <div> elements of the Get in contact-button and the <div> elements of the contact form are wrapped in <div class=" col-md-12 text-center">, still the column-ratio is not like I would: resp. 3-6-3 and 2-8-2. Both, Get in contact and the contact form are just placed somewhere to the left.

How to center both in the very middle? Thanks in advance!

Codepen (changing the zoom fit it is not anymore in the center)

HTML: 

<body>
 <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JFP</title>
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
        <link rel="stylesheet" href="/static/main.css" >
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="/static/app.js"></script>
</head>


<div class="supporting">
    <div class="container" style="min-height:300px;">
      <div class="col-md-12 text-center">
        <div class="col-md-3 text-center"></div>
            <div class="col-md-6 text-center">
                <img src="http://rexkirby.com/kirbyandson/images/email.svg">
                <h2>Contact</h2>
                <p></p>
                <div class="contact-form">
                    <b>Get in contact</b>
                </div>  

              <div class="col-md-3 text-center"></div>
        </div>
        </div>
    </div>
</div>


<div class="contactform" style="display:none">
    <div class="container">
        <div class=" col-md-12 text-center">
            <div class="col-md-2">
            </div>
            <div class="col-md-8 text-center">
                <form class="form" id="form1">

                <p class="name">
                <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
                </p>

                <p class="email">
                <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
                </p>

                <p class="text">
                <textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
                </p>

                <div class="row col text-center">
                <div class="submit">
                <input type="submit" value="SEND" id="button-blue"/>
                <div class="ease"></div>
                </div>
                </div>
                </form>
            </div>
            <div class="col-md-2">
            </div>
        </div>
    </div>
</div>
</body>

CSS: 

.supporting {
    padding-top: 80px;
    padding-bottom: 100px;

}

.supporting .col-md-6 {
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    margin-bottom: 64px;
    padding: 0px 0px;
}

.supporting img {
    height: 40px;
}

.supporting .col-md-6 h1 {
    font-size: 35px;
    padding-bottom: 48px;
    margin-top: 49px;
}

.supporting h2 {
    font-weight: 600;
    font-size: 23px;
    text-transform: uppercase;
    padding: 0 50px;
    margin-bottom: 60px;
}

.supporting p {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}

.supporting a {
    font-size: 10px;
    color: rgb(51,51,51);
    font-weight: 600;
    border: 1px solid rgb(51,51,51);
    padding: 15px 50px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    position: relative;
}

.supporting b {
    font-size: 10px;
    color: rgb(51,51,51);
    font-weight: 600;
    border: 1px solid rgb(51,51,51);
    padding: 15px 39px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    position: relative;
}

.supporting c {
    font-size: 15px;
    color: rgb(51,51,51);
}


.clearfix {
    clear: both;
}

#feedback-page{
    text-align:center;
}

#form-main{
    width:100%;
    float:middle;
    padding-top:0px;
}

#form-div {
    background-color:rgba(72,72,72,0.4);
    padding-left:35px;
    padding-right:35px;
    padding-top:35px;
    padding-bottom:50px;
    width: 450px;
    float: middle;
    left: 50%;
    position: absolute;
    margin-top:30px;
    margin-left: -260px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

.feedback-input {
    color:#3c3c3c;
    font-family: 'Open Sans', sans-serif;
    font-weight:500;
    font-size: 18px;
    border-radius: 0;
    line-height: 22px;
    background-color: rgb(245,245,245);
    padding: 13px 13px 13px 54px;
    margin-bottom: 10px;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    border: 3px solid rgba(0,0,0,0);
}

.feedback-input:focus{
    background: #fff;
    box-shadow: 0;
    border: 3px solid rgb(42,186,214);
    color: rgb(51,51,51);
    outline: none;
    padding: 13px 13px 13px 54px;
}

.focused{
    color:#30aed6;
    border:#30aed6 solid 3px;
}

#name{
    background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
    background-size: 30px 30px;
    background-position: 11px 8px;
    background-repeat: no-repeat;
}

#name:focus{
    background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
    background-size: 30px 30px;
    background-position: 8px 5px;
    background-position: 11px 8px;
    background-repeat: no-repeat;
}

#email{
    background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
    background-size: 30px 30px;
    background-position: 11px 8px;
    background-repeat: no-repeat;
}

#email:focus{
    background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
    background-size: 30px 30px;
    background-position: 11px 8px;
    background-repeat: no-repeat;
}

#comment{
    background-image: url(https://s3.amazonaws.com/codecademy-content/projects/broadway/design.svg);
    background-size: 30px 30px;
    background-position: 11px 8px;
    background-repeat: no-repeat;
}

textarea {
    width: 100%;
    height: 150px;
    line-height: 150%;
    resize:vertical;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
    background-color:white;
}

#button-blue{
    font-family: 'Open Sans', sans-serif;
    float:middle;
    width: 25%;
    border: rgb(51,51,51) solid 1px;
    cursor:pointer;
    background-color: rgb(255,255,255);
    color: rgb(51,51,51);
    font-size: 16px;
    padding-top:12px;
    padding-bottom:12px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    margin-top:-4px;
    font-weight:600;
    letter-spacing: 1.1px;
}

#button-blue:hover{
    color: rgb(51,51,51);
}

.submit:hover {
    rgb(51,51,51);
}

.ease {
    width: 0px;
    height: 74px;
    background-color: #fbfbfb;
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
    -o-transition: .3s ease;
    -ms-transition: .3s ease;
    transition: .3s ease;
}

.submit:hover .ease{
    width:100%;
    background-color:white;
}

JS: 

$(document).ready(function() {
        $(".contact-form").click(function() {
            $(".contactform").slideToggle(300);
        });
});

$(document).ready(function() {
    $(".contact-form").on("click", function() {
            $("body").animate({"scrollTop": window.scrollY+300}, 700);
                return false;
    });
});

Upvotes: 0

Views: 51

Answers (1)

AngularJR
AngularJR

Reputation: 2762

iJup Hi there. You are using empty blocks to try to space the main block content in the middle here (2-8-2). Rather doing that, you should try using something like this...
<div class="col-xs-8 col-xs-offset-2">

Or,

Have a look at this Fiddle, What I use here to center both blocks for your button and the form is this... 

.centerthis {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;  
}

You will see that I removed those spacer div blocks in your code.
Hope this helps. 

<div class="contactform" style="display:none">
    <div class="container">
        <div class="row text-center">

            <div class="col-md-8 text-center centerthis">
                <form class="form" id="form1">

                <p class="name">
                <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
                </p>

                <p class="email">
                <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
                </p>

                <p class="text">
                <textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
                </p>

                <div class="row text-center">
                <div class="submit">
                <input type="submit" value="SEND" id="button-blue"/>
                <div class="ease"></div>
                </div>
                </div>
                </form>
            </div>

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

Upvotes: 1

Related Questions