"Positioning a div around a Bootstrap form-inline: A step-by-step guide

When using Bootstrap 3 "form-inline" within a <div>, I noticed that the div seems to be nested within the form-inline.

This is how my code looks:

HTML 

<div class="wrapper"> 
        <div class="form-inline">    
            <div class="row"> 
                <label>Name:</label>   
                <div class="form-group inner-addon right-addon pull-right">
                    <i style="font-size: 10px; padding: 8px 6px;" class="glyphicon glyphicon-search"></i>
                        <input class="form-control input-sm" data-bind="textInput: nameFilter, stopBubble:true" placeholder="<name>" type="text">
                </div>
            </div>
        </div>
        <div class="form-inline">    
            <div class="row"> 
                <label>Name2:</label>   
                <div class="form-group inner-addon right-addon pull-right">
                    <i style="font-size: 10px; padding: 8px 6px;" class="glyphicon glyphicon-search"></i>
                        <input class="form-control input-sm" data-bind="textInput: nameFilter, stopBubble:true" placeholder="<name>" type="text">
                </div>
            </div>
        </div>
    </div>

CSS

.wrapper{
    float: left;
}
.inner-addon { 
    position: relative; 
    margin-bottom: 0px !important;
}

/* style icon */
.inner-addon .glyphicon{
  position: absolute;
  padding: 10px;
  pointer-events: none;
}
.right-addon .glyphicon{ 
    right: 0px;
}

Can anyone point out where I might be going wrong?

Check out the Bootply fiddle here

I made some adjustments by adding more rows and a pull-right to demonstrate what I am aiming for. Apologies for not including that information initially.

javascripthtmlcsstwitter-bootstrap

Answer №1

To optimize your Bootstrap layout, it's recommended not to nest a row inside a form-inline. By making a few minor adjustments, you can achieve the perfect result.

Check out this Example Here

<div class="wrapper"> 
    <div class="form-inline">    
        <label>Username:</label>   
        <div class="form-group inner-addon right-addon">
           <i style="font-size: 10px; padding: 8px 6px;" class="glyphicon glyphicon-search"></i>
           <input class="form-control input-sm" data-bind="textInput: nameFilter, stopBubble:true" placeholder="Enter username" type="text">
        </div>
    </div>
</div>

You can explore all Bootstrap properties and examples on their website, which offers valuable insights.

Answer №2

Here is a snippet of code that you can use:

<div class="container">
  <form class="form-inline" role="form">

    <div class="form-inline">
      <div class="row">
        <label>Name:</label>
        <div class="form-group inner-addon right-addon">
          <i style="font-size: 10px; padding: 8px 6px;" class="glyphicon glyphicon-search"></i>
          <input class="form-control input-sm" data-bind="textInput: nameFilter, stopBubble:true" placeholder="<name>" type="text">
        </div>
      </div>

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

You can view the fiddle here

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

A Javascript callback function does not alter the contents of an array

I have been working on a project to create a task list page, where I retrieve the items from a mongodb database. When I use console.log(item) within the callback function, each item is printed successfully. However, when I use console.log(items) outside o ...

javascriptarraysmongodbexpressscope

Failed to locate lodash during npm installation

I recently set up my project by installing lodash and a few other libraries using npm: npm install grunt-contrib-jshint --save-dev npm install grunt-contrib-testem --save-dev npm install sinon --save-dev npm install -g phantomjs npm install lodash --save ...

javascriptnode.jsnpmtestem

The `.append()` function includes HTML content as plain text

I am using JavaScript to dynamically add HTML elements to my webpages. I have created a loop that iterates through all the projects, each containing multiple pictures. The first step involves generating the project title and adding it within a div element ...

javascriptjqueryhtmlappend

I'm puzzled as to why my Contact Form is failing to send out emails

Looking to create an email send function in a pop-up on my website that can be accessed via the following link: The issue I'm facing is that while it redirects perfectly to the thank you message, the PHP implementation does not seem to work after the ...

phpjqueryhtmlcss

contrasting module export approaches

Let me clarify that my query does not revolve around the disparity between module.exports and exports. Instead, I am interested in understanding the contrast between exporting a function that generates an object containing the functions to be shared upon i ...

javascriptnode.js

Testing React components with Jest by mocking unnecessary components

