I wanted to combine my CSS and Bootstrap with MVC but I cannot style my links properly. As far as I know I need to use #Html.ActionLink to redirect my webpage. Is there a way to style it?
Everything works while using pure CSS:
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">LIBRARY</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
This is my MVC:
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="/Index">
#Html.ActionLink("Library", "Index", "MyTemplate", null, new { #class = "mx-auto order-0" })
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
I have also tested this on MVC but still does not style:
#Html.ActionLink("Library", "Index", "MyTemplate", null, new { #class = "mx-auto order-0" })
My index.cshtml file looks like this:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_MasterLayout.cshtml";
}
<h2>Index</h2>
My controller looks like this:
public class MyTemplateController : Controller
{
// GET: MyTemplate
public ActionResult Index()
{
return View("Index");
}
public ActionResult About()
{
return View("About");
}
public ActionResult Contact()
{
return View("Contact");
}
}
}
HTML file:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<title>#ViewBag.title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css">
<link rel="stylesheet" type="text/css" href="Content/style.css">
<link href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#400;700&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.js"></script>
#RenderSection("head", false)
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark" style="background-color: #333;text-align: center;">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Books
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">New books</a>
<a class="dropdown-item" href="#">Recommended books</a>
<a class="dropdown-item" href="#">Available books</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" 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="#">Genres</a>
<a class="dropdown-item" href="#">Formats</a>
</div>
</li>
<li class="nav-item">
#Html.ActionLink("About", "About", "MyTemplate")
<a class="nav-link" href="/About">About</a>
</li>
<li class="nav-item">
#Html.ActionLink("Contact", "Contact", "MyTemplate")
<a class="nav-link" href="/Contact">Contact</a>
</li>
</ul>
</div>
#Html.ActionLink("Index", "Index", "MyTemplate")
#Html.ActionLink("Index", "Index", "MyTemplate", null, new { #class = "mx-auto order-0" })
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="/Index">
#Html.ActionLink("Index", "Index", "MyTemplate", null, new { #class = "mx-auto order-0" })
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<form class="form-inline d-none d-lg-block justify-content-center md-form form-sm mt-0" style="padding: 5px">
<i class="fas fa-search" aria-hidden="true"></i>
<input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search"
aria-label="Search">
</form>
<li class="nav-item">
<a class="nav-link" href="#">Sign Up <i class="fa fa-user-plus" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log In <i class="fa fa-user" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</nav>
<main>
#RenderBody()
</main>
<footer>
<div class="row text-center">
<div class="col-md-4 col-sm-12 social">
<i class="fab fa-github"></i>
<i class="fab fa-linkedin"></i>
<i class="fas fa-envelope-square"></i>
<i class="fab fa-facebook-square"></i>
</div>
<div class="d-none d-md-inline col-md-4">
<p class="me"></p>
</div>
<div class="d-none d-md-inline col-md-4">
<p class="me">Rafal Pawlowski ©2020</p>
</div>
</div>
</footer>
</body>
</html>
Unfortunately styling does not apply. I know I could do #style and style it this way but I wanted all style to be applied in style.css not hardcoding it in each class because it will look bad in my code. Please help
If you want this HTML:
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">LIBRARY</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
Then your MVC should look like this:
<div class="mx-auto order-0">
#Html.ActionLink("Library", "Index", "MyTemplate", null, new { #class = "mx-auto order-0" })
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
You are warapping your Html.ActionLink (which renders as an anchor tag) in another a tag. And you cannot have a link inside a link.
Alternativly, you could do this also (notice the href of the a tag is the Razor Url helper):
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#Url.Action("Index", "MyTemplate")">LIBRARY</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
Related
Firstly i tried to do margin:0, and padding:0 for body element. But it didn't work. I inspected it to see what's going on google developer tools. I saw my .container-fluid class which has some bootstrap properties by default, has padding in left, and right. So when i write in developer tools; .container-fluid{ padding:0} it works, it deletes that free space. But when I do it in my css file, it doesn't work. Since I didn't want to use !important keyword, cause I think It must have worked...So I need your help, what's my mistake? Thanks.
.container-fluid {
padding: 0;
}
.title-image {
width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Python Bootcamp Web Page</title>
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body>
<section >
<div class="container-fluid">
<!--all of element appeared when i wrote navbar-expand-lg-->
<nav class="navbar navbar-expand-lg navbar-light bg-info">
<a class="navbar-brand" href="#">
<i class="fab fa-python"> Python Bootcamp</i>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How We Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Outcomes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6"> <!-- so it will fill 50% of width on screen of laptops, and bigger screens-->
<h1>Download the best bootcamp, and start to study now.</h1>
<button type="button" class="btn btn-lg btn-danger"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-lg btn-light"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="image.jpg" alt="classroom-image">
</div>
</div>
</section>
</body>
</html>
Just take the navbar out of the container...
<section>
<nav class="navbar navbar-expand-lg navbar-light bg-info">
<a class="navbar-brand" href="#">
<i class="fab fa-python"> Python Bootcamp</i>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How We Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Outcomes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<!--all of element appeared when i wrote navbar-expand-lg-->
<!-- Title -->
<div class="row g-0">
<div class="col-lg-6">
<!-- so it will fill 50% of width on screen of laptops, and bigger screens-->
<h1>Download the best bootcamp, and start to study now.</h1>
<button type="button" class="btn btn-lg btn-danger"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-lg btn-light"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="image.jpg" alt="classroom-image">
</div>
</div>
</div>
</section>
Demo
If you also want to remove left/right space from the content area, use p-0 on the container, and g-0 (no-gutters) on the row (otherwise you'll get undesired horizontal scrolling).
Also see: Make a bootstrap 4 container-fluid go full bleed to edge of browser window
In this case, it might be best to just use !important. Or, if you really don't want to, you can make the selector more specific (and thus more "important" that the bootstrap one) by prepending body to it. For example:
body .container-fluid {
padding: 0;
}
.title-image {
width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Python Bootcamp Web Page</title>
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body>
<section >
<div class="container-fluid">
<!--all of element appeared when i wrote navbar-expand-lg-->
<nav class="navbar navbar-expand-lg navbar-light bg-info">
<a class="navbar-brand" href="#">
<i class="fab fa-python"> Python Bootcamp</i>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How We Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Outcomes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row g-0">
<div class="col-lg-6"> <!-- so it will fill 50% of width on screen of laptops, and bigger screens-->
<h1>Download the best bootcamp, and start to study now.</h1>
<button type="button" class="btn btn-lg btn-danger"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-lg btn-light"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="image.jpg" alt="classroom-image">
</div>
</div>
</section>
</body>
</html>
Note that to prevent horizontal scrolling, I also had to add a .g-0 class to the .row element.
My navbar currently has no background, but in the smartphone version it looks a bit odd, so I would like to know if it's possible to only put a white background on the small screen. Thank you!
here's the code:
<nav class="navbar navbar-expand-md navbar-light fixed-top mt-4">
<a class="navbar-brand ml-4" href="index.html">
<img src="img/logo.png" width=100% alt="" loading="lazy">
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item mr-4">
home
</li>
<li class="nav-item mr-4">
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
progetti
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="graphicdesign.html">01. Graphic Design</a>
<a class="dropdown-item" href="videografica.html">02. Videografica</a>
</div>
</li>
<li class="nav-item mr-4">
chi sono?
</li>
<li class="nav-item mr-1">
contattami
</li>
</ul>
</div>
</nav>
Using media queries to fix it.
#media (max-width: 575.98px) {
// some style include here
.navbar.navbar-expand-md.navbar-light{background:#111;}
.navbar.navbar-expand-md.navbar-light .navbar-toggler{background:#fff;}
}
#media (max-width: 575.98px) {
// some style include here
.navbar.navbar-expand-md.navbar-light{background:#111;}
.navbar.navbar-expand-md.navbar-light .navbar-toggler{background:#fff;}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-light fixed-top mt-4">
<a class="navbar-brand ml-4" href="index.html">
<img src="img/logo.png" width=100% alt="" loading="lazy">
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item mr-4">
home
</li>
<li class="nav-item mr-4">
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
progetti
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="graphicdesign.html">01. Graphic Design</a>
<a class="dropdown-item" href="videografica.html">02. Videografica</a>
</div>
</li>
<li class="nav-item mr-4">
chi sono?
</li>
<li class="nav-item mr-1">
contattami
</li>
</ul>
</div>
</nav>
Use a #media (<specified width>) {...} to do this. I have it set for a slightly bigger screen in this example. You can read more about media queries here: https://getbootstrap.com/docs/4.5/layout/overview/#responsive-breakpoints
#media (max-width: 992px) {
.navbar-nav {
background: red;
}
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light fixed-top mt-4">
<a class="navbar-brand ml-4" href="index.html">
<img src="img/logo.png" width=100% alt="" loading="lazy">
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item mr-4">
home
</li>
<li class="nav-item mr-4">
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
progetti
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="graphicdesign.html">01. Graphic Design</a>
<a class="dropdown-item" href="videografica.html">02. Videografica</a>
</div>
</div>
</li>
<li class="nav-item mr-4">
chi sono?
</li>
<li class="nav-item mr-1">
contattami
</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/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
I changed my navbar to full width navbar and after that my input div and ul with icons changed width. Can't fix that tried a lot of but i don't know what is solution for that problem. I am using a container to center that content in navbar maybe tha's the reason.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<nav class="navbar-nav navbar-expand-sm fixed-top">
<div class="container">
<a class="navbar-brand"><img src="path1610.png"></a>
<div class="col-8 col-sm-6 col-md-7 col-lg-5 col-xl-5">
<form class="navbar-form">
<div class="input-group">
<input type="text" class="form-control" placeholder="Let's rock!">
<div class="input-group-append">
<button class="btn btn-outline-primary"><i class="fas fa-search"></i></button>
</div>
</div>
</form>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHidden" aria-controls="navbarHidden" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarHidden">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fas fa-user fa-2x"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link">
<span class="fas fa-bell fa-2x"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fas fa-fire fa-2x"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fas fa-cog fa-2x"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fas fa-comments fa-2x">
</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
Just changed the outer nav class from navbar-nav to navbar and changed container to container-fluid for full width.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<nav class="navbar navbar-expand-sm fixed-top">
<div class="container-fluid">
<a class="navbar-brand"><img src="path1610.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHidden" aria-controls="navbarHidden" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span>
</button>
<div class="col-8 col-sm-6 col-md-7 col-lg-5 col-xl-5">
<form class="navbar-form">
<div class="input-group">
<input type="text" class="form-control" placeholder="Let's rock!">
<div class="input-group-append">
<button class="btn btn-outline-primary"><i class="fas fa-search"></i></button>
</div>
</div>
</form>
</div>
<div class="collapse navbar-collapse" id="navbarHidden">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fas fa-user fa-2x"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link">
<span class="fas fa-bell fa-2x"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fas fa-fire fa-2x"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fas fa-cog fa-2x"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fas fa-comments fa-2x">
</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
I'm trying to let users get informed to enable javascript for better use of the website to I want the message placed above the navigation bar using bootstrap, but instead, they stack upon one another. Don't mind how I describe this.
I want them to be placed in this manner:
But they stack on top of each other this way:
Using Bootstrap 4, please any ideas?
Here's some section of the code
<html>
...
<body>
<noscript class='bg-danger text-light py-2 text-center d-block fixed-top mb-4' style='z-index: 9999;'>Enable javascript to use App better.</noscript>
<header class='navbar fixed-top navbar-expand-lg navbar-light bg-light'>
<div class='container'>
...
</div>
</header>
...
</body>
</html>
In the code below the div parts:
<div class='bg-danger text-light py-2 text-center mb-0'>Enable javascript to enhance this App.</div>
would need to be replaced with noscript. The div is just for easy testing/visibility.
To make the whole thing work, you move everything into a div with the fixed-top class and then add your noscript line followed by the navbar code.
Then you'll also need to add something like style="margin-top: 120px;" to the main container that would follow the fixed-top div to push the main content down.
Click the "run code snippet" button below and expand to full page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="fixed-top">
<div class='bg-danger text-light py-2 text-center mb-0'>Enable javascript to enhance this App.</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</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="#">Link</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">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</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>
</div>
</nav>
</div>
<p style="margin-top: 120px;">first line of text</p>
I'm trying to implement a simple design with a navbar and two side by side wells, but the wells are not aligning with their container, overflowing it horizontally to the right (screenshot at http://imgur.com/a/4XK25)
I'd also like the wells to fit the screen height, but currently they overflow vertically making the user have to scroll down.
Here's my code, JSFiddle renders it differently from Firefox (link to screenshot above), fiddle at https://jsfiddle.net/vrk3vcxb/
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div> <!-- /.navbar-header -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> One
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Two</li>
<li>Three</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li onclick="#">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> Four
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span> Five
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Six</li>
<li>Seven</li>
<li role="separator" class="divider"></li>
<li>Eight</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="well">
</div>
</div>
<div class="col-md-4">
<div class="btn-group btn-group-xl" role="group">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Nine</button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Ten</button>
</div>
<div class="well">
</div>
</div>
</div>
</div>
</div> <!-- top container -->
</body>
Any hints on what I'm doing wrong?
Better to remove 'container' class just above the 'row' class, it will help the overflowing to right.
For the wells to fit the screen height just add some styles: height:100vh
To fix you're overflowing well you might wanna add it into a col... In the fiddle you had it placed outside the col-md-4 div...
As you add content to the wells they should vertically fill the page... you could always add some padding I would also recommend using a separate CSS file and removing the inline styles.
If you need more help let me know and ill amend my answer for you.
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div> <!-- /.navbar-header -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Scans
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Scan files</li>
<li>See previous scans</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li onclick="#">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> Help
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span> Account
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Send feedback</li>
<li>Upgrade account</li>
<li role="separator" class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="row">
<div class="col-md-8">
<div class="well">
<div id="dText" style="background: white; height: 85%; overflow-y:auto; padding:10px;" ></div>
</div>
</div>
<div class="col-md-4">
<div class="btn-group btn-group-xl" role="group">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward" aria-hidden="true"></span> Previous</button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward" aria-hidden="true"></span> Next</button>
</div>
<div class="well">
<div id="dText2" style="background: white; height: 85%; overflow-y:auto; padding:10px;" ></div>
</div>
</div>
</div>
</div> <!-- top container -->
</body>
</html>
You also have a container wrapping the whole thing... But then inside your navbar you have a container-fluid Try and write the whole thing yourself from scratch... use the bootstarp documentaion for a referance
For the wells height you can use, as already suggested VH, or flexbox if no need to support explorer < 9.
As for the grid, you have a nested container class giving an extra padding, your code should look like this:
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div> <!-- /.navbar-header -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> One
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Two</li>
<li>Three</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li onclick="#">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> Four
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span> Five
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Six</li>
<li>Seven</li>
<li role="separator" class="divider"></li>
<li>Eight</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="row">
<div class="col-md-8">
<div class="well">
</div>
</div>
<div class="col-md-4">
<div class="btn-group btn-group-xl" role="group">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Nine</button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Ten</button>
</div>
<div class="well">
</div>
</div>
Codepen: https://codepen.io/giannidk/pen/owpYEG?editors=1100