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 make both text and image change on rollover via CSS?

    I want to apply an existing CSS style to all labels on a page. How?

    How to find out if an element is in a fixed positioned container?

    CSS: how to make a list item containing a form “submittable”?

    How to set full auto width for input tag

    CSS float: how to form the second row based on tallest DIV?

    how to many class share 1 css method in CSS

    Show icon font on image center on mouse hover

    Pesudo Class and Css Role how to apply theme

    How to properly float this image verticaly aligned?

    how to get particular words with dotted lines in HTML and CSS?

    Html and css. Social buttons how to move them?

    How to achieve a silk-screen effect (a dotted shadowy effect) on an image with javascript/jquery?

    How can I have a CSS hover affect a different tag?

    How to make long Bootstrap dropdown menus vertically scrollable?

    How do I make an `hr` with repeating small images?

    How to make a scrollable div inside of a div with a specific height

    How to combine 2 SASS functions as they do almost the same thing just using a different calculation?

    How to force inline-block wrap to new line using CSS or jQuery?

    How can you align all the cells to the left with css [closed]

    How to eliminate an annoying blue line in a border area of a hyperlink / h2 class with CSS

    How to set image height 90 % of whole page height (not viewport)

    How to stylize second level dropdown menu list

    How to solve CSS background transparency?

    CSS How to change background color of text?

    How to color path elements in SVG?

    How to inspect CSS element using chrome?

    Showing refresh button when animation is complete?

    How to trigger onClick event properly

    how to have css affect other divs in the same container