Consider a scenario where we have the Page component defined as: const Page = () => <> <Topbar /> <Drawer /> <Content /> </> When writing an integration test to check interactions within the Drawer and Con ...

javascriptreactjsjestjsintegration-testingenzyme

Do not decode HTML content within an iframe; instead, extract the data directly from the HTML source

To expedite execution time, we have made the decision to not display the table in the iframe as it is invisible to the client. However, we still need to update the main page table by copying its contents. The approach we are taking is that the iframe shou ...

javascripthtmlajaxiframe

Utilize both a model and a boolean variable within expressionProperties in Formly configuration

I'm having trouble setting formly form fields to disabled based on model properties and a boolean variable. The code snippet I've tried doesn't seem to be working as expected. expressionProperties: { 'templateOptions.disabled' ...

javascriptangularjsangular-formly

The React rendering process failed when attempting to utilize a stateless component

Struggling to integrate a stateless component with fetch in my project. The fetch API is successfully retrieving data, but for some reason, the stateless component remains blank. import React, { PropTypes } from 'react'; import { Card, CardTitle ...

javascriptreactjs

The style of MUI Cards is not displaying properly

I've imported the Card component from MUI, but it seems to lack any styling. import * as React from "react"; import Box from "@mui/material/Box"; import Card from "@mui/material/Card"; import CardActions from "@mui/m ...

javascriptreactjsmaterial-ui

The functionality of AngularJS routing is malfunctioning

I'm having trouble with implementing angularJS routing on my page. Initially, it was working fine but now the browser is not returning anything. Here's the code snippet: angular.module('myRoutingApp', ['ngRoute']) .conf ...

javascripthtmlangularjsangularjs-routing

leveraging array elements in the data and label properties of a chart.js chart

I would like to assign the values of an array to the data and label fields within a chart.js dataset. Below is the code executed upon successfully fetching JSON data using an AJAX call. The fetched JSON data is then stored in an array. Data = jQuery.pars ...

javascriptarraysajaxchart.jschart.js2

django problem with bootstrap modal

I'm having trouble with the Bootstrap 4 modal in my Django project. When I click the button, the fade effect covers the entire screen, but the modal doesn't appear. I'm currently using Django 1.9. Does anyone have any suggestions on what mi ...

htmlbootstrap-modalbootstrap-4

Updating $data within a VueJS directiveIs there something else you

We have a component and a directive. The structure of our component data is as follows: { langs: [ { title: '', content: '' }, { title: '', content: ...

javascriptdirectivevuejs2vue.js

Can you explain the significance of the regular expression in a dojo configuration file named dj

As I was working on developing dojo application modules, I came across a regular expression in tutorials. var pathRegex = new RegExp(/\/[^\/]+$/); var locationPath = location.pathname.replace(pathRegex, ''); var dojoConfig = { asyn ...

javascriptregexdojo

Creating two variables that share an identical name

Can variables with the same name set outside of a function be called within the function? var a = $(window).width(); // This is the variable I want to call if(!$.isFunction(p)){ var a = $(window).height(); // Not this one alert(a); } FIDDLE ...

javascriptjqueryvariables

How can I open the Ion-datetime view for the current year without allowing the selection of a specific day?

I am currently troubleshooting an issue with an Ionic date-time picker component. Upon opening the datepicker, it defaults to showing May 2021. As I scroll to the present date, I notice a circle highlighting today's date indicating that it selects th ...

javascriptangularionic-framework

The size of the generated file from tailwind build is compact

I've been working with TailwindCSS and have followed the installation process outlined below. However, after completing the steps, I ended up with a tailwind.css file that only contains 369 lines. This seems to be fewer lines than what others have in ...

cssreactjsnpmtailwind-csscra

RStudio Connect now automatically inserts CSS code into cells when updating

My current project involves creating an app for holiday requests. The main page of the app is displayed like this: At the bottom right corner, you'll notice a column labeled "Accepted?" which displays either "OK" or "DENIED" in different colors. When ...

cssrshinyrsconnect

"Customize Your CSS Dropdown Menu with Dynamic Background Color for div Elements

I recently put together a website dedicated to watches. Feel free to check it out at horology dot info. (Please refrain from sharing the direct URL of my site in your reply.) I'm curious as to why the dropdown menu, sourced from , is showing up unde ...

htmlcss