Contact page Design how to add Bootstrap


Tags: javascript,jquery,html,css,twitter-bootstrap

Problem :

i have task in bootstrap site. i have to set contact page in bootstrap site. i have created contact page in my site. its not showing Responsive design..

i have developed code html and css. its working well. how to set design responsive design ?

its My css:

body{
                font-family:Verdana, Arial, Helvetica, sans-serif;
                font-size:14px;
            }
            p, h1, form, button{border:0; margin:0; padding:0;}
            .spacer{clear:both; height:1px;}

            /* ----------- My Form ----------- */

             @media only screen and (max-width: 500px)
    {
        .myform
        {
            width: 200px;
        }


    }


            .myform{
                margin:0 auto;
                width:566px;
                padding:14px;
            }

            /* ----------- form-wrapper ----------- */
            #form-wrapper{
                background: none repeat scroll 0 0 #C6C6C6;
                border: 2px solid #8B8B8B;
                border-radius: 10px;
                -moz-border-radius: 10px;
                -op-border-radius: 10px;
                -webkit-border-radius: 10px;
            }
            #form-wrapper h1 {
                font-weight:bold;
                margin-bottom:8px;
            }
            #form-wrapper p{
                font-size:11px;
                color:#666666;
                margin-bottom:20px;
                border-bottom:solid 1px #7E7E7E;
                padding-bottom:10px;
            }
            #form-wrapper label{
                display:block;
                font-weight:bold;
                text-align:right;
                width:193px;
                float:left;
            }
            #form-wrapper .small{
                color:#666666;
                display:block;
                font-size:11px;
                font-weight:normal;
                text-align:right;
                width:193px;
            }
            #form-wrapper input,#form-wrapper textarea{
                float:left;
                border:solid 1px #aacfe4;
                width:284px;
                margin:2px 0 20px 10px;
                border-radius: 15px;
                -moz-border-radius: 15px;
                -op-border-radius: 15px;
                -webkit-border-radius: 15px;
                font-size: 14px;
            }

            #form-wrapper input{
                height: 25px;
                padding: 4px 10px;
            }
            #form-wrapper textarea{
                padding: 10px 10px;
                overflow: auto;
            }
            /* ----------- Form Button ----------- */
            #form-wrapper button {
               background: #2c3e4a;
               background: -webkit-gradient(linear, left top, left bottom, from(#919496), to(#2c3e4a));
               background: -webkit-linear-gradient(top, #919496, #2c3e4a);
               background: -moz-linear-gradient(top, #919496, #2c3e4a);
               background: -ms-linear-gradient(top, #919496, #2c3e4a);
               background: -o-linear-gradient(top, #919496, #2c3e4a);
               padding: 5px 10px;
               -webkit-border-radius: 15px;
               -moz-border-radius: 15px;
               border-radius: 15px;
               margin-left: 315px;
               color: white;
               font-size: 20px;
               text-decoration: none;
               vertical-align: middle;
            }
            #form-wrapper button:hover {
               background: #3d4b54;
               color: #ccc;
            }

Here attach html code:

    <form id="form" name="form" method="post" action="mail.php">

        <h1>Contact Us</h1>

        <label for="name">Name
            <span class="small">Add your name</span>
        </label>
        <input type="text" name="name" placeholder="Enter your Name" id="name" />

        <label for="email">Email
            <span class="small">Add a valid address</span>
        </label>
        <input type="text" name="email" placeholder="mail@example.com" id="email" />

        <label for="phone">Phone
            <span class="small">Add valid 10 digit your mobile no.</span>
        </label>
        <input type="text" name="phone" placeholder="Enter Your Number" id="phone" />

        <label for="message">Message
            <span class="small">Write something to us</span>
        </label>
        <textarea placeholder="Write something to us" name="message" id="message"  rows="5"></textarea>

        <button type="submit">Send</button>
        <div class="spacer"></div>

    </form>
</div>

its Full site Bootstrap based site . how to set contact page and my css Responsive ? how to change it Responsive ?



Solution :

If you're using Bootstrap 3 this is how you do it, if you're using an older version refer to this Bootstrap 2.3.2

.wrapper {
  margin-top: 50px;
}
#theForm {
  background: none repeat scroll 0 0 #C6C6C6;
  border: 2px solid #8B8B8B;
  border-radius: 10px;
  padding: 20px;
  -moz-border-radius: 10px;
  -op-border-radius: 10px;
  -webkit-border-radius: 10px;
}
#helpBlock {
  margin: 3px 0;
}
button.btn-new {
  background: #2c3e4a;
  background: -webkit-gradient(linear, left top, left bottom, from(#919496), to(#2c3e4a));
  background: -webkit-linear-gradient(top, #919496, #2c3e4a);
  background: -moz-linear-gradient(top, #919496, #2c3e4a);
  background: -ms-linear-gradient(top, #919496, #2c3e4a);
  background: -o-linear-gradient(top, #919496, #2c3e4a);
  padding: 5px 10px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  color: white;
  font-size: 20px;
  text-decoration: none;
  vertical-align: middle;
}
button.btn-new:hover {
  background: #3d4b54;
  color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
  <div class="container">
    <form class="form-horizontal" name="theForm" id="theForm">
      <h1>Contact Us</h1>

      <div class="form-group">
        <label for="name" class="col-sm-2 control-label">Name</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="name" placeholder="Name" /> <span id="helpBlock" class="help-block">Add your name.</span>

        </div>
      </div>
      <div class="form-group">
        <label for="email" class="col-sm-2 control-label">EMail</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="email" placeholder="EMail" /> <span id="helpBlock" class="help-block">Add your name.</span>

        </div>
      </div>
      <div class="form-group">
        <label for="phone" class="col-sm-2 control-label">Phone</label>
        <div class="col-sm-10">
          <input type="tel" class="form-control" id="phone" placeholder="Phone" /> <span id="helpBlock" class="help-block">Add your name.</span>

        </div>
      </div>
      <div class="form-group">
        <label for="message" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
          <textarea class="form-control" placeholder="Write something to us" name="message" id="message" rows="5"></textarea> <span id="helpBlock" class="help-block">Add your name.</span>

        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-new">Send</button>
        </div>
      </div>
    </form>
  </div>
</div>


    CSS Howto..

    How to stop the latter part of javascript from being called?

    How to change label color with html and CSS without js?

    CSS parallax effect. How to change the top margin

    How do I “smarten” my HTML/CSS tables so text fits to one line (cleverly)

    How to increase padding in jQuery Columnizer, with fixed number of columns, without kicking the last column down to the next “row”

    How do you put