To create space between the input field and button, utilize the input-group class for

Is there a way to insert a space between the input field and the button while using input-group in Bootstrap 3? Check out this jsFiddle for more information.

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Example</h1>
            <div class="input-group">
               <input type="text" class="form-control">
               <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Go!</button>
               </span>
            </div>
        </div>
    </div>
</div>
csstwitter-bootstrap

Answer №1

To add custom styling to your input group button, include a new class called input-space with appropriate padding.

For a demonstration, refer to the following code example: 

class="input-group-btn input-space"

.input-group-btn.input-space {
  padding-left: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1>Example</h1>

      <div class="input-group">
        <input type="text" class="form-control"> <span class="input-group-btn input-space">
                    <button class="btn btn-default" type="button">Go!</button>
               </span>

      </div>
    </div>
  </div>
</div>

Answer №2

To make it look better, simply include padding-left in the .input-group-btn style sheet section:

.input-group-btn {
    padding-left: 10px !important;
}

Answer №3

One alternative method involves overriding the form-control class as shown below:

.form-control {
    width: 90% !important;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Hide additional tabs on the page when the width of the tabs exceeds the page width

I am currently working on a Google module tab application. I have successfully added the tab control with drag and drop functionality within a specific area. However, I now need to limit the number of tabs displayed on the page. Regardless of the total cou ...

jqueryhtmlcsstabs

What is the best way to customize a button component's className when importing it into another component?

Looking to customize a button based on the specific page it's imported on? Let's dive into my button component code: import React from "react"; import "./Button.css"; export interface Props { // List of props here } // Button component def ...

javascriptcssreactjstypescript

Guide to setting the first tab as the default tab using Thymeleaf, Css, and Bootstrap

I am currently working on a project where I need to dynamically create tabs based on a list retrieved from my Spring backend using Thymleaf and Bootstrap. While I have managed to successfully create the tabs and content, I am facing an issue where the fi ...

javascriptcssthymeleaf

Guide on displaying an X mark on a checkbox in AngularJS when the ng-disabled value is set to true

Is there a way to display an X mark in red on checkboxes when the ng-disabled condition is evaluated as true? I am a beginner in Angular.js and would appreciate any assistance. Here is what I have attempted so far: if (module.Name === 'val1' || ...

javascriptcssangularjscheckbox

What could be causing my Squarespace animation to function properly in Chrome but not in Safari?

I successfully implemented a typewriter animation on my Squarespace website using a Code Block and HTML code. It seems to be functioning well on Google Chrome but is not working on Safari. I recall reading that 'transform' may require additional ...

htmlcssanimationcss-animationssquarespace

Maintaining a sticky footer that remains visible throughout the content as the screen is resized

For more information, please visit my website at I attempted to implement a "sticky footer" technique following the steps outlined in this tutorial (http://ryanfait.com/sticky-footer/) Unfortunately, the sticky footer does not function properly when resi ...

htmlcss

Stack 2 cards inside a DIV vertically using Materialize CSS

My form and table are currently positioned side by side in 2 columns: https://i.sstatic.net/croh3.png The layout of this form/table is built using datatable + materialize CSS. I am looking to place the Form and table within a div to ensure that the bott ...

cssdatatablematerialize

Guide to adding an icon within an HTML `<input>` element

Is anyone able to help me successfully place my icon font inside the search input field? I've tried adjusting the margin and padding, but nothing seems to be working! If you have any insights or suggestions, please let me know. Your help is greatly a ...

htmlcss

Tips for aligning two divs vertically and horizontally next to each other

I'm struggling to center two divs both horizontally and vertically at the top of my page. I've tried various methods like "vertically align" & "margin: auto 0", but nothing seems to work. Can anyone help me figure out what I'm doing wron ...

htmlcss

Seamless changes with graceful fades while transitioning between classes

Is it more efficient to handle this in CSS than using jQuery? I'm not entirely sure. If anyone has a solution, that would be greatly appreciated. However, I am currently facing an issue with the jQuery method I have implemented. It successfully fades ...

javascriptjqueryhtmlcss

How can I adjust the size and width of the autofocus cursor inside an input box using Angular?

How can I modify the height and width of the cursor in an input field with auto focus? app.component.html <input class="subdisplay" [ngModel]="input | number" type="text" (keyup)="getValue(box.value)" name ...

htmlcssangular

Looking to enhance your navigation menu with drop shadows?

I am trying to add a drop shadow effect to the navigation menu on my WordPress website. You can view the desired effect here. However, I have attempted to apply it to my .navigation-main class without success. Below is the header code: <header id="mast ...

wordpresscssnavigationdropshadow

Change the background color of the right column and customize the container in Bootstrap to

I am looking to customize the background color of the second column in a way that it stretches to the full width of the screen, overriding the constraints of its container. Does anyone have a solution for this? <div class="container"> ...

twitter-bootstrapcss

Is it safe to exclusively use CSS Selector [type="text"] instead of input[type="text"]?

I've been pondering the safety of exclusively using [type="text"] instead of input[type="text"] in CSS. My concern is that when using input[type="text"], I'm unable to override it with a single class selector. // HTML <input type="text" clas ...

htmlcss

Is it possible to center the background button in bootstrap?

Having an issue with the alignment of the + sign on the bootstrap button, it's not centered as shown in this image : https://i.sstatic.net/lxacy.png. Attempted to enclose the button within a div using justify-content-center align-content-center text ...

cssbootstrap-4

What is the process for validating the CSS background-image URL using Javascript?

The concept here is to verify the URL of the CSS element's id (.boot). If the URL matches, which it does, then it should display "hello world." However, despite everything seeming correct, the expected behavior is not occurring, and the reason behind ...

javascriptcssif-statementbackground-image

What is the optimal order for executing JavaScript, jQuery, CSS, and other controls to render an HTML page efficiently?

What are some recommended strategies for optimizing webpage loading speed? What key factors should be taken into consideration? ...

javascriptjqueryhtmlcsshtml-rendering

CSS: The button appears to be slightly lower than the label

For more information, check out this GitHub link Here is the HTML code snippet: <div class="col-md-12"> <div class="col-md-2"> Processing </div> <div class="col-md-4"> <button class="btn btn-primary">Hello</ ...

csstwitter-bootstrap

Is it possible to customize the background color of select2 boxes separately for each option?

I recently implemented the select2 plugin and now I'm looking to add a new class within the .select2-results .select2-highlighted class in order to change the background color. Does anyone have any suggestions on how to achieve this? ...

javascriptjqueryhtmlcss

I cannot seem to get the image to display properly, it keeps getting cut off and

I am trying to add an image to my website: https://i.sstatic.net/giAdT.jpg However, when I try to do this, the full image is not showing: https://i.sstatic.net/VRBlB.png This is the code I am using: <!DOCTYPE html> <html lang="en"> ...

htmlcssbootstrap-4