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 do i rotate text in css

    How to use nify javascript to make round corner box? Im using but not working

    How to use css animate correctly?

    Reposition and show live results upwards

    AngularJS: How to unselect a span when selecting another

    how to make target link work giving different css properities

    How can I hide a div completely from HTML DOM?

    How do I make my images in my div change opacity on hover?

    How to insert line breaks in HTML documents using CSS

    How to change scrollbar in textarea input?

    How would I go about applying some sort of dynamic range counter to jQuery and CSS?

    How can I add the css to my project asp.net mvc? [closed]

    How to correctly switch images with javascript?

    How to use media queries for mobile devices and desktop?

    How to remove the “Dotted Border” on clicking?

    how to show images with it's original smoothness in IE

    How to fade out and fade in the divs sequentially

    How to make a fixed menu/sidebar while using position:relative?

    Bootstrap css navbar-inverse dropdown how to change color of checkbox label text

    How do I control the spacing between my child links in my CSS driven menu dropdown?

    How to dynamically remove all unwanted CSS and JS from page

    How to get Susy going with a CSS only toggle navigation

    How to get width of div using jquery

    CSS: How to set position absolute of a span inside a relative-position-div which contains [closed]

    How do I achieve this particular hover effect?

    How to generate CSS using Garden with ClojureScript (lein-garden)

    How to hack unsupported mix-blend-mode CSS property?

    How to add element to existing css class [closed]

    How to make to border-bottom line longer with CSS

    How to apply CSS only if class exists elsewhere in code?