Navigational bars in Bootstrap forms

I inserted a Bootstrap navigation bar into my partials folder by copying and pasting the code. This partial is included in every EJS file that I render. However, I noticed that the form and the button are displayed stacked on top of each other instead of side by side like this:

view image here

Can anyone point out what I might be doing wrong?

<nav class="navbar navbar-light bg-light justify-content-between">
    <a class="navbar-brand">Navbar</a>
    <form class="form-inline">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </nav>
javahtmlcssbootstrap-4ejs

Answer №1

There are a few errors in your code that I have identified. Take a look at the snippet below for reference.

Feel free to thank me later.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-light justify-content-between">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <div class="form-group my-0">
      <input class="form-control" type="search" placeholder="Search" aria-label="Search">
    </div>
    <button class="btn btn-outline-success my-0 ml-2" type="submit">Search</button>
  </form>
</nav>

Answer №2

To prevent the button from wrapping, I recommend utilizing the .input-group class like this:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-light justify-content-between">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <div class="input-group">
      <input class="form-control" type="search" placeholder="Search" aria-label="Search">
      <div class="input-group-append">
        <button class="btn btn-outline-success input-group-text" type="submit">Search</button>
      </div>
    </div>
  </form>
</nav>

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

Exploring the functionality of incorporating multiple text sections in a CheckedTextView on the Android platform

Is there a way to combine two strings into one CheckedTextView? The following code results in the error "Duplicate attribute text. activity.xml <CheckedTextView android:id="@+id/GEDTrainingReq1" style="@style/SideCheckedText" android:text= ...

javaandroidxml

Make the header stretch to the top of the page using CSS rounded edges

I'm trying to eliminate the white space above my blue header on a webpage with rounded corners. The header is at the top of the wrapper, but there's some empty space before it starts. Is there a way to make the header start right at the top edge ...

htmlcss

What methods can be used to ensure a div reaches all the way down to a sticky footer?

I'm currently working on a layout with a sticky footer, and I have a specific div that needs to extend all the way down to the footer. However, simply setting the height to 100% doesn't achieve the desired result. I've also experimented with ...

htmlcsssticky-footer

Issue with radio button functionality in email communication

I'm experiencing an issue with a form that contains 2 sets of radio buttons. The first set has 5 options, while the second set has 2 options. The form functions correctly, but upon submission, the email only displays the first option selected instead ...

phphtmlbootstrap-4

Tips for embedding an Android Fragment within a Flutter application natively, specifically when dealing with a MutableContextWrapper and the requirement to insert it into the View class

I am looking to integrate a native view into my Flutter app. Specifically, I have an Android Fragment that I want to add to the View class registered in the FlutterEngine. However, adding Fragments requires: (context as FragmentActivity).supportFragmentMan ...

javaandroidflutterkotlinnative

The background in the HTML code won't be displayed

I am struggling to make a video background activate, but I can't seem to get it to play. <section class="home-section home-full-height bg-dark-30" id="home" data-background="assets/images/section-5.jpg"> & ...

htmlbootstrap-4

Switch a div to a computed location

I'm having trouble getting this code to animate a div to a calculated position. Can someone please help me troubleshoot? $(document).ready(function() { var is_Clicked = false; $("#togglebutton").click(function() { if (is_Cli ...

javascriptjqueryhtmlcss

Avoid the expansion of line decorations in Monaco editor

I am looking to create a Monaco editor line decoration that remains contained within its original position when I press enter after the decoration. For instance, in a React environment, if I set up a Monaco editor and add a line decoration using the code ...

javascripthtmlreactjstypescriptmonaco-editor

Is it possible to display a photo pixel by pixel using CSS and HTML?

Have you ever considered if it would save space to print out an entire image using CSS and HTML pixel by pixel? I'm not referring to using background-image or anything like that, but something along these lines: <div style="height:1px, width:1px, ...

htmlcss

Position pictures in the same row in a straight line

I am struggling to align a set of images properly. The screenshot below shows the current layout: My goal is to have all four images lined up in a single row, with any additional images starting on a new row. I have attempted various methods, but none ha ...

htmlcss

VS Code warning about unused CSS selectors in SvelteKit

Is there a way to get rid of the Unused CSS selector warning in VS Code? I keep getting this warning in all files where I use <style lang="scss">. While I'm aware that I don't use the .btn class in some components, I still want it ...

cssvisual-studio-codesasssveltesveltekit

How can I store all selected dropdown values in the URL parameters whenever a dropdown option is changed?

In mypage.php, I have set up three drop-down menus: <select name='vehicle'> <option value=''>Select</option> <option value='bus'>Bus</option> <option value='bike'>Bike</o ...

phpjavascripthtmldrop-down-menu

Is there a way to transform this fixed alignment of divs, etc. into a responsive layout that automatically adjusts to different screen sizes? - Using HTML and CSS3

If you want to see the demo, you can check it out on JSFiddle by clicking on this link: JSFiddle Demo. This webpage utilizes Twitter's Bootstrap framework, which you can find more information about by visiting . When inspecting the stylesheet on JSF ...

htmlcss

Adjust the background color of child divs when the parent div is being hovered over

I am facing a challenge with my current setup: <div class="parent"> <div class="child"> </div> <div class="child"> </div> <div class="child"> </div> </div> My goal is to change the background co ...

javascriptjqueryhtmlcssthis

Do not apply hover effect to a particular child div when the hover effect is already applied to the parent

I am encountering a problem with the hover effect. I have 3 child div's structured as follows: <div class="parent"> <div class="child1">A</div> <div class="child2">B</div> <div class="child3">C</div ...

htmlcss

Steps for implementing a custom markup trigger with prettyPhoto:

Recently, I encountered an issue with my table view: https://i.sstatic.net/Fji2F.png Upon clicking the td, it should open the PrettyPhoto Lightbox In the default PrettyPhoto setup, the html trigger looks like this: <a href="images/fullscreen/2.jpg" ...

javascriptjqueryhtmlcssprettyphoto

Setting the maximum width for images across various Bootstrap responsive sizes: a step-by-step guide

I'm struggling with optimizing images of varying sizes in bootstrap to ensure they are responsive without losing quality. Current Image: https://i.sstatic.net/akoNy.jpg Desired Image: https://i.sstatic.net/37VFX.jpg HTML: <div class="row"> ...

htmlcssbootstrap-4

Is the bottom of the page getting partially hidden when there are more than two rows of elements?

This is a movie review application. When the screen size is on PC and mobile devices, there seems to be an issue where the movie review gets cut off from the 3rd row onwards. This is visible in the provided image, where only the buttons are partially cut o ...

javascripthtmlcss

Choose the text value of the jQuery select menu from the specified column in the table

I need to search through all the select elements in a specific table column with the id "tdcities". I want to compare their ids with the row id and if there is a match, I need to select the text value. Below is the code I am currently using: $("#tdcities ...

javascriptjqueryhtml

Having trouble applying the alternate style sheet to handheld devices

For a single page, I have implemented two different style sheets. <link rel="stylesheet" href="css/lsharecomplete_mob.css" media="handheld" type="text/css" /> <link rel="stylesheet" href="css/lsharecomplete_dt.css" type="text/css" media="Screen" ...

csshtmlmobile