The Bootstrap search bar is experiencing issues with its display

image showing the search bar

Hello, I am working on building an animal adoption website and have implemented a search bar feature. However, I am facing issues with the display of the search bar below the header section. I even tried moving the search bar outside the card body, between the header and the card, but it still isn't appearing correctly. Can someone help me troubleshoot this? Here is the code snippet:

<body>
  <!-- ======= Header ======= -->
    <header id="header" class="fixed-top">
        <div class="container d-flex align-items-center justify-content-between">

        <h1 class="logo"><a href="index.php">SPCA SANDAKAN</a></h1>
            <nav id="navbar" class="navbar">
                <ul>
                    <li><a class="nav-link scrollto active" href="index.php">Home</a></li>
                    <li><a class="nav-link scrollto" href="index.php">About</a></li>
                    <li><a class="nav-link scrollto" href="index.php">Team</a></li>
                    <li class="dropdown"><a href="#"><span>Gallery</span> <i class="bi bi-chevron-down"></i></a>
                        <ul>
                            <li><a href="cat_gallery.php">Cats</a></li>
                            <li><a href="dog_gallery.php">Dogs</a></li>
                        </ul>
                    </li>  
                    <li><a class="nav-link scrollto" href="index.php">Contact</a></li>
                    <li><a class="getstarted scrollto" href="login_page.php">Login</a></li>
                </ul>
                <i class="bi bi-list mobile-nav-toggle"></i>
            </nav><!-- .navbar -->
        </div>
    </header><!-- End Header -->

    <!-- ======= Content ====== -->
    <main>
        <div class="card border border-dark d-grid">
            <div class="card-body">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="search by name.." aria-label="" aria-describedby="basic-addon2" />
                        <div class="input-group-append">
                            <button class="btn btn-md btn-primary" type="button"> Search </button>
                        </div>
                    </div>
                
                <div class="card d-grid pl-sm-5" style="width: 18rem;">
                    <img class="card-img-top" src="assets/img/cat/cat1.jpg" alt="">
                    <div class="card-body border border-secondary">
                        <h5 class="card-title">title</h5>
                        <p class="card-text">content</p>
                        <a href="#" class="btn btn-primary">View More</a>
                    </div>
                </div>

            </div>
        </div>
    </main>

    <footer id="footer">
        <div class="footer-top">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 col-md-6">
                        <div class="footer-info">
                            <h3>SPCA Sandakan</h3>
                            <p class="pb-3"><em>We speak for those who cannot speak for themselves.</em></p>
                            <p>
                                Jalan Lai Fook Kim, Jalan Datuk Tay, <br>
                                1KM, Mile 8, 90000 Sandakan, Sabah, Malaysia.<br><br>
                                <strong>Phone:</strong> +6010 227 8911<br>
                                <strong>Email:</strong> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8cbc8dbd9cbdcd3f8dfd5d9d1d496dbd7d5">[email protected]</a><br>
                            </p>
                            <div class="social-links mt-3">
                                <a href="https://www.facebook.com/SpcaSandakan" class="facebook"><i class="bx bxl-facebook"></i></a>
                                <a href="https://www.instagram.com/spcasdk/?hl=en" class="instagram"><i class="bx bxl-instagram"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>
htmlcssbootstrap-4

Answer №1

     <body>

    <header id="header" class="">
        <div class="container d-flex align-items-center justify-content-between">

        <h1 class="logo"><a href="index.php">SPCA SANDAKAN</a></h1>
            Un-comment the section below if you want to use an image logo 
           <a href="index.php" class="logo"><img src="assets/img/spca_logo.jpg" alt="" class="img-fluid"></a>

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
        </div>
    </header>

 

    <section>
        <main>
          <div class="input-group">
                        <input type="text" class="form-control" placeholder="search the name.." aria-label="" aria-describedby="basic-addon2" />
                    <div class="input-group-append">
                        <button class="btn btn-md btn-primary" type="button"> Search </button>
                    </div>
                </div>
            <div class="card border border-dark d-grid">
                <div class="card-body">
                    <div class="form-group">
                    
                    <div class="card d-grid pl-sm-5" style="width: 18rem;">
                        <img class="card-img-top" src="assets/img/cat/cat1.jpg" alt="">
                        <div class="card-body border border-secondary">
                            <h5 class="card-title">title</h5>
                            <p class="card-text">content</p>
                            <a href="#" class="btn btn-primary">View More</a>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </section>

  
  
   <footer id="footer">
        <div class="footer-top">
            <div class="container">
                <div class="row">
                    <center><div class="col-lg-4 col-md-6">
                    <div class="footer-info">
                        <h3>SPCA Sandakan</h3>
                        <p class="pb-3"><em>Advocates for those who cannot advocate for themselves.</em></p>
                        <p>
                        Jalan Lai Fook Kim, Jalan Datuk Tay, <br>
                        1KM, Mile 8, 90000 Sandakan, Sabah, Malaysia.<br><br>
                            <strong>Phone:</strong> +6010 227 8911<br>
                            <strong>Email:</strong> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4b7b4a7a5b7a0af84a3a9a5ada8eaa7aba9">[email protected]</a><br>
                                </p>
                        <div class="social-links mt-3">
                            <a href="https://www.facebook.com/SpcaSandakan" class="facebook"><i class="bx bxl-facebook"></i></a>
                            <a href="https://www.instagram.com/spcasdk/?hl=en" class="instagram"><i class="bx bxl-instagram"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>

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 JQuery script is not producing any results

