Basic bootstrap Navbar that remains fixed and includes a button on the right side

Just started working with Bootstrap, I am currently using Bootstrap 4 alpha 6 and having difficulty setting up a basic navbar. I want the brand on the left and a simple button on the right. I have gone through the documentation but haven't been able to resolve my issue. I believe it has something to do with "mr-auto" or a similar property. I attempted using "float-right", however, the button remains below the brand on the left. Here is the code snippet...

<nav class="navbar navbar-light bg-faded">

  <a class="navbar-brand" href="#">My Brand</a>

    <div class="mr-auto">
      <a href=""><button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button></a>
    </div>

</nav>

Any assistance would be highly appreciated.

htmlcssnavbartwitter-bootstrap-4

Answer №1

Consider utilizing helper classes provided by Bootstrap for responsive design. For more information, refer to the documentation: Bootstrap Responsive floats

<nav class="navbar navbar-light bg-faded">
   <div class="col-sm-12">
      <div class="float-left">
         <a class="navbar-brand" href="#">My Brand</a>
      </div>       
      <div class="float-right">
         <div class="mr-auto">
         <a href=""><button class="btn btn-outline-success my-2 my-sm-0 float-right" type="submit">Search</button></a>
         </div>
      </div>
  </div> 
</nav>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">


<nav class="navbar navbar-light bg-faded">
   <div class="col-sm-12">
      <div class="float-left">
         <a class="navbar-brand" href="#">My Brand</a>
      </div>       
      <div class="float-right">
         <div class="mr-auto">
         <a href=""><button class="btn btn-outline-success my-2 my-sm-0 float-right" type="submit">Search</button></a>
         </div>
      </div>
  </div> 
</nav>

Answer №2

If you had included the css code along with the html, it would have been more beneficial. The "navbar-right" class will only float the element above a screen width of 768px. If you want it to float right for all screen sizes, then use the styling of float:right.

Here is an example using the .mr-auto class:

.mr-auto{ float:right; }

I've provided a working example here.

Answer №3

In essence, this question is a duplicate of: Bootstrap 4 align navbar item to the right

To address the issue of preventing the collapse on mobile devices, you can use the navbar-toggle-xl class...

<nav class="navbar navbar-toggleable-xl navbar-light bg-faded">
   <a class="navbar-brand mr-auto" href="#">My Brand</a>
   <a href=""><button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button></a>
</nav>

For more information, please visit: https://www.bootply.com/CTXFJPFIK4

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

What is the best way to conceal an <i> element when the <a> element is devoid of content?

How can I dynamically hide the second phone icon if the corresponding phone number link is empty? The numbers are retrieved from a Google Sheet using SheetDB and displayed using PODS shortcodes. Check out the following code snippet: <p>Get my fr ...

javascriptphpcsswordpress

Error encountered when clicking on a checkbox in Bootstrap: Uncaught TypeError - Unable to access property 'click' of undefined

I'm facing an issue with a simple mvc table in my cshtml page. I am attempting to add a checkbox in one of the columns, but when I click on the checkbox, I receive the following error: Uncaught TypeError: Cannot read property 'click' of un ...

css.netasp.net-mvcrazorbootstrap-4

How about creating a responsive layout using only CSS3 for dynamic width adjustments?

I'm struggling to solve a design challenge involving three columns: a navbar (dark gray), main content (dark red), and sidebar (dark green). The navbar should be expandable and collapsible, while the sidebar should slide in and out. My goal is to make ...

htmlcssflexbox

There was a SyntaxError that caught me by surprise in my Javascript code when it unexpectedly encountered

I have been encountering an error in my code consistently, and I am struggling to comprehend why this is happening. The problematic area seems to be in line 29 of my Javascript file. HTML <link href="Styles12.css"; type="text/css" rel="stylesheet"> ...

javascripthtml

Is it Possible for TD Not to Function as a Hyperlink?

I've exhausted all topics but nothing seems to be working for me! My goal is to have a table completely covered with anchor tags, but for some reason, it's not displaying any links within the TD elements, not even the text! HTML <tab ...

htmlcsshtml-table

Creating a form using Flexbox and responsive design

