What is the best way to create a dual navbar using bootstrap for coding?

Can anybody assist me in creating the following:

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

Here is the code I have been working on:

<header>
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ceaca1a1babdbabcafbe8efae0fde0ff">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
            </header>

            <body>
            <div class="d-flex flex-row mb-3" style="padding-left: 11rem;">
                <div class="p-2"> <input type="text" class="form-control" placeholder="¿Que Buscas?"> </div>
                <div class="p-2"> <input type="text" class="form-control" placeholder="Ciudad"> </div>
                <div class="p-2"> <button type="button" class="btn bg-danger text-white">Buscar</button> </div>
            </div>
            </body>

I've been attempting to implement this using Bootstrap classes.

cssvue.jsbootstrap-4

Answer №1

If you're looking to customize your input fields, here's a helpful example for you. You can experiment with the borders of the two inputs (border-left / border-right) and adjust the border-radius to merge them into one cohesive input field.

To add icons or buttons inside the input field, you can utilize the relative/absolute positions effectively.

The scope is now in your hands to make adjustments (such as modifying shadow boxes, input focus, adding icons, etc.) and tailor it according to your specific requirements.

<!DOCTYPE html>
<html lang="en">
  <header>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="086a67667d7a7d7b6878473c263b2639">[email protected]</a>/dist/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />

    <style lang="scss">
      .buscando {
        border-right-color: white;
        border-radius: 0.25rem 0px 0px 0.25rem;
        margin-right: -2px
      }

      .ciudad {
        border-left-color: white;
        border-radius: 0px 0.25rem 0.25rem 0px;
        margin-left: -5px
      }

      button {
        top: 0;
        right: 0;
      }

    </style>
  </header>

  <body>
    <div class="d-flex justify-content-center m-2">
      <div>
        <input
          type="text"
          class="form-control buscando shadow-none focus-none"
          placeholder="¿Que Buscas?"
        />
      </div>
      <div class='position-relative'>
        <input
          type="text"
          class="form-control ciudad shadow-none "
          placeholder="Ciudad"
        >

      </input>
      <button
      type="button"
      class="btn bg-danger text-white position-absolute"
      >
      Buscar
    </button>

    </div>
  </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

Trying to access the label attribute of a select option in Vue.js?

Looking to retrieve the name attribute of a selected option in Vuejs. After experimenting with the value attribute, I found that it worked successfully. Below is the code I used: Tested code: <select id="countryselect" name="country" @change="onChange ...

javascriptvue.js

Waiting for VueX to execute the mutation

Can VueX be used to create a method in the mounted() function that waits for a mutation in another component to be executed? Sometimes this mutation is triggered before and other times after, so I am curious if it's possible to await its execution af ...

vue.jsvuejs2vuexvuex-modules

What is the best way to send a parameter to a component in Vue.js without including it in the URL during routing?

