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
Ajitesh has been recently working in the area of AI and machine learning. Currently, his research area includes Safe & Quality AI. In addition, he is also passionate about various different technologies including programming languages such as Java/JEE, Javascript and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data etc.
He has also authored the book, Building Web Apps with Spring 5 and Angular.
He has also authored the book, Building Web Apps with Spring 5 and Angular.
Latest posts by Ajitesh Kumar (see all)
- Python – How to Create Dataframe using Numpy Array - December 15, 2019
- Hypergeometric Distribution Explained with 10+ Examples - December 14, 2019
- Binomial Distribution with Python Code Examples - December 14, 2019
1 Comment
Its very helpful to me…TY so much 🙂