Implementing a full-width search bar within the Bootstrap navbar

I'm trying to create a navbar using Bootstrap 3.7.7 with a logo on the left, links on the right in two rows, and a large search bar in the center. I've managed to align the logo and links correctly, but I'm struggling with sizing the search bar. Here's the code I'm currently using:

<div class="navbar navbar-inverse navbar-fixed-top navcustom">
    <div class="container-fluid">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="logo" href="#">
                <img class="img-responsive" src="~/img/finalogo.png" class="img-responsive"/>
            </a>
        </div>
        <div class="navbar-collapse collapse" id="searchbar">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="about.html">About</a></li>
                <li><a href=""><i class="icon-user"></i> My Page</a></li>
                <li><a href="#loginform" data-toggle="modal">Login</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a title="Start a new search" href="#">Clear</a></li>
            </ul>
            <div class="form-group">
                <input class="form-control" type="text" placeholder="Search">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                </span>
            </div>
        </div><!--/.nav-collapse -->
    </div>
</div>

However, I'm having trouble adjusting the size of the search bar. Here is an image for reference: https://i.sstatic.net/kRTJU.png

If anyone can provide assistance, I would greatly appreciate it. Thank you!

Answer №1

Here is a code snippet you can use to create a Search Bar with a Search Icon using Bootstrap:

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet"
href=""
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>


<div id="custom-search-input">
    <div class="input-group col-md-12">
        <input type="text" class="form-control input-lg" placeholder="Search" />
                <span class="input-group-btn">
                   <button class="btn btn-info btn-lg" type="button">
                <i class="glyphicon glyphicon-search"></i>
            </button>
        </span>
    </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

The hover effect is being applied exclusively to the final React component

When using next.js and tailwindCSS for styling, I created a custom component that includes tags. The issue arises when multiple instances of this component are placed on the page, as only the last one is getting the desired hover effect. "index.js" import ...

The Chrome browser is not displaying the Ajax loader

I've been using a please-wait .gif image for my ajax loader, and it was working perfectly in Chrome until recently. There hasn't been any changes to the image itself, and it still displays correctly in IE, Mozilla, and other browsers. I'm p ...

Enhancing WordPress Menu Items with the 'data-hover' Attribute

Looking for a solution to add "data-hover" to menu items on Wordpress, like: Wanting to insert: data-hover="ABOUT US" into <a href="#">ABOUT US</a> without manually editing the link's HTML to make it: <a href="#" data-hover="ABOU ...

How can I set up an additional "alert" for each form when making an AJAX request?

let retrieveLoginPasswords = function (retrieveForgottenPasswords, checkLoginStatus) { $(document).ready(function () { $('#login,#lostpasswordform,#register').submit(function (e) { e.preventDefault(); $.ajax({ type: &quo ...

Having trouble with the display of styles on Material UI Cards?

I am currently attempting to customize the default Material UI classes by using useStyles and applying a classname of titleSection. My goal is to make the titleSection bold and in Roboto font, but unfortunately, those styles are not being applied. Below i ...

Display or conceal child links using JQuery based on their availability

I have a query regarding JQuery. If I click on Link1, which does not contain any ul.children, the class current_page_item will be added (not shown in this code as it is added automatically by Wordpress). In this scenario, the ul.children in Link2 should be ...

Binding iframes in Angular 6

Is there a way to display iframe code stored in a variable within a div? Here's the HTML code: <div class="top-image" [innerHTML]="yt"></div> And here's the TypeScript code: yt = '<iframe class="w-100" src="https://www.you ...

Using Three.JS to navigate a 3D cube by utilizing accelerometer data on both the x and y axes

After referencing my previous question I'm currently working on a 3D model that responds to input from accelerometer and gyroscope sensors. The 3D model is created using three.js, and the input data for rotation and translation is in JSON format. How ...

Identifying the HTML elements beneath the mouse pointer

Does anyone know the method to retrieve the HTML tag located directly under the mouse cursor on a webpage? I am currently developing a new WYSIWYG editor and would like to incorporate genuine drag and drop functionalities (rather than the common insert at ...

Send JSON data through a JQuery Ajax call and show the resulting response afterwards

I'm having trouble getting this code to work properly. I am using jQuery to capture the value of a dropdown selection, sending it via AJAX in JSON format to a PHP file, and then appending the response to a div with an id of #orderSummary. However, I n ...

Having trouble navigating to the end of a webpage while using Python for web scraping and Spotify's web player?

I am working on a Python program that can extract a list of track names from a Spotify playlist when given the link. Here is my current progress: from bs4 import BeautifulSoup from selenium import webdriver url="https://open.spotify.com/playlist/1xXEN6Uh ...

Triggering jQuery events can be customized by excluding certain elements using the

Is there a way to hide the div "popu" when clicking on the img "tri"? I've tried using .not() since the img is a child of the div popu, but it didn't work. Also, I need to make sure that clicking on the div "textb" does not trigger the hide actio ...

The functionality of WebDriver Wait is not functioning as expected

Is there a way to avoid waiting for the entire page to load? I thought using WebDriverWait would help, but I keep getting a TimeoutException even though the tag is visible. self.driver.get('http://www.quoka.de/') self.wait.until(EC.invisibility_ ...

Finding the dynamic width of a div using JavaScript

I have two divs named demo1 and demo2. I want the width of demo2 to automatically adjust when I drag demo1 left to right or right to left. <div class="wrapper"> <div class="demo"></div> <div class="demo2"&g ...

What is the reason behind my styled component only displaying the final state in its className logs?

Here is my implementation using styled components with the version "@types/styled-components": "^5.1.26" and I'll provide you with an example of my code. // index.tsx import React, { useEffect, useState } from 'react'; i ...

Step by step guide to implementing form step validation in a multi-step jQuery form with radio buttons

I have implemented the sample code provided in this link, with the addition of 2 extra form steps: LINK TO SAMPLE FORM My form consists of radio buttons (2 per page) instead of text boxes. How can I ensure that each form page is validated so that the for ...

Notify the user with a Jqgrid alert when they attempt to select multiple checkboxes

When editing rows, I wanted to avoid multiple selections. In order to achieve this, I need to check the condition if(count>1) and display an alert message. I am struggling to figure out how to retrieve the count of selected checkboxes in jqGrid. var m ...

Ensure that the jQuery ajax function triggers only after the images or iframes have completely loaded

I am currently in the process of creating an online portfolio. My goal is to have project information load into the current page via ajax when a user clicks on a specific project. However, I am facing an issue with the timing of the load() success function ...

Encountering the "Local resource can't be loaded" error when attempting to link a MediaSource object as the content for an HTML5 video tag

I'm attempting to make this specific example function properly. Everything runs smoothly when I click the link, but I encounter an error when trying to download the HTML file onto my local machine and repeat the process. An error message pops up sayi ...

What's the piece I'm overlooking? Attempting to append a class name to the HTML content retrieved from the server

After making an ajax request and receiving some html data, I attempted to add a class using the success method: <div id="test"> </div> Here is the code snippet from my success function: $('#test', response).addClass('mytest& ...