"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

"Encountering an error when trying to access undefined property in templates

The content displayed in my component template is not what I expected when using @Output to pass an object from a parent container. While attempting to bind {{selectedMovDetail|json}} in the template, the output shows as { "name": "The Walking Dead","rati ...

javascriptjsonobjectangular

Unable to delete React element by ID as it is undefined

Having some trouble deleting an item by ID with React. Despite the backend routes functioning properly (node and postgresql), every attempt to delete an item results in it reappearing upon page refresh. The command line indicates that the item being delete ...

javascriptnode.jsreactjsfetch

Building and saving an HTML webpage using Node.js: A step-by-step guide

Using node.js, I developed an application that gathers data in a MongoDB database. For example: name: John pagename: mypage links: [link1, link2, link3] The task at hand is to generate static HTML pages with the format pagename.mydomainname.com, and ins ...

htmlnode.js

Exploring various layers of nested data

I am currently developing a comprehensive global data storage system for my application (specifically an Angular JS app - although this question pertains to JavaScript in general). I have established a 'service' that is responsible for setting t ...

javascriptangularjssquare-bracket

My local requests are being blocked by both Chrome and Firefox

Recently, I've been experimenting with local flash development and trying to inject my swf file into a website served by my test server. To enable loading of local resources in Chrome, I set --disable-web-security. In FireFox, I made the following a ...

javascriptseleniumflash

Does the useState hook have any connection to hoisting in React?

I am relatively new to React.js and JavaScript, currently working on a project where I need the ability to manually update my components as needed, due to limitations with a third-party library. After doing some research, I came across a pattern on the of ...

javascriptreactjsreact-hooks

Stop processing the current websocket connection once a new websocket request is received

Currently, I am utilizing the npm ws module (or its wrapper named isomorphic-ws) for establishing a websocket connection. NPM Module: isomorphic-ws This setup allows me to retrieve an array of data from a websocket++ server situated on the same local mac ...

javascriptnpmwebsocketws

Failure of AJAX HTML function to retrieve value from textarea

I am displaying data in the first three columns of a table, with the last column reserved for user feedback/comments. However, when the form is submitted, the values in the textarea are not being posted. The table has 6 rows. The Sample TR: <tr> &l ...

javascriptphpjqueryajax

Changing the color of text in one div by hovering over a child div will not affect the

When hovering over the child div with class .box-container, the color of another child div with class .carousel-buttons does not change. .carousel-slide { position: relative; width: inherit; .carousel-buttons { position: absolute; z-index: ...

htmlcsssass

An array containing numerous "case" triggers

var message = "hello [[xxx]] bye [[ZZZ]]" var result, re = /\[\[(.*?)\]\]/g; while ((result = re.exec(message)) != null) { switch (result[1].toLowerCase()) { case "xxx": console.log("found xxx"); br ...

javascriptarraysnode.js

Error TS2307: Module 'calculator' could not be located

Running a Sharepoint Framework project in Visual Studio Code: This is the project structure: https://i.stack.imgur.com/GAlsX.png The files are organized as follows: ComplexCalculator.ts export class ComplexCalculator { public sqr(v1: number): number ...

javascriptjsontypescriptgulpvisual-studio-code

Is there a way to spin these hexagons around?

Hey there, I need some assistance with a problem. I have to rotate these three hexagons slightly, about 15 degrees or so. The catch is, it needs to work in Internet Explorer only. I've been struggling with this all day and it's getting ...

htmlcss

Parsing values from deeply nested objects and arrays

I've come across this issue before, but I'm having difficulty navigating through a nested structure. I can't seem to find any guidance in the right direction. Here is the object I'm attempting to parse: const nestedArray = { id ...

javascripttypescriptnested

Angular 2: Harnessing the power of Observables with multiple Events or Event Handlers

In the component template, I have grouped multiple Inputs and their events like this: <tr (input)="onSearchObjectChange($event)"> <th><input [(ngModel)]="searchObject.prop1"></th> <th><input [(ngModel)]="searchObje ...

javascriptangulartypescriptrxjsangular2-observables

Obtaining undefined values for req and resolvedUrl in GetServerSideProps function

In my project, I am currently using next.js version ""next": "^12.1.4"" and node version ""@types/node": "^14.14.6". I have created a function called getServerSideProps with parameters req and resolvedUrl. When the ...

javascriptreactjsnode.jstypescriptnext.js

Problem arising from apostrophe usage in Javascript OData request

In my current project, I have a text input field that passes a value through JS to fetch filtered data of names from a JSON file using OData query parameters. However, I've encountered an issue where if a name contains an apostrophe, it results in a ...

javascriptjsonajaxodata

Obtaining Function Call Results by Querying Node.js MySQL Connection

One issue I'm encountering while trying to retrieve data from a database is the synchronization of calls. In my attempt to resolve this problem, I experimented with a demo example and used callback functions. Being relatively new to node.js, I am unce ...

javascriptmysqlnode.js

Is it possible to search LinkedIn using just one keyword?

Is it possible to search for a LinkedIn profile using a single string instead of separate first and last names? The issue is that I only have a single name field in my database... Typically, one would construct a dynamic URL like this: http://www.linkedin ...

c#javascriptasp.net-mvc-3urllinkedin-api

Utilizing window.location.pathname in Next.js for precise targeting

Are you familiar with targeting window.location.pathname in NEXT.JS? I encountered a red error while using this code in Next.js const path = window.location.pathname console.log(path) // I am able to retrieve the pathname here Then { ...

javascriptreact-nativenext.js

"Conducting API calls in NextJS: Why is Axios/Fetch returning incorrect results when using the post

I'm trying to use a post method on an API, but for some reason when I call the function it posts to the wrong path of the API. Here is the script I am using for the post: //Creating Order const createOrder = async (data) => { try { co ...

javascriptreactjsapinext.js