Having trouble adjusting the width of the text input in the inline search box form with an input group dropdown

Looking to create a search box similar to this design:

https://i.sstatic.net/H93WQ.png

What is the most effective way to implement this using Bootstrap?

I tried using an inline form and input group dropdown list, but I encountered issues with the text input width not stretching to fill the entire page width.

http://www.bootply.com/LRUm7PdeMN

Answer №1

Have you considered checking out the snippet below?

Feel free to customize the rest of the styling on your own.

.container {
  padding-top: 50px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="search-box">
        <form class="form-inline">
          <div class="form-group">
            <div class="input-group">
              <input type="text" class="form-control" aria-label="..." placeholder="Search ...">
              <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All categories <span class="caret"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right">
                  <li><a href="#">All categories</a>
                  </li>
                  <li><a href="#">Another action</a>
                  </li>
                  <li><a href="#">Something else here</a>
                  </li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Separated link</a>
                  </li>
                </ul>
                <button type="submit" class="btn btn-default">
                  <i class="fa fa-search"></i>
                </button>
              </div>
              <!-- /btn-group -->
            </div>
            <!-- /input-group -->
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

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

Some CSS features might not work properly when using Vuetify alongside Vue.js and Webpack

I believe the issue may stem from my inability to correctly import the JS file for Vuetify, but I haven't been able to pinpoint any errors. It seems that certain CSS functionalities of Vuetify, like list highlight events, are not working in my applica ...

Execute location.replace when the "control" key is pressed

document.addEventListener('keydown', (event) => { var name = event.key; var code = event.code; if (name === 'Control') { location.replace(classroom.google.com) } if (event.ctrlKey) { alert(`Combinatio ...

Alter the background color of a table cell in Angular HTML depending on a boolean value

Attempting to use Angular ng-class to set the background color of a table cell. I'm referencing code snippets from these resources: Angular: How to change the color of cell table if condition is true Change HTML table cell background color using ...

Root location for offline and pre-production in the Backbone boilerplate router

I am currently utilizing the backbone boilerplate found at https://github.com/tbranyen/backbone-boilerplate My development process involves working on static HTML/JS files offline and conducting tests offline before deploying them to another site for pre- ...

How to easily make a table in the center of the page using

I have a collection of 20 icons that I would like to arrange in a centered horizontal line of images. However, I am looking for a responsive solution and cannot use an HTML table. It needs to be mobile-friendly and wrap properly for small screens. If I wer ...

How can we use response.render in Express.js to render HTML on the client side?

I have set up a simple Express.js application with the following routes: router.get('/', function(req, res){ res.render('login'); }); Everything is working fine - when I log into the main page on my localhost, the HTML fro ...

Properly specify the type annotation for a view function that does not accept any arguments

As I continue my Elm learning journey, I have come across a beginner's question. I'm struggling to properly type annotate a function that simply returns a pure div element. header = div [] [ text "Hello" ] Can someone provide guidance on th ...

Overflow issues with flexbox design on mobile devices

Hello, I'm currently working on creating a sliding panel of images. While I have successfully implemented it, I am encountering some browser compatibility issues. The sliding panel functions perfectly on Chrome desktop, however, when viewed on mobil ...

"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 ...

Steps to halt webkit animation within a div located inside a circle:

I have a series of nested circle divs, and I want to give them a pulse animation. The issue is that the text container is within one of these circles, causing the animation to apply to the text as well. I am unable to move the text container due to potenti ...

Tips for positioning a div to the left once the minimum width has been reached?

<div id="container"> <div id="subsSection"> <div class="leftSection">ss</div> <div class="rightSection">ss</div> </div> </div> (1) My goal is to have the subsection div centered on the ...

Divide the <ul> element into two columns with CSS only if the number of <li> items is more than 5

Is it feasible to divide a list into two columns using pure CSS if there are more than 5 child <li> elements? In the scenario I have in mind, this is the desired outcome: <li>1</li> <li>2</li> <li>3</li> ...

Leverage object properties as data table field values in VueJS

In my current project, I am utilizing VueJS (version 2.5.9) to display and modify data tables within an administrative application. Initially, I used a basic Grid component for the data table, following an example provided here. However, I came across an e ...

The sticky navigation bar isn't functioning properly, even though the code worked perfectly on W3School

I recently encountered an issue while trying to create a sticky navbar that would remain fixed after scrolling past a certain point. I found and customized some code from w3schools that included an animation effect, and it worked perfectly in their demo. H ...

JavaScript fails to focus on dynamically inserted input fields

Within my HTML template, there is an input element that I am loading via an Ajax call and inserting into existing HTML using jQuery's $(selector).html(response). This input element is part of a pop-up box that loads from the template. I want to set f ...

Which is the ideal library for creating this specific chart - shown in the image in the description - in reactjs?

After numerous unsuccessful attempts, I have finally decided to seek help in creating this chart. I would highly appreciate any assistance that can be provided. https://i.sstatic.net/jtQ3I.jpg ...

Issue encountered while attempting to deactivate certain foundation CSS and JavaScript files

I am attempting to deactivate certain CSS files in the foundation framework, as they are unnecessary for my project. After installing foundation via a gem, I followed Ryan Bates' recommendation to modify the foundation_and_overrides.scss file by repl ...

"Incorporate Bootstrap drop-down and button together for a stylish group feature

I am looking to format the code below to resemble the layout shown in the image using Bootstrap 3.3. When there isn't enough space to show all elements in a single line, I want them to stack vertically so that each element utilizes the entire width of ...

I'm curious about the specific purpose of /1 in font styling at 16px

Can anyone explain the purpose of /1 in the font: 16px/1 style declaration? I removed the /1 from the code and noticed increased spacing between lines. What is the specific role of /1 in this situation? body { font: 16px/1 'Open Sans', sans ...

Fixed position does not adjust based on the screen resolution

If I were to create a web page, I would include a main menu that always remains on the screen, similar to this design: https://i.sstatic.net/I57Xk.png There are no issues with screen resolution exceeding 1300px, as seen in the image above. However, when ...