The Bootstrap button is having trouble rendering correctly

I attempted to incorporate a Bootstrap search box in my code, expecting it to display like this: https://i.sstatic.net/bPNsE.jpg

However, for some reason, it is not rendering correctly within my layout, which resembles this: https://i.sstatic.net/x3wyk.jpg

Below is my HTML code for this basic layout. Any suggestions on how to ensure the button renders properly on the search box?

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">

    <title>Weather Dashboard</title>
</head>

<body>
    <div class="container">
        <div class="row" id="firstRow">
            <div class="col" id="top-bar">
                1 of 2
            </div>
        </div>
        <div class="row" id="secondRow">
            <div class="col col-lg-3">
                <h4>Search for a city:</h4>
                <div class="input-group md-form form-sm form-2 pl-0">
                    <input class="form-control my-0 py-1 amber-border" type="text" placeholder="Search"
                        aria-label="Search">
                    <div class="input-group-append">
                        <span class="input-group-text amber lighten-3" id="basic-text1">
                            <i class="fas fa-search text-grey" aria-hidden="true"></i>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col">
                2 of 3
            </div>

        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>
</body>

</html>

Answer №1

Feel free to review the code snippet below or visit the YouTube link provided for a more detailed explanation:

https://youtu.be/34Ee-HLtMgU

The only missing element was the fontawesome library. I have included an additional search box and recommend using a submit button instead of a span tag, as it is considered best practice.

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">

    <title>Weather Dashboard</title>
</head>

<body>
    <div class="container">
        <div class="row" id="firstRow">
            <div class="col" id="top-bar">
                1 of 2
            </div>
        </div>
        <div class="row" id="secondRow">
            <div class="col col-lg-3">
                <h4>Search for a city:</h4>
                <div class="input-group md-form form-sm form-2 pl-0">
                    <input class="form-control my-0 py-1 amber-border" type="text" placeholder="Search"
                        aria-label="Search">
                    <div class="input-group-append">
                        <span class="input-group-text amber lighten-3" id="basic-text1">
                            <i class="fas fa-search text-grey" aria-hidden="true"></i>
                        </span>
                    </div>
                </div>
              
              <div class="input-group mt-3">
                    <input type="text" class="form-control" placeholder="Search">
                    <div class="input-group-append">
                      <button class="btn btn-secondary" type="submit">
                        <i class="fas fa-search text-grey" aria-hidden="true"></i>
                      </button>
                    </div>
              </div>
              
            </div>
            <div class="col">
                2 of 3
            </div>

        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1b1aeb1b1a4b3efabb281f0eff0f7eff1">[email protected]</a>/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>
</body>

</html>

Answer №2

It seems like you may have overlooked including the "fontAwesome" CDN link in your code. Make sure to incorporate it to properly display the search icon. I also took the liberty of interpreting some sections of your code to generate the image. Feel free to review it.

If you desire the search input to span the entire line, consider using col-lg-12 instead of col-lg-3. The Bootstrap grid system operates on a 12-column layout method, so it is crucial to be aware of that. https://getbootstrap.com/docs/4.4/layout/grid/

I utilized Bootstrap's predefined classes to set the border and icon background color, opting for a warning color for your particular scenario.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/dc0c634418.js" crossorigin="anonymous"></script>

<div class="container">
  <div class="row" id="secondRow">
    <div class="col col-lg-12">
      <h4>Search for a city:</h4>
      <div class="input-group md-form form-sm form-2 pl-0">
        <input class="form-control border border-warning my-0 py-1 amber-border" type="text" placeholder="Search" aria-label="Search">
        <div class="input-group-append">
          <span class="input-group-text amber lighten-3 bg-warning" id="basic-text1">
            <i class="fas fa-search text-grey" aria-hidden="true"></i>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №3

  1. Start by adjusting the class from fa fa-search to ensure the icon appears correctly.

Consider trying bg-warning (a Bootstrap class) in this situation, but if you need a precise color, CSS might be necessary. The gray appearance could be due to the missing icon.

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

Using Rails to load an image from CSS

My current approach to loading an image is using this code: <div id="bglion"><%= image_tag("BG-LION6.png")%></div>, which successfully displays the image. However, I am interested in loading the image from a CSS file instead. After resea ...

