Styling form in bootstrap 3

Question

How to design form which should be aligned in the center for (desktop,mobile,tablet)

and Add border like in the image attached

Jsfiddle : http://jsfiddle.net/rc8fypc3/

Code:

   <div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">

            <p class="main_heading">Start building your project!</p>

            <p class="sub_heading">
                Add a story, picture and other important details
            </p>

                    <form class="form-horizontal" role="form">
        <fieldset>

          <div class="form-group">
            <label class="col-sm-3 control-label">Project title</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" name="project_title" id="project_title" placeholder="Enter Project Title">
              <p>Your project title and blurb should be simple, specific, and memorable. Our search tools run through these sections of your project, so be sure to incorporate any key words here! 

    These words will help people find your project, so choose them wisely! Your name will be searchable too.</p>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">Story</label>
            <div class="col-sm-9">
              <p>Use your story to share on your as well as your FRIEND AND FANS' Facebook wall!</p>
              <textarea class="form-control" name="story" id="story" placeholder="Enter Story"></textarea>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">Picture</label>
            <div class="col-sm-9">
              <input type="file" class="form-control" name="picture" id="picture">
            </div>
          </div>

         <div class="form-group">
            <label class="col-sm-3 control-label">Video</label>
            <div class="col-sm-9">
              <input type="file" class="form-control" name="video" id="video">
              <p>Have fun - add a video. A video have a much higher chance of success. The video will be shared on your as well as your FRIEND AND FANS' Facebook Wall!</p>
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-3 control-label">Short blurb</label>
            <div class="col-sm-9">
              <textarea class="form-control" name="short_blurb" id="short_blurb"></textarea>
              <p>If you had to describe what you're doing in one tweet, how would you do it?</p>
            </div>
          </div>


          <div class="form-group">
            <div class="col-sm-offset-3 col-sm-9">
              <button type="button" class="btn btn-success">Submit</button>
            </div>
          </div>
        </fieldset>
      </form>



                    <!------------>

                </div>
            </div>
    </div>

This is the sample design , attached below

Answer 1

You can just add this to your CSS and add 'block'to the div class that also includes çontainer'.

.Block {
border:orange solid 2px;
padding: 1% 1% 1% 1%;
-webkit-border-radius: 5px 5px 5px 5px ;
-moz-border-radius: 5px 5px 5px 5px ;
border-radius: 5px 5px 5px 5px ;
overflow: visible;

}

<div class="container block ">

Answer 2

You can style the .container and .form-group

.container {
  border: 1px solid #D8D8D8;
  border-radius: 3px;
}

.form-group 
{ 
  background-color: #F2F2F2; 
  padding: 10px 0;
}

Demo