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. For latest updates and blogs, follow us on Twitter. 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. Check out my other blog, Revive-n-Thrive.com

Next How to Add Tomcat 8 to Eclipse Kepler »

Previous « Test-Driven Development (TDD) Shines with Mocking

View Comments

Jay Poojara says:

September 14, 2014 at 7:15 pm

Its very helpful to me...TY so much :)
Nilton Oliveira says:

February 1, 2023 at 7:37 pm

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.
- Ajitesh Kumar says:
  
  March 4, 2023 at 7:44 am
  
  Thank you Nilton for correction. I will update the post appropriately.