One of my Vue.js components is a SideBar that retrieves JSON data. The JSON data consists of names that correspond to specific URLs which in turn contain more JSON data. { "applicants": "url1", "applications": "url2" ...

javascripthtmlvue.jsnpm

When adjusting the height of one div, jQuery is causing another div to shift positions

Attempting to transition to tableless layouts using divs has been my recent project. A first attempt can be seen in the inner content of this (german) page: (Shorturl, for testing purposes only and not meant to appear on search engines) Overall, the pro ...

jqueryhtmlcss

Resizing Navigation Bar in WordPress Theme WP Clarion

Struggling to enlarge the size of the navbar below and urgently need to have it done before tonight. I've reached out to the developers for support but still need to find a solution: Check out the site here: penarthpc.com/~nuvolaor/ Unfortunately, t ...

phphtmlcsswordpress

The text-decoration is here to stay

Currently, I am facing an issue with the customization of a wordpress theme related to the styling of links within posts. Although I have tried to change the color and remove underlining using CSS rules, I am unsuccessful so far: a, .entry-meta a, entry-c ...

htmlcsswordpresshyperlinktext-decorations

Strategies for preserving empty cells in JSON output within Vue-XLSX instead of overlooking them

In my Nuxt project, I am reading an excel file and converting it to a JSON object using vue-xlsx. However, I have noticed that empty cells are being ignored by vue-xlsx. https://i.sstatic.net/hlmwT.png The resulting JSON object looks like this: [ { &q ...

jsonexcelvue.jsnuxt.jsxlsx

Is there a way to insert text onto an Isotope image?

I recently created a portfolio using Isotope and Jquery, but I am struggling to add descriptive text to my images without disrupting the layout of the portfolio. I have experimented with various options such as using position:relative for the images and p ...

jquerycssblogs

Stack one image on top of another while maintaining their original proportions using HTML and CSS

I have two images, one is used as a background (A) and the other (B) is positioned over a portion of the background. The issue I am facing is that when the resolution changes, the image B moves and is no longer in the desired position. https://i.sstatic.ne ...

htmlcss

The jQuery attr() method is universally compatible across platforms and stands independent

I have a jQuery statement that is currently working for me, but I am unsure if it is cross-platform independent. Can anyone confirm? $("input[name='confirmed']").attr("checked",false); It is functioning correctly on the latest version of Firefo ...

jqueryhtmlcssdhtmlattr

"Troubleshooting a CSS Bug on a PHP Dynamic Web

I have a PHP web page that is dynamic. localhost/ctd/index.php Everything is working fine, except when I add a forward slash like this: localhost/ctd/index.php/ The CSS does not load. Is this a CSS bug or PHP issue? Here is the full code of index.php: ...

phphtmlcss

Is jQuery or CSS necessary for differentiating between a standard image and a highlighted image?

Apologies if this has been asked before, but I'm in need of your assistance. Here's what I'm looking for: Imagine I have an image that is clickable in its normal state: https://i.sstatic.net/pGYyG.png Now, when I click on that image, I wa ...

jqueryhtmlcssselectonclick

The Vue EventBus does not support passing object attributes

Looking for assistance with integrating two Vue single page components. The 'Searchbar' component features a dialog box where users input data. This data is required in the 'ResultList' component for further processing. To achieve this ...

javascriptvue.jsevent-buselement-ui

Tips for creating CSS rules specifically for the default Android Browser using @media queries

Is there a CSS rule that can be applied only to the default Android Browser using @media queries? This rule should not affect Chrome, but only the default browser on Android devices. It's worth noting that there are numerous Android devices with vary ...

androidcss

How can I display a user's group memberships in keycloak-js?

Our website relies on keycloak for user authentication in a Vue application, where users are assigned to various groups on the Keycloak server. However, I am struggling to find a way to determine which groups a user is a part of. After examining Vue.proto ...

vue.jskeycloakkeycloak-rest-apikeycloak-javascript

Activate Bootstrap 4 dropdown on mobile devices/responsive design

In my header, there are some links. As the header shrinks to fit a smaller screen, it switches to mobile view (collapse style). I'd like the dropdown menu to be visible by default, but still allow users to toggle it off and on as needed. In essence, ...

javascriptjquerytwitter-bootstrapbootstrap-4

Exploring how to utilize Jest with timers for vee validate integration

I am faced with a challenge in determining if my button is disabled as the disabled property keeps returning undefined. I have carefully reviewed and followed the guidelines provided at , but unfortunately, it does not seem to work as expected. I suspect t ...

vue.jsjestjsnuxt.jsvue-test-utilsvee-validate

Create Event Button for Your Schedule

Looking to create a button that can add events to a calendar using only HTML and CSS, without the need for Javascript. While I've come across similar solutions involving Javascript, I'm specifically focused on finding a solution that doesn't ...

htmlcssbuttoncalendaraddition

Unexpected behavior with HTML Bootstrap's dl-horizontal layout

Despite having the div class "dl-horizontal" within the table, the dl-horizontal fields are displaying outside the table. Here is the code I used: <!DOCTYPE html> <html lang="en> <head> <title>Bootstrap Example</title> ...

htmlcssbootstrap-4

Having trouble retrieving the routeName as it consistently returns empty

I attempted to extract the routeName from the URL in order to apply a different class to the body's layout when on the /Category page. https://i.stack.imgur.com/J0hsp.png @{string classContent = Request.QueryString["routeName"] != "/ ...

htmlcssasp.net