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.
I have been recently working in the area of Data Science and Machine Learning / Deep Learning. 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. You may follow me on Linkedin.
Latest posts by Ajitesh Kumar (see all)
- Beta Distribution Explained with Python Examples - September 24, 2020
- Bernoulli Distribution Explained with PythonExamples - September 23, 2020
- K-Nearest Neighbors Explained with Python Examples - September 22, 2020
1 Comment
Its very helpful to me…TY so much 🙂