Categories: Web

How to Get Started with Bootstrap (UI) & Eclipse

The article represents steps required to get started with Bootstrap (UI) with Eclipse IDE while working with a dynamic web project involving JSP, Servlets etc. Even before we go ahead, you may be wondering on why should you care about adding bootstrap to Eclipse.
Why BootStrap?

The interesting thing about bootstrap is that it helps you to get started as quickly as possible with cool looking UIs that can be created out-of-box HTML/CSS code snippets. As a matter of fact of fact, I landed up with Bootstrap after I was searching for some rapid Java UI builder for Eclipse using which I could easily build fancy UIs while focusing on server side coding. This is where Bootstrap fit the bill. Following are other key Eclipse plugins evaluated:

  • GWT
  • WindowBuilder Pro

 

Steps to Get Started with Bootstrap & Eclipse
  • Download Bootstrap from http://getbootstrap.com/
  • Create a dynamic web project in eclipse. Make sure that this dynamic web project could be run on the server.
  • Under WebContent folder, create a bootstrap folder.
  • Import files such as following from downloaded Bootstrap resources into the newly created folder, “bootstrap” in step 3.
    • css folder consisting of bootstrap.min.css
    • js consisting of bootstrap.min.js
    • img consisting of images
  • Create an index.jsp and put following within <head> tag
    <link href=”bootstrap/css/bootstrap.min.css” rel=”stylesheet” type=”text/css” />
    <script type=”text/javascript” src=”bootstrap/js/bootstrap.min.js”></script>
  • Take a simplistic code snippet such as following from Bootstrap website (http://getbootstrap.com/css/#forms ) and paste it within <body> tag.
    <div class=”container”>
    <form role=”form”>
    <div class=”form-group”>
    <label for=”exampleInputEmail1″>Email address</label>
    <input type=”email” class=”form-control” id=”exampleInputEmail1″ placeholder=”Enter email”>
    </div>
    <div class=”form-group”>
    <label for=”exampleInputPassword1″>Password</label>
    <input type=”password” class=”form-control” id=”exampleInputPassword1″ placeholder=”Password”>
    </div>
    <div class=”form-group”>
    <label for=”exampleInputFile”>File input</label>
    <input type=”file” id=”exampleInputFile”>
    <p class=”help-block”>Example block-level help text here.</p>
    </div>
    <div class=”checkbox”>
    <label>
    <input type=”checkbox”> Check me out
    </label>
    </div>
    <button type=”submit” class=”btn btn-default”>Submit</button>
    </form>
    </div>
  • Check the changes on the server.
Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.

View Comments

  • Correcting the post
    I didn't understand why, but in my project it didn't work.
    I had to do it this way:
    I created an include.jsp file and inside the tag insert:

    <style type="text/css">
    <%@include file="bootstrap/css/bootstrap.min.css" %>
    <%@include file="bootstrap/js/bootstrap.min.js" %>
    </style>

    And on each page of the project, insert the line inside the tag:

    <jsp:include page="/include.jsp" />

    It is working correctly.

Share
Published by
Ajitesh Kumar
Tags: UI

Recent Posts

Agentic Reasoning Design Patterns in AI: Examples

In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…

3 weeks ago

LLMs for Adaptive Learning & Personalized Education

Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…

4 weeks ago

Sparse Mixture of Experts (MoE) Models: Examples

With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…

1 month ago

Anxiety Disorder Detection & Machine Learning Techniques

Anxiety is a common mental health condition that affects millions of people around the world.…

1 month ago

Confounder Features & Machine Learning Models: Examples

In machine learning, confounder features or variables can significantly affect the accuracy and validity of…

1 month ago

Credit Card Fraud Detection & Machine Learning

Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…

1 month ago