This question already has an answer here:
Why is the Bootstrap Navbar always collapsed? [duplicate]
(1 answer)
Closed 1 year ago.
The navbar links show as block instead of inline even though I'm using <div style="display: inline-block;"> as seen in another post here
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Navbar</title>
</head>
<body>
<h1>Navbar</h1>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Navbar</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div style="display: inline-block;">
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Register</a>
<a class="nav-link" href="#">Sign In</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
Currently, the parent div of your navbar links is inline, so I assume you're referring to the links themselves appearing on top of each other instead of side-by-side. To fix this, simply apply the same styling you used on the parent to the links themselves.
Here are two ways of solving this depending on if you would prefer a solution in the HTML file or in an external CSS file. It is not necessary to include both solutions.
<a style="display: inline-block" class="nav-link" href="#">Register</a>
<a style="display: inline-block" class="nav-link" href="#">Sign In</a>
li > .nav-link {
display: inline-block;
}
Related
EDIT 2: Beware of visual studio IDE sometimes auto filling the CSS initialization for you, my problem was solved in the comments to the question
EDIT: I have verified that I have the latest bootstrap package installed from the manager which corresponds to the version used in the theme which is 5.1.3, however this does not solve the problem.
So I am trying to change the default theme of my ASP.NET core web application, but rather than rendering the theme, it seems to have stripped the website of its default theme and applied plain HTML to the webpage. I am attaching my code as well as a screenshot of the webpage itself, I'm kind of lost on why it is not working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - BulkyBookWeb</title>
<link rel="stylesheet" href="~/css~/css/bootswatchTheme.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/BulkyBookWeb.styles.css" asp-append-version="true" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container-fluid">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">BulkyBookWeb</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Category" asp-action="">Category</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - BulkyBookWeb - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
(Website as it is rendered right now.)
It seems that bootstrap is working but there are a version conflict
as the written bootstrap classes is older than the imported bootsWatch theme
you can either update your current bootstrap version in your Asp Project or get the matched bootsWatch theme version to yours.
I created a navbar that will appear only on large screens
<nav id="sidebar" class="d-none d-lg-block">
...
</nav>
I also created a toggler that will show/hide the navbar on click
<i class="fa fa-bars custom-icon"></i>
The problem is that when I click the icon the navbar does not hide and display: none; does not have any effect when using d-none d-lg-block
How can I solve this ?
I realized that if display is none and we add d-lg-block then the navbar it appears again, which was the main problem as i was not able to hide the nav while that class was still present. So I created a function that will first remove it before hiding
$("#toggler").click(function()
{
if($("#sidebar").css('display') === 'none')
{
$("#sidebar").addClass("d-none");
$("#sidebar").addClass("d-lg-block");
$("#sidebar").toggle();
}
else
{
$("#sidebar").removeClass("d-none");
$("#sidebar").removeClass("d-lg-block");
$("#sidebar").toggle();
}
});
I hope this will be useful to anyone encountering the same thing
d-none sets the display as display:none!important meaning it can only be overwritten by other css that is also !important.
You could try this, although it's not very pretty:
function toggle($elmnt) {
if($elmnt.css('display') === 'none') {
$elmnt.css({'cssText': 'display: block!important;'});
} else {
$elmnt.css({'cssText': 'display: none!important;'});
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="sidebar" class="d-none d-lg-block">
navbar here
</nav>
<i class="fa fa-bars custom-icon"></i>toggle navbar
can you please follow the exact structure to make Navbar using BS4.
pure BS4 Navbar is like below snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-primary navbar-dark">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
I hope this code is help to solve your problem.
Thank you...
Here is the error now showing in browser console, anyone please explain what is this?this is a screenshot of html file
I'm building a web page using Bootstrap, I have added Bootstrap CSS and my CSS into "head" tag. Here is the code-
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Bootstrap css-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>
first web page using bootstrap
</title>
<!-- Font awesome for brand name-->
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet">
<!--Our CSS-->
<link rel="stylesheet" href="CSS\style.css" >
</head>
Here is what I have added into my CSS-
.mybanner{
background-color: rgb(12, 8, 5);
text-align: center;
}
.mybg{
background-color: rgb(161, 86, 86);
}
.other{
width: 30px;
height: 30px;
}
Here is the whole code-
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Bootstrap css-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>
first web page using bootstrap
</title>
<!-- Font awesome for brand name-->
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet">
<!--Our CSS-->
<link rel="stylesheet" href="CSS\style.css" >
</head>
<body>
<!-- Nav bar-->
<nav class="navbar navbar-light navbar-expand-lg mybg" style="background-color: #3be79f;">
<a class="navbar-brand" href="#" style="color: rgb(141, 7, 7); font-size: 25px; font-family: 'Permanent Marker', cursive;"> Stiffy </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Categories
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Beauty</a>
<a class="dropdown-item" href="#">Health</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Lifestyle</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Your Cart</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign In</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<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>
</div>
</nav>
<!--slideshow starts-->
<div class="fluid-container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../Image\unsplash.jpg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Photography</h3>
<p>It is always so much fun!</p>
</div>
</div>
<div class="carousel-item">
<img src="../Image\zombie-945622.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Ghost</h3>
<p>Thank you, Mr. Demon</p>
</div>
</div>
<div class="carousel-item">
<img class="img-1" src="../Image\zombie-979358.jpg" alt="New York" style="width:100%; height: 60%;">
<div class="carousel-caption">
<h3> Oops.</h3>
<p>Ghosts are best.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<!--slideshow ends-->
<!-- Banner starts-->
<div class="fluid-container">
<div class="row" class="mybanner" style= "background-color: #3be79f;
text-align: center;"
>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" >
24*7 Services
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" >
Cheaper in price
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" >
Deliver ASAP
</div>
</div>
</div>
<!-- Banner ends-->
<!-- other stuff-->
<div class="other">
<img src="../Image\bride.jpg">
</div>
<!-- JQuery,JS, BOOTSTRAP JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I have added class properly, don't know why it's not working. Please help me.Thank you.
You are in the folder of html, you should use .. to go out of the folder and then tell to what folder to ender /CSS/ and then to select the file style.css
Use this:
<link rel="stylesheet" href="../CSS/style.css" />
Please swap this:
<link rel="stylesheet" href="CSS\style.css" >
To this:
<link rel="stylesheet" href="../CSS/style.css" >
EDIT: As #renaldo-balaj explains you're in a HTML folder so to access the CSS folder you would need to use ../ to hop up one level in your folder directory then go into CSS then grab styles.css
Also to add you used the wrong \
EDIT 29/11:
Ok I have removed the HTML not needed to show that this works properly.. You must be implementing the solution wrong. You have 2 answers that are correct and this post should be closed due to lack of context and over duplciation of 100 other posts around this relative path issues.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>
first web page using bootstrap
</title>
<!--Our CSS-->
<link rel="stylesheet" href="../CSS/style.css" >
</head>
<body>
</body>
</html>
body {
background-color: black;
}
Folder Structure:
Project
│
│
├───CSS
│ style.css
│
└───HTML
index.html
So here I will try explain further your issue.
\ backslashes are not used in filepaths, as per #birspider's answer which shows the HTML validator state that.
You have your index.html in a HTML folder which isn't normal for a static website so becuase of this unless your CSS file is in the same directory to that HTML file then you need to use the ../ to hop up out of the HTML folder, then /CSS to go into your CSS folder and then /style.css to grab the style.css file and serve it.
Again your DevTools console would of advised you of where it was trying to look and you should be able to debug from there.
Please close this post and accept a answer.
Image from my browser showing that background-color: black; worked from the style.css file: https://ibb.co/ys1Kvvt
your html markup is invalid:
try https://validator.nu/ and you will find (among others)
Error: Bad value CSS\style.css for attribute href on
element link: Backslash ("\") used as path segment delimiter.
At line 20
<link rel="stylesheet" href="CSS\style.css" >
---
Error: Bad value ../Image\unsplash.jpg for attribute src on
element img: Backslash ("\") used as path segment delimiter.
At line 84
<img src="../Image\unsplash.jpg" alt="Los Angeles" style="width:100%;">↩
---
Error: Duplicate attribute class.
At line 124
ass="row" class="mybanner" sty
So I have a fixed navbar using Bootstrap 4
<div class="navbar navbar-expand-lg navbar-dark bg-dark container">
<a href="http://jthink.net/index.jsp" class="navbar-brand">
JThink
</a>
...
In my body tag I have added padding to account for the size of the fixed nav bar
<body style="padding-top: 100px;">
But of course if the screen size is not wide enough for the nav bar (such as a phone) the navbar becomes higher to fit in the links. Hence 100px is no longer large enough to avoid content being hidden by the nav bar.
So how am I meant to deal with this ?
The actual page I am working on is http://www.jthink.net/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid fixed-top bg-dark">
<div class="navbar navbar-expand-lg navbar-dark bg-dark container text-center">
<a href="http://jthink.net/index.jsp" class="navbar-brand">
<img src="http://www.jthink.net/images/icon32.png" width="30" height="30" class="d-inline-block align-top" alt="">
JThink
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
<a class="nav-item nav-link" href="http://blog.jthink.net">
Blog
</a>
<a class="nav-item nav-link" href="http://jthink.net/jaikozforum">
User Forum
</a>
<a class="nav-item nav-link" href="http://jthink.net/songkong">
SongKong
</a>
<a class="nav-item nav-link" href="http://jthink.net/jaikoz">
Jaikoz
</a>
<a class="nav-item nav-link" href="http://albunack.net" target="_blank">
Albunack
</a>
<a class="nav-item nav-link" href="http://www.jthink.net/jaudiotagger/index.jsp">
Jaudiotagger
</a>
</ul>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>
Hope this helps you. The indent of my code is not good, but it had to be indented line by line (i think) so messy code, but readable for you i hope.
The navbar becomes a sort of dropdown menu (with hamburger button).
The point of this all is: You use bootstrap's functions this way nicely, imho.
Good luck with it:)
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 4 years ago.
I have the code at https://codepen.io/hby123/project/editor/ANGLnn, how can I move the inline form to the right? I'm using Boostrap 4. I have attempted to use the float-right class, but it's not working. Am I missing something here.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My Site</title>
<!-- Styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">My Site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup" style="background-color: lime;">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
</div>
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous">
</script>
</body>
</html>
You can give your form a class "form-right" and add the following styles as below.
.form-right{
width: 100% !important;
justify-content: flex-end !important;
}