After integrating a script into my website template, it is not functioning as expected. I suspect there may be a conflict with JavaScript, but upon inspecting with firebug, I am unable to identify any abnormalities. Here is the link for reference: Link ...

javascriptjqueryhtml

Creating a Stylish Web Design with Bootstrap HTML - Tips for Perfecting Your Output

My code is producing the following output: https://i.sstatic.net/LVda1.png But I want to achieve this instead: https://i.sstatic.net/OUlOP.png How can I modify my code to get the desired layout? <link rel="stylesheet" href="https://cdn.jsdelivr.n ...

htmltwitter-bootstrap

Using Bootstrap 4 navigation pills within a navbar

I am just starting to learn about bootstrap and I am trying to integrate nav pills into my navigation bar to switch the content of the page, similar to tabs. Everything works fine without the navbar, but I really want it to be part of my navbar. Here&apos ...

htmlbootstrap-4

Using Django, Ajax, and JavaScript to toggle the like and unlike icons when a button is clicked

1 I recently came across a solution on how to implement a Django Like and Unlike button without page reload. The method I found only works with text toggles (Like and Unlike) but I'm interested in using icon toggles (Like and Unlike icons). I am stil ...

javascripthtmlajax

Setting the default value of an input in Angular 2 or higher

I am currently working on incorporating a Component that mirrors a Bootstrap modal with an input field. The input is linked to a variable in the Component class using [(ngModel)]="...". It functions properly when I type text into the input (the variable&ap ...

htmlangulartypescript

Can an excess of CSS impact the speed and performance of a website?

After conducting thorough research on this specific topic, I was unable to locate the precise answer that I require. For instance, there are numerous divs within my project that necessitate a border. One approach is to create a distinct CSS class such as ...

htmlcss

Angular displays X items in each row and column

I've been struggling with this task for the past 2 hours. My goal is to display a set of buttons on the screen, but I'm facing some challenges. The current layout of the buttons doesn't look quite right as they appear cluttered and unevenly ...

javascripthtmlcssangulartypescript

The hardware acceleration feature is not functioning correctly

When I set android:hardwareAccelerated="false, the video ends up running in the background instead of the foreground. However, if I change it to android:hardwareAccelerated="true, the marquee text and other static images start flickering. ...

javascriptandroidhtmlcsshtml5-canvas

What is the best way to create a list with images in a dropdown menu using HTML?

Thanks so much for your assistance! Below is the code snippet I am currently working on <li><a href="#Language">*LanguageHERE*</a></li> I am hoping to turn this into a dropdown menu that displays flags representing all available ...

javascripthtmlcss

Does the color of the item change as it gets older?

How can I smoothly transition a color as it ages using a dynamic time scale? I want to calculate the age based on the difference in time rather than triggering an animation after an event. I aim for a seamless gradient transition between two colors over a ...

javascriptjqueryhtmlcss

Problems with CSS text scrolling

We have a client who wants a marquee-style scrolling text banner, and I tried using CSS animations to achieve it. However, I encountered some quirks that I'm struggling to fix. If you want to take a look at the issue, here is the link: https://jsfidd ...

htmlcsscss-animationskeyframe

Tips for utilizing numerous tables with multiple selection tags

I am struggling with a jQuery issue involving multiple container elements with the class "product-sizes". Each container contains a select option for choosing between inches and centimeters, which triggers the corresponding table display. The problem arise ...

javascripthtmljquerycssforeach

Integrating the frontend (HTML, CSS, and JavaScript) with the backend (Express server)

I've been trying to figure out the best way to connect the frontend and backend of a website, but I can't seem to find any clear answers online. Let's say you have a backend API with an endpoint that deletes a user's account when req ...

javascripthtmlexpressweb

Create a sleek and innovative tree user interface in a single line with the power of Angular and fxF

I created a tree with parent and child nodes, but I'm facing an issue where the positions of the checkboxes are not aligned in a straight line. Here is my code snippet: <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle> ...

htmlcssangular

Administer styles to individual Angular Material components using external CSS files

I am attempting to customize a specific mat input element in my application using an external CSS file. For instance, I have imported textfield.css and style.css files for this purpose. Let me provide some code snippets below: <mat-form-field> ...

cssangularangular-material

Submitting information to an HTML page for processing with a JavaScript function

I am currently working on an HTML page that includes a method operating at set intervals. window.setInterval(updateMake, 2000); function updateMake() { console.log(a); console.log(b); } The variables a and b are global variables on the HTML page. ...

javascriptjqueryhtml

Manipulate the CSS style of the body element in Angular with Typescript using the important tag

Within my Angular application I have implemented the following code to customize the body style: constructor(private elementRef: ElementRef) { } ngOnInit() { this.elementRef.nativeElement.ownerDocument.body.style.overflowY = 'hidden'; ...

javascriptcssangulartypescriptangular-template

Adjust the hyperlink color of <a> to change when hovering over <tr>

When I hover over a <tr> tag, I want the color of the associated <a> element to change to white. I attempted to achieve this using jQuery in the following way: <script> $('tr').hover(function(){ $('a').cs ...

jqueryhtmlcss

A guide on showcasing items on an html webpage through the use of javascript

Currently, I have a series of hardcoded HTML elements in my code snippet. <!-- Reciever Message--> <div class="media w-50 ml-auto mb-3"> <div class="media-body"> ...

javascripthtmlcssbootstrap-4

The versatile nature of the flex-direction CSS property

I am attempting to customize the layout of the code available at https://codepen.io/rperry1886/pen/KKwbQNP in order to showcase the images in a horizontal sequence rather than vertically. Despite referring to resources on Flexbox like https://css-tricks.co ...

htmlcssflexbox