Enhance your input text form with a stylish button using Bootstrap

Question

Enhance your input text form with a stylish button using Bootstrap

This is the code snippet I am currently working on:

        <h2>Workout Selector</h1>
        <div class="form-group">
            <label for="workout-name">Search by Keywords (Comma Separated):</label>
            <input type="text" class="form-control" id="workout-keywords">
        </div>

When rendered, it looks like this: https://i.sstatic.net/WKHDK.jpg

However, I would like to replace the red box with a button instead: https://i.sstatic.net/Cbplv.jpg

(What steps should I take to make this adjustment?)

Edit: It should not be the submit button

css twitter-bootstrap button

Answer 1

Answer №1

check out this code and customize the color scheme to your liking.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="col-lg-6">
<div class="input-group">     
  <input type="text" class="form-control" placeholder="Search for...">
   <span class="input-group-btn">
    <button class="btn btn-secondary" type="button">Go!</button>
  </span>
</div>
</div>

ref :

Answer 2

check out this code and customize the color scheme to your liking.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="col-lg-6">
<div class="input-group">     
  <input type="text" class="form-control" placeholder="Search for...">
   <span class="input-group-btn">
    <button class="btn btn-secondary" type="button">Go!</button>
  </span>
</div>
</div>

ref :

Answer 3

Answer №2

One way to approach this could be using columns, like so:

    <div class="form-group">
        <div class="col-md-12">
          <label for="workout-name">Search by Keywords (Comma Separated):</label>
        </div>
        <div class="col-md-8">
          <input type="text" class="form-control" id="workout-keywords">
        </div>
        <div class="col-md 4">
          <span class="btn btn-default">Button</span>
        </div>
    </div>

Answer 4

One way to approach this could be using columns, like so:

    <div class="form-group">
        <div class="col-md-12">
          <label for="workout-name">Search by Keywords (Comma Separated):</label>
        </div>
        <div class="col-md-8">
          <input type="text" class="form-control" id="workout-keywords">
        </div>
        <div class="col-md 4">
          <span class="btn btn-default">Button</span>
        </div>
    </div>

Answer 5

Answer №3

To ensure the button is positioned above the input field and prevent the text from being hidden by the button, you can utilize the CSS property position:absolute along with padding-right for the input field. Here's an example of how you can achieve this:

<h2>Exercise Finder</h2>
<div class="input-group">
   <label for="exercise-search">Search Exercises (Separated by Commas):</label>
   <input type="text" class="form-control" id="exercise-input">
    <button type="submit">Search</button>
 </div>

.input-group {
  position: relative;
  padding: 0;
  
  input {
    padding-right: 70px;
    height: 30px;
    line-height: 30px;
    width: 100%;
  }
  
  button {
    position: absolute;
    right: 0;
    top: 0;
    width: 70px;
    line-height: 30px;
    text-align: center;
    z-index: 500;
  }
}

Answer 6

To ensure the button is positioned above the input field and prevent the text from being hidden by the button, you can utilize the CSS property position:absolute along with padding-right for the input field. Here's an example of how you can achieve this:

<h2>Exercise Finder</h2>
<div class="input-group">
   <label for="exercise-search">Search Exercises (Separated by Commas):</label>
   <input type="text" class="form-control" id="exercise-input">
    <button type="submit">Search</button>
 </div>

.input-group {
  position: relative;
  padding: 0;
  
  input {
    padding-right: 70px;
    height: 30px;
    line-height: 30px;
    width: 100%;
  }
  
  button {
    position: absolute;
    right: 0;
    top: 0;
    width: 70px;
    line-height: 30px;
    text-align: center;
    z-index: 500;
  }
}

Answer 7

Answer №4

If you're looking to achieve a specific layout with display flex and input-group, there's a neat trick you can use with the input-group-addon class/element. Here's how you can do it:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline" style="width:300px;margin:10px;">
  <div class="form-group">
    <label class="sr-only" for="test">input here something</label>
    <div class="input-group" style="display:flex;">
      <input type="text" class="form-control" id="test" placeholder="input here something">
        <button type="button" class="input-group-addon btn btn-primary" style="width:50px;">go</button>
    </div>
  </div>
</form>

Give this a try and see if it helps!

Answer 8

If you're looking to achieve a specific layout with display flex and input-group, there's a neat trick you can use with the input-group-addon class/element. Here's how you can do it:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline" style="width:300px;margin:10px;">
  <div class="form-group">
    <label class="sr-only" for="test">input here something</label>
    <div class="input-group" style="display:flex;">
      <input type="text" class="form-control" id="test" placeholder="input here something">
        <button type="button" class="input-group-addon btn btn-primary" style="width:50px;">go</button>
    </div>
  </div>
</form>

Give this a try and see if it helps!

Enhance your input text form with a stylish button using Bootstrap

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Can you have two navigation bars and a picture all in one Bootstrap layout?

Make sure to load the gif image before any other images are loaded from the css

The DIV element fails to encompass all of its content

Tips for creating a mobile-friendly Bootstrap carousel that is both scalable and zoomable while maintaining the default slide functionality

How can you resolve redefinition warnings detected by the CSS Validator?

Incorporating Masonry-inspired images into a website's design section

How can I use CSS to make a child element in a grid layout stretch horizontally to full width?

Displaying divs of varying heights in a line

Combine two columns into a single table column using HTML/CSS and JavaScript with the help of Datatables

The clash between the position:fixed and overflow:visible styles in CSS

Interested in customizing the hover color of the header links in WordPress?

Make sure that the two rows in my Bootstrap table are consistently positioned next to each other, regardless of the length of the text

Switch effortlessly between one animation and another with Angular.js

What is the reason behind IE's decision to reduce the size of password boxes compared to text

Personalized animated Reactflow Connection Lines

Nextjs Image Optimization: Accelerating Web Performance with Images

Adjusting the background color of <tr> depending on the number of <tr> elements in the HTML using CSS

Why isn't Bootstrap validation functioning properly in my Modal?

Is there a way to ensure that the images in the slider all remain consistent in size?

What is the best way to navigate from a button in NextJS to another page that I have built within the same application?