Challenges with Bootstrap input groups

Despite trying various solutions, nothing seems to be working for me. I attempted using width:200px, but the issue persists. Since my form was quite outdated, I decided to switch to a bootstrap version. However, while others are able to resolve the issue with input-group, I still encounter a significantly larger difference.
I'll leave the form here in hopes that something will work for me.

.form-control{
  margin-top:10px;
  margin-bottom: 10px;
}
label{
  color:#03A0D3;
  font-size: 15px;
  margin-right:10px;
}
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<form id="updatesettings" method="post">

  <label for="link">WEBSITE LINK</label>
  <div class="input-group">
    <input type="text" name="link" class="form-control" placeholder="LINK">
    <span class="input-group-addon"><span class="fa fa-check green"></span></span>
  </div>

  <label for="email">E-MAIL</label>
  <div class="input-group">
    <input type="text" name="email" class="form-control" placeholder="E-MAIL">
    <span class="input-group-addon"><i class="fa fa-check green"></i></span>
  </div>

  <div class="btn-group">
    <a class="btn dropdown-toggle btn-select" data-toggle="dropdown" href="#">English><span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#"><span class="flag flag-usa flag-1x"></span> English</a></li>
      <li><a href="#"><span class="flag flag-rou flag-1x"></span> Romana</a></li>
    </ul>
  </div>
  <button type="submit" class="btn btn-primary">Save</button>
</form>

If I attempt to add some margin between the inputs and other elements of the form, it does not seem to work as expected. I would like to maintain the labels close to the inputs with a top margin of 10px. https://i.sstatic.net/GfmIj.png

htmlcsstwitter-bootstrap

Answer №1

Apply the margins to the class="input-group", not to the form control class. Doing so will prevent layout issues.

Example of correct implementation