The Nodejs express static directory is failing to serve certain files

Hello everyone, I'm currently working on a project using NodeJs, Express, and AngularJS. I've encountered an issue where my page is unable to locate certain JavaScript and CSS files in the public static folder, resulting in a 404 error. Strangely ...

The Javascript document refuses to load

I am currently working on a website with the main file named index.html: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Title</title> </head> ...

What is the process for creating an HTML file that can automatically save?

I am looking to develop a unique HTML document where users can enter text in text fields, save the file by clicking a button, and ensure that their changes are not lost. It's like what wysiwyg does for HTML documents, but I need it to be integrated di ...

Utilizing Bootstrap's hidden command to pinpoint specific titles

Here is the code I have that generates previous and next links for my Wordpress post. I am looking to hide the title of these links and instead display 'back' and 'next' as the text. The current code successfully hides the icon display ...

What is the method for altering font color in HTML?

Here is the section of my code that I am struggling with: <p style="font-family:'impact', color:red"> something </p> The issue I am facing is that I am unable to use both the color and the font propert ...

Trim the edge of a dynamic picture

Currently, I am facing a challenge with an image that requires the corner to be cut off. The image needs to be responsive in order to adjust its size according to the page dimensions. Since the image is managed by a CMS, the corner cut has to be done progr ...

What is the best way to align social media icons at the center of the footer section?

I've been working on trying to center the social media icons in the footer, but no matter what changes I make in the code, there's been no visible difference. Can anyone offer some assistance? footer { background-color: #FFF; color: white; ...

PHP regular expression that identifies a specific HTML element

Similar Question: Effective ways to parse HTML using PHP I am currently creating a custom WordPress template for a client that requires a PHP function to extract specific HTML tags as defined by the function. For instance, if I input "div" into the f ...

What could be causing the inability to update a newly logged-in user without refreshing the page?

Hello, I have encountered an issue with my application that involves registration and login functionality. The problem arises when a new user logs in, as I must refresh the page to get the current user information. I am currently using interpolation on the ...

Display an image when the iframe viewport is reduced in size by utilizing media queries

I am looking to showcase a demo.html page within a 400px square iframe. When the viewport is smaller than 400px, I want demo.html to only display an image. Then, when clicking on that image in demo.html, the same page should switch to fullscreen mode. Sim ...

New to using JavaScript and JQuery, attempting to position a form underneath an image at a specific URL for the

Hello, I'm having difficulties placing a form below an image with a specific URL. As someone who is still learning JQuery, I am unsure of what mistake I might be making. Is there anyone who can help me figure out what's wrong here? <html> ...

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

How do I integrate a button into my grey navigation bar using tailwindcss in REACT?

Is it possible to integrate the - button into the gray bar? I am encountering an issue where my blue button extends beyond the borders of the gray bar in the image provided. export default function App() { ... return ( <div className="text-md fon ...

What is the method for altering the text color within a disabled input field?

Currently facing difficulty in changing the color of the text within the input field when it's disabled. I'm utilizing Material UI for this purpose. import React from "react"; import { makeStyles } from "@material-ui/core/st ...

implementing a JavaScript function and declaring a variable from an HTML source

On my webpage, I have a feature that gathers a large amount of data using jQuery. My goal is to limit the number of results displayed by changing the shown results dynamically to create a false-page effect. This functionality is all handled through a singl ...

Unable to properly connect my CSS file to the header partial

I am struggling to include my CSS file in the header partial Here is the link I am using: <link rel="stylesheet" href="stylesheets/app.css"> This is what my directory structure looks like: project models node_modules public stylesh ...

What is the best way to link the value of a mat-slider to an input field in a reactive form?

Is there a way to synchronize the min and max values of a ranged mat-slider with corresponding input fields? Currently, when I set numbers in the input fields, the slider updates correctly. However, when I use the slider to change the value of the input fi ...

section element is not receiving styles from the specified class

Whenever I want to ensure that a class is only used on specific elements, I usually prefix it with the element name. For example, using div.className limits the className styling to just div elements. However, when I tried the same approach with a section ...

Sending HTML emails with a Django contact form

Can the django-contact-form be utilized to send an HTML email? ...