I've been learning Bootstrap 5 for sometime now and tried to combine Bootstrap with flex-box to create a navbar that collapses.
But for some reason the flex-box I used for the navbar links is displaying a white line that I cant get rid of. I've tried changing the background-color of the flexbox but it still didn't work,
I think it may be something with the bootstrap but cant find a way to fix it for 2 hours. If someone can tell me how to fix this with the bootstrap or just tell me what I did wrong I would appreciate. Many thanks!
HTML
<!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.0">
<link rel="stylesheet" href="scrap.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>scrap</title>
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-md bg-dark confusing">
<div class="container">
<div class="navbar-brand col-md-2 col-3">
<h2>Protocole</h2>
</div>
<div class="collapse navbar-collapse">
<div class="navbar-nav nav-tabs col">
<div class="nav-item">
Home
</div>
<div class="nav-item">
pages
</div>
<div class="nav-item">
about
</div>
</div>
</div>
<div class="col-2">
<div class="btn btn-light col-md-8 col">Login</div>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
CSS
.confusing{
height: 10vh;
}
.nav-tabs{
display: flex;
justify-content: space-evenly;
text-align: center;
}
.nav-item{
width: 100%;
}
Add this line for .nav-tabs css class: border:none;
Related
I'm trying to obtain a simple layout composed by a stack of header, main section, footer.
I'm using bootstrap 5.
The entire layout must cover all the available space in width and height, overflow (x and y) must be hidden.
Header and wrapper must take all the needed space.
Main section must be in between header and footer and must take all the available space.
Main section is composed by a sidebar and an area that will contain the main content.
Sidebar and main content are disposed side by side.
Sidebar must take 1/6 of the entire width available.
Main content must take the rest of available space in width.
Here is some code:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title></title>
</head>
<body>
<div class="d-flex flex-column wrapper">
<div>
<nav class="navbar navbar-light header">
<div class="px-3">
<a class="navbar-brand" href="#">
Header
</a>
</div>
</nav>
</div>
<section class="flex-grow-1 d-flex section">
<div class="col-2 sidebar">
<ul class="nav flex-column menu-nav">
<li class="nav-item px-3 py-2">
Sidebar
</li>
</ul>
</div>
<div class="col p-2 px-3 content">
Main content
</div>
</section>
<nav class="navbar navbar-light header">
<div class="px-3">
Footer
</div>
</nav>
</div>
</body>
<style>
body {
height: 100%;
width: 100%;
overflow: hidden;
}
.header {
background-color: #1ea185;
}
.wrapper {
height: 100vh;
}
.section {
}
.sidebar {
height: 100%;
overflow-y: auto;
background-color: #fff;
}
.content {
height: 100%;
overflow-y: auto;
background-color: #eff6f6;
}
</style>
</html>
I would like to show overflow-y for sidebar/main content when it's needed. But I would also like to preserve the position of footer.
<div class="col p-2 px-3 content relative">
<div class="absolute inset-0 overflow-y-scroll">
Main content
</div>
</div>
Set the .content container as relative, then put content in inner div of absolute inset-0.
Edit: this is just an example, I was using tailwind syntax on the class, bootstrap might be slightly different classNames
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title></title>
</head>
<body>
<div class="d-flex flex-column wrapper">
<div>
<nav class="navbar navbar-light header">
<div class="px-3">
<a class="navbar-brand" href="#">
Header
</a>
</div>
</nav>
</div>
<section class="flex-grow-1 d-flex section">
<div class="col-2 sidebar">
<ul class="nav flex-column menu-nav">
<li class="nav-item px-3 py-2">
Sidebar
</li>
</ul>
</div>
<div class="col p-2 px-3 content relative">
<div class="absolute inset-0 overflow-y-scroll">
Main content
</div>
</div>
</section>
<nav class="navbar navbar-light header">
<div class="px-3">
Footer
</div>
</nav>
</div>
</body>
<style>
body {
height: 100%;
width: 100%;
overflow: hidden;
}
.header {
background-color: #1ea185;
}
.wrapper {
height: 100vh;
}
.section {
}
.sidebar {
height: 100%;
overflow-y: auto;
background-color: #fff;
}
.content {
height: 100%;
overflow-y: auto;
background-color: #eff6f6;
}
</style>
</html>
So I'm just sandboxing how responsive flex and shrink works in Bootstrap. Below is my code. Nothing seems to work. I've tried using different breakpoints such as lg/md/sm but to no luck. Would appreciate any guidance.
<!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">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<title>Practice </title>
</head>
<body>
<div class="container-fluid">
<div class="row bd-highlight">
<div class="col border border-2 flex-md-shrink-1">Flex item 1</div>
<div class="col border border-2 flex-md-shrink-0">Flex item 2</div>
</div>
</div>
<!-- Optional JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Since .col is flex: 1 0 0% columns will grow, but not shrink so your test isn't doing anything to override .col. You could change flex-grow to override the .col behavior...
<div class="container-fluid">
<div class="row">
<div class="col border border-2 flex-md-shrink-1 flex-md-grow-1">Flex item 1</div>
<div class="col border border-2 flex-md-shrink-0 flex-md-grow-0">Flex item 2</div>
</div>
</div>
https://codeply.com/p/0pUmeIxKEX
Try to use only d-flex and not combine it with bootstrap's grid system (.col and .row)
Here is the modified example:
<!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">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<title>Practice </title>
<style>
.item-container {
width: 100%;
}
.item {
flex-basis: 100%;
flex-shrink: 200px;
}
.item-shrink {
flex-shrink: 3;
}
</style>
</head>
<body>
<div class="item-container d-flex bd-highlight">
<div class="item item-shrink border border-2">Flex item 1</div>
<div class="item border border-2">Flex item 2</div>
</div>
<!-- Optional JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 1 year ago.
I am trying to vertical align the 2 rows I have inside the container-fluid, they are already aligned horizontally. The goal is to have it in the middle of the screen.
<!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>Mapa Gravida</title>
<style>
html, body {
height: 100%;
}
</style>
</head>
<body>
<div class="container-fluid h-100">
<div class="row justify-content-center align-items-center">
<p>O seu email foi enviado com sucesso, deseja criar outro mapa?</p>
</div>
<div class="row justify-content-center align-items-center">
<button type="button" class="btn btn-dark mr-3" onclick="redirectToCardioMap()">Mapa Cardio</button>
<button type="button" class="btn btn-dark" onclick="redirectToPregnantMap()">Mapa Gravida</button>
</div>
</div>
</body>
</html>
preview
You can first add d-flex class to your parent div and align the two rows vertically and horizontally using align-items-center and justify-content-center. Then you can wrap both your rows inside a div. Try below code :
<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>Mapa Gravida</title>
<style>
html, body {
height: 100%;
}
</style>
</head>
<body>
<div class="d-flex container-fluid h-100 align-items-center justify-content-center">
<div >
<div class="row align-items-center">
<p>O seu email foi enviado com sucesso, deseja criar outro mapa?</p>
</div>
<div class="row justify-content-center align-items-center">
<button type="button" class="btn btn-dark mr-3" onclick="redirectToCardioMap()">Mapa Cardio</button>
<button type="button" class="btn btn-dark" onclick="redirectToPregnantMap()">Mapa Gravida</button>
</div>
</div>
</div>
</body>
</html>
I am developing my first .net core web application. I am trying to put my company logo in _layout.cshtml page, but it seems that the style sheet site.css is not recognized by the _layout page. Below is my code for _layout.cshtml page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - VitalRecords</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="headerDiv">
<div class="headerTopBanner"></div>
<div class="headerLogo">
<div class="logo"></div>
</div>
<h1 class="display-4">Welcome</h1>
</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">
© 2020 - test - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
and my site.css has the following defined:
.headerDiv {
background-color: white;
}
.headerTopBanner {
background-color: $header-top-banner-color;
height: 5px;
width: 100%;
}
.headerLogo {
padding: 5px;
padding-left: 10px;
vertical-align: middle;
}
.logo {
background: url(../../images/LogoWithDesc) 0 0;
min-height: 70px;
vertical-align: middle;
}
$header-top-banner-color: #FD810A;
the screen shot of the output looks like so:
I have the similar code in Index.cshtml:
#page
#model IndexModel
#{
ViewData["Title"] = "Home page";
}
<div class="headerDiv">
<div class="headerTopBanner"></div>
<div class="headerLogo">
<div class="logo"></div>
</div>
<h1 class="display-4">Welcome</h1>
</div>
Thats is why the welcome is coming twice on my page, but logo and some other colors are not coming. It seems that site.css is not recognized at all.
any help will be highly appreciated,
Try importing your css link like this
<link href="#Url.Content("~/css/site.css")" rel="stylesheet" type="text/css" />
I've tried to everything to vertically center my h1 and h3 tag in Foundation 6. I've tried the transform translate, flexbox, and tried multiple examples here on stack over flow, and nothing works. When I use absolute positioning to center the content the, the headings get in the way of the top-bar nav on smaller screens, id there anyway to fix this issue, and Could some give me a hand with this? The h1 tag, and the h3 tag are located in line 48, and 49 of my codepen.
Codepen link
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas position-left" id="offCanvas" data-off-canvas data-transition="overlap">
<!-- Close button -->
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
<ul class="vertical menu">
<li>Home</li>
<li>About</li>
<li>References</li>
<li>Contact</li>
</ul>
</div><!-- off-canvas menu -->
<div class="off-canvas-content" data-off-canvas-content>
<!-- Your page content lives here -->
<div class="hero-image">
<div class="expanded header-intro row">
<button type="button" class="button float-right show-for-medium" data-toggle="offCanvas">Menu</button><!-- Button to open off-canvas menu -->
<div class="title-bar" data-responsive-toggle="menu" data-hide-for="medium"><!--top bar navigation -->
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar show-for-small-only" id="menu">
<div class="top-bar-left">
<ul class="dropdown vertical menu" data-dropdown-menu>
<li class="menu-text">Foundation Framework</li>
<li>Home</li>
<li>About</li>
<li>Reference</li>
<li>About</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="small-12 text-center columns">
<h1>Foundation</h1> <!-- CAN'T VERTICALLY CENTER THIS TAG -->
<h3>Foundation For Sites</h3> <!-- CAN'T VERTICALLY CENTER THIS TAG -->
</div>
</div>
</div><!-- Eno of hero-image section -->
</div><!-- off-canvas-content-->
</div><!-- off-canvas wrapper-->
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
you can use flexbox; you need to set a height to your flexbox container to see the centered title
here an example : https://codepen.io/anon/pen/YQPPaM
$(document).foundation();
.hero-image {
background: url(https://www.freewebheaders.com/wordpress/wp-content/gallery/mountains-snow/mountains-snow-header-7050.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 25%;
}
.container{
height : 100vh;
display: flex;
flex-direction : column;
justify-content : center;
align-items : center;
}
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas position-left" id="offCanvas" data-off-canvas data-transition="overlap">
<!-- Close button -->
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
<ul class="vertical menu">
<li>Home</li>
<li>About</li>
<li>References</li>
<li>Contact</li>
</ul>
</div><!-- off-canvas menu -->
<div class="off-canvas-content" data-off-canvas-content>
<!-- Your page content lives here -->
<div class="hero-image">
<div class="expanded header-intro row">
<button type="button" class="button float-right show-for-medium" data-toggle="offCanvas">Menu</button><!-- Button to open off-canvas menu -->
<div class="title-bar" data-responsive-toggle="menu" data-hide-for="medium"><!--top bar navigation -->
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar show-for-small-only" id="menu">
<div class="top-bar-left">
<ul class="dropdown vertical menu" data-dropdown-menu>
<li class="menu-text">Foundation Framework</li>
<li>Home</li>
<li>About</li>
<li>Reference</li>
<li>About</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="small-12 text-center columns container">
<h1>Foundation</h1> <!-- like the h1 centered vertically -->
<h3>Foundation For Sites</h3> <!-- like to have the h3 centered vertically -->
</div>
</div>
</div><!-- Eno of hero-image section -->
</div><!-- off-canvas-content-->
</div><!-- off-canvas wrapper-->
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
try this
h1 {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h3 {
margin: 0;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
Reference: w3schools
I suppose you're using flex-grid, so you can just add align-middle class to you row. This will add align-items: center; attribute, and align your columns' content vertically in the center.
.row {
max-width: 960px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-flow: row wrap;
height: 200px;
}
.align-middle {
align-items: center;
}
.column, .columns {
flex: 1 1 0px;
padding-left: 20px;
padding-right: 20px;
min-width: initial;
}
<div class="row align-middle">
<div class="small-12 text-center columns">
<h1>Foundation</h1> <!-- CAN'T VERTICALLY CENTER THIS TAG -->
<h3>Foundation For Sites</h3> <!-- CAN'T VERTICALLY CENTER THIS TAG -->
</div>
</div>