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 put six divs in two rows

    How to make outer columns same height with nested bootstrap grids

    Foundation 6: How to set .is-open-right translateX value with JavaScript

    how to apply css to extjs grid emptytext?

    There is a little gap between the image and the overlay, I do not know how to fix it [duplicate]

    How to stop divs moving in browser when zoom in/out?

    How can I set a border in alignment with other borders

    CSS How to align two DIVs on the same line without using floats

    How to apply effect just to background image and not text

    How to autoprefix css files generated by less, in Webstorm?

    Text Underline Showing Underline

    How do I display a DIV if the current version of the program is greater than the version I have?

    Anyone know how to create CSS rectangle with one corner chopped off?

    how to dynamically move list items inside a DIV to get proper arrangement?

    How to dynamically insert css vendor prefixes using jquery

    GridView Non-Visible Row Showing up in Empty Data Row

    How to pause a Spinkit animation?

    How to use float and margin together?

    How to add another line on overflow in a text input?

    How to vertically align text over an image

    how do I override user agent — using buttons from angularjs

    How to make a div fill up remaining horizontal space

    how to take common factors out from css where it is separated by comma (,) [duplicate]

    How to build those rectangular with picture and text css bootsrap? [closed]

    How to make responsive popup div?

    How to make text box scroll vertical in overflow css html?

    How to find resources(CSS , JS Etc) that are blocking in Chrome

    How to make a background with 2 gradients in CSS

    How can i increase the round corner button width dynamically depends on the text size in CSS?

    How do URL fragment (the #stuff) interacts with CSS?