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:
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>
In this article, you learned how to style About and Contact pages in Twitter Bootstrap 4.
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