<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <form> <div class="form-group row"> <label for="sitename" class="col-3 col-form-label">Site Name*</label> <div class="col-9"> <input id="sitename" name="sitename" placeholder="Site Name" type="text" required="required" class="form-control here"> </div> </div> <div class="form-group row"> <label for="url" class="col-3 col-form-label">Site Url*</label> <div class="col-9"> <input id="url" name="url" placeholder="http://" type="text" required="required" class="form-control here"> </div> </div> <div class="form-group row"> <label for="description" class="col-3 col-form-label">Description*</label> <div class="col-9"> <textarea id="description" name="description" cols="40" rows="3" required="required" class="form-control" aria-describedby="descriptionHelpBlock"></textarea> <span id="descriptionHelpBlock" class="form-text text-muted">170 Characters</span> </div> </div> <div class="form-group row"> <label for="Color" class="col-3 col-form-label">Color*</label> <div class="col-9"> <select multiple="multiple" id="Color" name="Color" aria-describedby="ColorHelpBlock" required="required" class="custom-select"> <option value="black">Black</option> <option value="grey">Grey</option> <option value="blue">Blue</option> <option value="brown">Brown</option> <option value="cyan">Cyan</option> <option value="magenta">Magenta</option> <option value="pink">Pink</option> <option value="green">Green</option> <option value="Yellow">Yellow</option> <option value="white">White</option> <option value=""></option> </select> <span id="ColorHelpBlock" class="form-text text-muted">You can choose multiple colors</span> </div> </div> <div class="form-group row"> <label for="categories" class="col-3 col-form-label">Categories*</label> <div class="col-9"> <select id="categories" name="categories" class="custom-select" required="required" multiple="multiple" aria-describedby="categoriesHelpBlock"> <option value="rabbit">Rabbit</option> <option value="duck">Duck</option> <option value="fish">Fish</option> </select> <span id="categoriesHelpBlock" class="form-text text-muted">You can choose Multiple</span> </div> </div> <div class="form-group row"> <label for="technology" class="col-3 col-form-label">Technology Used</label> <div class="col-9"> <input id="technology" name="technology" placeholder="Type Language" type="text" class="form-control here"> </div> </div> <div class="form-group row"> <label for="author" class="col-3 col-form-label">Author Name*</label> <div class="col-9"> <input id="author" name="author" placeholder="Author" type="text" class="form-control here" required="required"> </div> </div> <div class="form-group row"> <label for="email" class="col-3 col-form-label">Email ID*</label> <div class="col-9"> <input id="email" name="email" placeholder="Email" type="text" class="form-control here" required="required"> </div> </div> <div class="form-group row"> <label for="country" class="col-3 col-form-label">Country</label> <div class="col-9"> <input id="country" name="country" placeholder="country" type="text" required="required" class="form-control here"> </div> </div> <div class="form-group row"> <div class="offset-3 col-9"> <button name="submit" type="submit" class="btn btn-primary">Submit</button> </div> </div> </form> </div> </div> </div>