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>
      <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 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 class="form-group">
        <label for="name">Your message</label>
        <textarea class="form-control" rows="5" id="message"></textarea>

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

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 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.          

Twitter Bootstrap 4

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

Related Articles

Ace the Technical Interview

  • Easily find the gaps in your knowledge
  • Get customized lessons based on where you are
  • Take consistent action everyday
  • Builtin accountability to keep you on track
  • You will solve bigger problems over time
  • Get the job of your dreams

Take the 30 Day Coding Skills Challenge

Gain confidence to attend the interview

No spam ever. Unsubscribe anytime.