Categories: UI

Bootstrap UI TextField, Dropdown and Button – Code Examples

The article presents quick code samples on Bootstrap form and its elements such as textfield, dropdown, button etc that one could copy and paste and get started quickly. For those unaware of what is Bootstrap, following is a very brief write-up:

Bootstrap is a popular UI framework which helps one to create great UI for both Web and Mobile projects. The information and code samples could be accessed on http://getbootstrap.com/.

All I could say is that the day I came across Bootstrap, I managed to create great UIs for all of my Java projects in no time. Something that I always looked upon others to help me with. Something which seemed NOT do-able for me as I was a Java/PHP developer. As an example, I create a quick project, AgileSQM, using Bootstrap UI framework. I would have spent not more than 3-4 hours to create all the UI pages.

Code Example: Form
<form class="form-horizontal" role="form" method="post" action="<context-path-for-formhandler>">
</form>

 

Code Example: TextField
<div class="form-group">
    <label class="col-md-2 control-label">First Name</label>
    <div class="col-md-4">
        <input type="text" class="form-control" name="first_name" required>
    </div>
</div>

 

Code Example: Dropdown
<div class="form-group">
    <label class="col-md-2 control-label">Country</label>
    <div class="col-md-4">
        <select class="form-control" name="Country">
            <option value="1">India</option>
            <option value="1">UK</option>
            <option value="1">USA</option>
        </select>
    </div>
</div>

 

Code Example: Button
<div class="form-group">
     <div class="col-md-4" style="">
         <button type="submit" class="btn btn-lg btn-primary">Submit</button>
     </div>
</div>
Nidhi Rai

Nidhi has been been actively blogging in different technologies such as AI / machine learning and internet technologies. Her field of interest includes AI / ML, Java, mobile technologies, UI programming such as HTML, CSS, Javascript (Angular/ReactJS etc), open-source and other related technologies.

Share
Published by
Nidhi Rai
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,…

1 month ago

LLMs for Adaptive Learning & Personalized Education

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

1 month ago

Sparse Mixture of Experts (MoE) Models: Examples

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

2 months ago

Anxiety Disorder Detection & Machine Learning Techniques

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

2 months ago

Confounder Features & Machine Learning Models: Examples

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

2 months ago

Credit Card Fraud Detection & Machine Learning

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

2 months ago