Twitter Bootstrap 4 : About and Contact Pages

You can use form-group and input-group classes to create a form. The has-danger class is used when there is an error in the input. The Contact Us page is as follows:

<div class="container">
  <h3>Contact Us</h3>
    <form>
      <div class="form-group input-group">
        <span class="input-group-addon"><i class="fa fa-user"></i></span>
        <input type="text" class="form-control" placeholder="Your name">
      </div>

      <div class="form-group input-group has-danger">
        <span class="input-group-addon"><i class="fa fa-at"></i></span>
        <input type="text" class="form-control form-control-danger" placeholder="Your email address">
      </div>

      <div class="form-group">
        <label for="name">Your message</label>
        <textarea class="form-control" rows="5" id="message"></textarea>
      </div>

      <div class="form-group">
        <button class="btn btn-success">
          <i class="fa fa-send-o"></i>
          Send
        </button>
      </div>
    </form>
</div>

It looks like this:

Twitter Bootstrap 4

We can use the card component to draw a nice border around the about page. The image is displayed to the left and the bio, on the right.

<div class='container-fluid'>
  <div class="card card-block bg-faded">
    <div class="media">
      <div class="media-left">
        <img class="media-object" src="../me.jpg" alt="Bala Paranj">  
      </div>
      <div class="media-body">
        <h4 class="media-heading">Bala Paranj</h4>
            Bala Paranj has a masters degree in Electrical Engineering from Wichita State University. He has been working in the software industry since 1996. He started his career as Technical Support Engineer and became a Web Developer using Perl, Java and Ruby. He is a published author of the upcoming book by Apress, TDD in Ruby.          
      </div>
    </div>    
  </div>
</div>

Twitter Bootstrap 4

In this article, you learned how to style About and Contact pages in Twitter Bootstrap 4.


Related Articles


Create your own user feedback survey