Looking to implement a responsive login form using Flexbox and achieve a design similar to the mockup images. How can I accomplish this? .wrapper { display: flex; flex-flow: row wrap; text-align: center; background: linear-gradient(to bo ...

htmlcssflexbox

PHP - Dynamically load a div element with filtering options once both date fields are populated

I recently created a leave request form using PHP, Javascript, and CSS. I would like to implement a feature where if the user selects the same date in two different date fields, a new section will appear with two radio buttons for choosing between half d ...

javascriptphpjqueryhtml

Issue with Chrome Browser Border Radius Bug when applied to element with Display: Table

I'm facing an issue with border radius in the Chrome browser. When applying a border-radius to an element styled with dashed border-style and display:table, the background-color exceeds the limit of the border. Here's how it appears in Chrome: ...

css

Tips for extracting and utilizing a JSON object provided by the parent page:

Sorry in advance if this question has already been addressed. I've spent hours searching on Google, but haven't found a satisfactory answer yet. Below is the code snippet I'm working with: <ion-content> <div class="list"> ...

javascripthtmljsonangularjs

If the width is divisible by a certain value

I have a question regarding the width of my element that I want to divide by 90. If this width is a multiple of 90, I set the width of the element. If not, I move on to the next. For example, when the window width is 1000px and the element is at full widt ...

jqueryhtmlcss

How is it possible that the sensitivity of the mobile slideshow is malfunctioning specifically when accessed through the Chrome browser in React?

My React web app features a carousel component that functions perfectly on Firefox. However, in Chrome on mobile devices, when I swipe down the page, it interprets it as a horizontal swipe and switches slides on the slideshow. The library I am using is cal ...

javascripthtmlcssreactjscarousel

Applying CSS text-shadow to an input field can cause the shadow to be truncated

I've encountered an issue when applying text-shadow to an input field, where the shadow appears to clip around the text. Here is the CSS code I used: @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900& ...

cssinput-fieldtext-shadow

Create tab title CSS design that coordinates with the tab content and features circular corners

I am currently working on creating html + css tabs with a unique design. The goal is to have the selected tab display the title connected to the tab content, with a "neck" rounding in like an arrow. After some progress, I have reached a point where the im ...

htmlcsspsd

What is the best way to center a CSS box on the screen?

I am attempting to center the login box on the screen, but when using position: absolute the background color changes to white. /* all */ .patua_font { font-family: 'Patua One', cursive; } .Roboto_font { font-family: 'Roboto&apo ...

htmlcssbootstrap-4

Troubleshooting Tailwind CSS - Issues with Styles not Taking Effect

I've encountered a problem with my project that combines Tailwind CSS and Next.JS. Specifically, I'm facing an issue where certain Tailwind classes are not being applied correctly. For example, when I try to use the bottom-0 class, it doesn' ...

cssnext.jstailwind-css

Playing videos using Ionic's ngFor directive allows for dynamic rendering

I'm attempting to initiate the video playback from ts within the ionic component, but it seems like every time I call video.play(), the video is recreated. Here is my HTML code: <video poster=&qu ...

htmlangulartypescriptionic-framework

I am utilizing Python Django to display a message from a Python file in HTML. While the current code is functional, I would like the message to be showcased as a pop-up or alert notification

Using Python Django. The message is coming from a Python file and I would like to display it in HTML. The current code is functioning, but I would like the message to appear as a pop-up or alert. Register {% if messages %} {% for result in messages %} < ...

javascriptpythonhtmldjango

Confirmation of successful submission of an HTML form

Here is a straightforward html form: <form id="form1" method="post" target="_self"> <input type="text" name="lastname"> <input type="submit" value="Register" /> <form> I am looking to replace the content of this page with a succes ...

asp.nethtmlformssubmitresponse

What is the process for customizing link and hover colors in Bootstrap 4?

I am struggling to change the link and hover color in a specific section of my design, especially since I am new to Bootstrap. Can someone guide me on how to achieve this in Bootstrap 4? Below is a simple code snippet I have attempted so far: <div cl ...

csstwitter-bootstraphovertwitter-bootstrap-4bootstrap-4

Tips on targeting a node that is dynamically generated within a function and styling it externally

Is there a way to style or change divs created within a function, but without making the change within that same function? Since variables are in the local scope of functions, it can be challenging to access these created divs for future styling or changes ...

javascripthtml