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.
Table of Contents
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.
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 latest book titled as First Principles Thinking: Building winning products using first principles thinking
Latest posts by Ajitesh Kumar (see all)
- Data Lineage Concepts, Examples & Tools - August 30, 2022
- Google Colab: Read File from Local Drive - August 28, 2022
- Data Storytelling Explained with Examples - August 27, 2022
Its very helpful to me…TY so much 🙂