Looking to position the collapsible button to the right of the navbar in Bootstrap v4, I attempted wrapping the button in:
<div class='nav navbar-nav navbar-right'>
I also tried adding the float-xs-right class without any luck.
A sample plunker has been created for reference:
float-xs-right was originally added in Bootstrap Beta 3, however the plunker CSS file is currently linking to Bootstrap Beta 2. The code functions properly with Beta 3:
Perhaps try using position absolute or fixed and align it to the right side
.navbar .navbar-toggler{
position: absolute;
right: 0;
}
You should also consider moving collapsible content outside of the nav
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">My Brand</a>
<button class="navbar-toggler float-xs-right" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">Expand</button>
</nav>
<div class="collapse" id="exCollapsingNavbar">
<div class="bg-inverse text-muted p-1">
<h4>Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
Check out the updated plunker
easily solved by adding text-align:right
.navbar {
text-align:right;
}
give this code snippet a shot
.navbar {
text-align:right;
}
#exCollapsingNavbar {
text-align:left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<!-- Le styles -->
<link data-require="bootstrap-css" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap-flex.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" />
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="bootstrap" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">My Brand</a>
<button class="navbar-toggler float-xs-right" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">Expand</button>
<div class="collapse" id="exCollapsingNavbar">
<div class="bg-inverse text-muted p-1">
<h4>Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
</nav>
</body>
</html>Does anyone know how to change the color of the date picker that appears in certain browsers but is unsure about the selector's name? HTML: <form action="pledge.html" method="post"> <input type="date" id="birthday" name="user_bda ...
https://i.sstatic.net/HSdlQ.png I am working with an SVG element and I have a query regarding its positioning. <svg style="height: 100%" viewbox="0 0 100 25" preserveAspectRatio="none"> <path fill="blue" d="M0 30 V12 Q30 17 55 12 T10 ...
I am in the process of developing a website that consists of different sections. The concept is simple - by clicking on a button located at the bottom of the page, it will reveal the corresponding div section. For styling purposes, I have initially hidden ...
When I create a parent container div with three child divs and set the display property to inline-block, everything looks great on jsfiddle CSS #container { border: 1px solid blue; padding: 2px; display: inline-block; } .child { width: ...
I was looking to customize the label color for a specific mat-tab. Here's the CSS code I used: .mat-tab-label { min-width: 25px !important; padding: 5px; background-color: transparent; color: white; opacity: 1 !important; font-weight: 700; ...
In my React project, I have incorporated SASS. Now I am looking to find the final compiled CSS file from that SASS code. Whenever I navigate to: While there is the SCSS file visible, where can I locate the CSS version? I am referring to the compiled outp ...
My current approach involves utilizing the .animate method to shift a div 100px to the right in just 1 second. Essentially, this means moving by 1px every 10ms. I am now exploring whether there exists an event that could be triggered after each individual ...
Looking to arrange images in a left-to-right flow while keeping them centered on the screen: https://i.stack.imgur.com/WHBv9.png However, I'm struggling to achieve this as the last image always ends up centered horizontally as shown below: https://i ...
How can I modify the height and width of the cursor in an input field with auto focus? app.component.html <input class="subdisplay" [ngModel]="input | number" type="text" (keyup)="getValue(box.value)" name ...
I'm facing some challenges with setting the maximum height of a background image within a div. I want the max height to be equal to the actual height of the image, without stretching it. Ideally, if there is excess content in the div, it should stop a ...
I am in need of creating a grid layout where each div is a specific width, and the number of rows depends on how many items there are. The twist is that I am unsure of the width of the outer container. My initial solution was to use CSS grid: #container ...
As a newcomer to React, I am currently exploring how to create an animated underline effect when hovering over a NavLink from reactstrap. I have managed to get the underline working on hover thanks to the solution provided at , but I am struggling with imp ...
Currently, I am in the process of creating an HTML page featuring a Bootstrap carousel. To enhance user interaction, I have replaced the standard selector with images that, when clicked, will transition the slider to display corresponding content. In orde ...
I am looking to replicate this specific design using React and React Native [![enter image description here][1]][1] After attempting to implement it with the React Circle Progressbar package from here, I have not been successful in achieving the desired ...
I am looking to create a custom datepicker <input type="text" name="Birth" id="calendarInput" required class="inputField" placeholder="31.12.2001"> <input type="date" name="Birth&qu ...
I'm currently working on an app that searches a Movies database API. I have a main fetch function in App.js, and in tutorials, people are using a search bar within this main APP component. I'm wondering if it would be better to create a separate ...
Take a look at this HTML : <div class="container"> <a id="1"></a> <a id="2"></a> <a id="3"></a> <a id="4"></a> <a id="5" class="specific"></a> <a id="6"></a ...
Currently, I am developing a web application using ASP.NET MVC5. I have been coding and pushing my work to GitHub. However, I recently encountered an issue where I can no longer view my application on the browser. The "View in browser" option has disappear ...
Currently, I am utilizing the sample code provided below to superimpose an element on a Google map. <!DOCTYPE HTML> <html> <head> <title>Google Map Test</title> <style> html, body { margin: 0; ...
I'm a Computer Science freshman and I created a website a few weeks ago. Initially, I checked it only on Safari and everything looked fine. However, when I tried it on Google Chrome, the layout appeared completely different. How can I resolve this iss ...