.input-group{
  margin-top: 10px;
  margin-bottom: 10px;
}
label{
  color:#03A0D3;
  font-size: 15px;
  margin-right:10px;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <form id="updatesettings" method="post">

              <label for="link">WEBSITE LINK</label>
              <div class="input-group">
              <input type="text" name="link" class="form-control" placeholder="LINK">
              <span class="input-group-addon" id="ln"><i  class="fa fa-times red"></i></span>
             
            </div>

              <label for="email">E-MAIL</label>
              <div class="input-group">
              <input type="text" name="email" class="form-control" placeholder="E-MAIL">
              <span class="input-group-addon"><i class="fa fa-check green"></i></span>
             </div>

            <div class="btn-group">
              <a class="btn dropdown-toggle btn-select" data-toggle="dropdown" href="#">English><span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#"><span class="flag flag-usa flag-1x"></span> English</a></li>
                <li><a href="#"><span class="flag flag-rou flag-1x"></span> Romana</a></li>
              </ul>
            </div>
       <button type="submit" class="btn btn-primary">Save</button>
      </form>

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

Strange Behavior of Anchor Tags

I've been struggling with my anchor tag not working properly. The desired URL is localhost/VShroff/home/about.php, but it keeps changing to localhost/about.php without redirecting. I've spent a long time trying to figure this out. Here is the HT ...

jqueryhtmlcssanchor

What is the best way to include CSS styles in a React app with Webpack?

Having an issue with my React app. Upon successfully compiling Webpack and serving the content, no styles are displayed within the app. This is the current content of my webpack.config.js file: const path = require('path'); const BUILD_DIR = pat ...

cssreactjswebpack

The hover effect seems to be disabled in the third-level submenu

I need help creating a dropdown menu that shows an image when hovering over a specific item. I have checked my CSS code and HTML structure, but the image is not appearing as expected when I hover over the "Afyon White" list item. Any ideas on how to fix th ...

htmlcssdrop-down-menuhoverdropdown

Instructions for creating a dynamic Google map based on an address

Specifics I am aiming to generate a map based on any address stored within my <span> The address in question is : 410 walker street Lowell MA 01851 The <span> containing the address reads as follows: Address: <span id="address" > 410 w ...

javascriptphpjqueryhtmlgoogle-maps

What factors must be considered before transitioning from an HTML4 web application to HTML5?

As a newer web apps developer, I've created various applications when HTML 5 was on the rise as the new standard. Now, I'm considering migrating some of those apps to HTML 5 and wondering if it's a good idea. Despite my experience in web d ...

htmlweb-applications

Ways to send data to a popup in svelte

Hey there, I could really use some assistance with my Svelte app. I'm trying to implement a modal and pass a parameter to the modal component in order to customize its content. However, when using the open() function of Modal, we only need to provide ...

javascripthtmlcssmodal-dialogsvelte

Avoiding a line break between two <form> tags is essential for maintaining the structure of your webpage

I am looking for a way to ensure that there are no line breaks between two forms that I have on my website. Here is the code snippet: <form action="..."> <input type="submit" /> </form> LINE BREAK HERE <form action="..."> <inpu ...

htmlcss

Change the color when hovering over the select box

Using jQuery, my goal is to change the hover color in a select box from its default blue to red. I understand that the hover color of the select input may vary based on the operating system rather than the browser, but I am making progress towards achievin ...

javascriptjqueryhtml

"JavaScript that doesn't rely on a specific browser

Why does this code behave differently across browsers? What modifications are needed to ensure consistent behavior in all of them? In Firefox, it functions correctly, using the URL /some/path/?searchedText=sometext. However, in IE, nothing happens when cli ...

javascripthtmlbrowser

modify CSS style once the modal has been hidden

Is there a way to change the default background color of my table row back to normal after closing the modal window that appears when I click on it? <tr class='revisions'> <td>{{ $revision->date_of_revision->format(' ...

jquerycsslaravel-5bootstrap-modallaravel-blade

Replace the css variables provided by the Angular library with custom ones

Having an angular library with a defined set of css variables for colors applied to components, which are globally set like this: :root { -color-1: #000000; -color-2: #ffffff; ... } In my application utilizing this library, I need to override ...

htmlcssangular

CSS: A guide to creating layouts

I wrote this code snippet to display a table: <div class="topologyBalloon" id="bl_c2f03b99-6d62-43c4-9a35-4b4cbf22a7db"> <a href="#close" class="closeTopologyBalloon">×</a> <div class="contentBody"> <table class="deta ...

htmlcss

Animating components when they first mount in React

I'm attempting to implement an onMount animation in React (and Tailwind if relevant). The code I currently have is as follows: const Component = () => { const [mounted, setMounted] = useState(false) useEffect(() => { setTimeout(( ...

cssreactjs

Tips for automatically displaying the first option as selected in an HTML Select dropdown

I have an HTML select element where I want the option chosen by the user to not be displayed in the box. Instead, I would like the box to always show the first option, regardless of what the user selects from the dropdown menu. Below is my CSS code for sty ...

javascriptjqueryhtmlcss

Creating a multi-tiered cascading menu in a web form: Harnessing the power of

In my form, there is a field called 'Protein Change' that includes a multi-level dropdown. Currently, when a user selects an option from the dropdown (for example, CNV->Deletion), the selection should be shown in the field. However, this funct ...

javascripthtmlcss

What is the best way to align the text in the center of my h1 header?

Can anyone assist me with centering the contents of my h1 tag? h1{ width: 100%; vertical-align: middle; color: rgb(5, 5, 5); font-size:25px; letter-spacing: 0px; top: 0; text-align: left; padding: 10; }h1:after { content:' '; display: ...

csslayoutstylescenter

Learning how to retrieve the ID and Title using Jquery

Hello, I'm having an issue with my UL and LI elements. They work fine with the click function, but I can't seem to get the title when trying to access it. Example: // Works fine, but can't access the title $("#list li").on('click&ap ...

javascriptjqueryhtml

Manipulate your table data with jQuery: add, update, delete, and display information with ease

When adding data dynamically to the table and attempting to edit, the checkbox value is not updating. This issue needs to be resolved. You can view the code in action on jsFiddle here on JSFiddle ...

javascriptjqueryhtml

Aligning a table at the center of another table

Frustration has been brewing within me all week as I grapple with the task of sending out an important emailer soon. The challenge lies in aligning these product images next to their descriptions at the center, a feat that seems impossible to achieve withi ...

htmlcsshtml-table

Is there a way to stop TD from going to the next line?

I am using Javascript to dynamically generate a table and I want it to extend beyond the boundaries of the page. When I manually create the table, it works fine and extends off the page, but once I put it into a loop, the <td> elements wrap onto a se ...

javascripthtmlcsshtml-table