javascript - Contact page Design how to add Bootstrap -
i have task in bootstrap site. have set contact page in bootstrap site. have created contact page in site. not showing responsive design..
i have developed code html , css. working well. how set design responsive design ?
its 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;} /* ----------- form ----------- */ @media screen , (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 name</span> </label> <input type="text" name="name" placeholder="enter name" id="name" /> <label for="email">email <span class="small">add 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 mobile no.</span> </label> <input type="text" name="phone" placeholder="enter number" id="phone" /> <label for="message">message <span class="small">write us</span> </label> <textarea placeholder="write 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 set contact page , css responsive ? how change responsive ?
if you're using bootstrap 3 how it, if you're using older version refer 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 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 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 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 us" name="message" id="message" rows="5"></textarea> <span id="helpblock" class="help-block">add 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>
Comments
Post a Comment