<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Post Create</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="title">Title</label> <div class="col-md-4"> <input id="title" name="title" type="text" placeholder="Title" class="form-control input-md" required=""> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="description">Description</label> <div class="col-md-4"> <textarea class="form-control" id="description" name="description"></textarea> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="key">Key</label> <div class="col-md-4"> <input id="key" name="key" type="text" placeholder="Key" class="form-control input-md"> </div> </div> <!-- File Button --> <div class="form-group"> <label class="col-md-4 control-label" for="image">Image</label> <div class="col-md-4"> <input id="image" name="image" class="input-file" type="file"> </div> </div> <!-- Appended Input--> <div class="form-group"> <label class="col-md-4 control-label" for="date">Date</label> <div class="col-md-4"> <div class="input-group"> <input id="date" name="date" class="form-control" placeholder="11.03.2022 14:52" type="text"> <span class="input-group-addon">Date</span> </div> </div> </div> <!-- Select Multiple --> <div class="form-group"> <label class="col-md-4 control-label" for="category">Category Select Multiple</label> <div class="col-md-4"> <select id="category" name="category" class="form-control" multiple="multiple"> <option value="1">Category 1</option> <option value="2">Category 2</option> <option value="3">Category 3</option> <option value="4">Category 4</option> </select> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="radioIsActive">IsActive</label> <div class="col-md-4"> <div class="radio"> <label for="radioIsActive-0"> <input type="radio" name="radioIsActive" id="radioIsActive-0" value="1" checked="checked"> True </label> </div> <div class="radio"> <label for="radioIsActive-1"> <input type="radio" name="radioIsActive" id="radioIsActive-1" value="0"> False </label> </div> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="content">Content</label> <div class="col-md-4"> <textarea class="form-control" id="content" name="content"></textarea> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="postType">Post Type</label> <div class="col-md-4"> <select id="postType" name="postType" class="form-control"> <option value="1">Post</option> <option value="2">Page</option> <option value="3">...</option> </select> </div> </div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for="btnSubmit"></label> <div class="col-md-4"> <button id="btnSubmit" name="btnSubmit" class="btn btn-success">Create</button> </div> </div> </fieldset> </form>