I'm trying Bootstrap on a small project, But there is something I don't understand or I should do wrong. Here is my snippet:
nav{
background-color: lightblue;
}
section{
background-color: lightgreen;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
<header class="page-header"></header>
<div id="mainContainer" class="row">
<nav class="col-sm-12 col-md-2">
<ul class="nav nav-pills nav-stacked">
<li>Home</li>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</nav>
<section class="col-sm-12 col-md-10">
Here is my content.
</section>
</div>
</div>
An horizontal scroll bar appears, how can I properly fix it, without adding external css rule, using only Bootstrap ones?
You need a use .container for a responsive fixed width Container. Add this class to your div
<div id="mainContainer" class="row container">
Use .container for a responsive fixed width container.
Use .container-fluid for a full width container, spanning the entire width of your viewport.
I believe you forgot your container.
nav{ background-color: lightblue; } section{ background-color: lightgreen; }
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
<header class="page-header"></header>
<div class="container">
<div id="mainContainer" class="row">
<nav class="col-sm-12 col-md-2">
<ul class="nav nav-pills nav-stacked">
<li>Home</li>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</nav>
<section class="col-sm-12 col-md-10">
Here is my content.
</section>
</div>
</div>
</div>
You are missing the container class within your HTML markup, it needs to be:
<div class="container">
<div class="row">
<div class="col-sm-12">
</div>
</div>
</div>
Here is your code with the container class added:
nav{ background-color: lightblue; } section{ background-color: lightgreen; }
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
<header class="page-header"></header>
<div class="container">
<div id="mainContainer" class="row">
<nav class="col-sm-12 col-md-2">
<ul class="nav nav-pills nav-stacked">
<li>Home</li>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</nav>
<section class="col-sm-12 col-md-10">
Here is my content.
</section>
</div>
</div>
</div>
Remove the class 'row' form :
<div id="mainContainer" class="row">
Add a wrapper around the .row with the .overflow-hidden class:
<div class="container overflow-hidden">
Related
I am using bootstrap 4.3. bootstrap 4.3 has sizing classes m-* and w-* to set the height and width of the element. I was able to get container's height and width to 100% and now I am trying to set 100% height and width of the tab-panel.
JSFiddle
<div class="container-fluid w-highlight-container h-100 d-flex flex-column">
<main role="main" class="pb-3">
<ul class="nav nav-tabs mt-3">
<li class="nav-item">
<a class="nav-link active" href="#w-tab1" data-toggle="tab" role="tab">Tab1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#w-tab2" data-toggle="tab" role="tab">Tab2</a>
</li>
</ul>
<div class="tab-content">
<div id="w-tab1" class="tab-pane fade active show" role="tabpanel">
<div class="row">
<div class="col-md-12">
<div class="w-tab1 h-100 w-100">
requires 100% height and 100% width of view port
</div>
</div>
</div>
</div>
<div id="w-tab2" class="tab-pane fade" role="tabpanel">
<div class="row">
<div class="col-md-12">
<div class="w-tab2 h-100 w-100">
requires 100% height and 100% width of view port
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2019 - UI - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
w-100 and h-100 are doing there job as intended, it is just that its parent container is not stretched 100% from side to side... so we start at tab-content and then ensure that 100% width and height is respected... right down to our relevant div which already has a w-100 and h-100 classes.
working code snippet below:
.w-tab1 {
border: solid 2px black;
background-color: green;
}
.w-tab2 {
border: solid 2px black;
background-color: red;
}
.w-highlight-container {
border: solid 2px black;
background-color: #ffd;
}
html,
body {
height: 100%;
}
.tab-content {
height: calc(100vh - (75px)) !important;
width: calc(100vw - (40px)) !important
}
.tab-content>.active {
display: inline-flex;
height: 100%;
width: 100%
}
.tab-content>.active>.row {
display: contents
}
.tab-content>.active>.row>div {
padding-left: 0;
width: 100%;
display: contents;
}
.tab-content>.active>.row>div>.w-100 {
width: 99% !important
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid w-highlight-container h-100 d-flex flex-column">
<main role="main" class="pb-3">
<ul class="nav nav-tabs mt-3">
<li class="nav-item">
<a class="nav-link active" href="#w-tab1" data-toggle="tab" role="tab">Tab1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#w-tab2" data-toggle="tab" role="tab">Tab2</a>
</li>
</ul>
<div class="tab-content">
<div id="w-tab1" class="tab-pane fade active show" role="tabpanel">
<div class="row">
<div class="col-md-12">
<div class="w-tab1 h-100 w-100">
requires 100% height and 100% width
</div>
</div>
</div>
</div>
<div id="w-tab2" class="tab-pane fade" role="tabpanel">
<div class="row">
<div class="col-md-12">
<div class="w-tab2 h-100 w-100">
requires 100% height and 100% width
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2019 - UI - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
How to align the mobile btn to the right? Im using justify-content-between in the row div but its not working.
header {
background-color: orange;
}
<header>
<div class="container">
<div class="row align-items-center justify-content-between">
<div class="col">
<h1 class=" Header__logo">Logo</h1></div>
<div class="col">
<div class="Header__mobile">
<i class="fa fa-bars" aria-hidden="true"></i>
<ul class="Header__mobile_list d-none">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
</div>
</div>
</header>
Your flex property is only visibly affecting direct children of your row. Try putting your button as a direct child of the row.
.sub-navbar {
background-color: #002b31;
height:57px;
font-size: 13px;
margin-top: 175px;
}
This is my CSS file ,
And this is my HTML file
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-default sub-navbar">
<div *ngFor="let nav of navMenu">
<ul class="nav navbar-nav ">
<div *ngIf="nav.link == currentLink">
<li *ngFor="let sub of nav.subMenu">
<a [routerLink]="[sub.link]">
{{sub.name}}
</a>
</li>
</div>
</ul>
</div>
</nav>
</div>
Here is what it looks like the sub menu because menu is okay / Photo
i found a solution :D - weekend
<div class="container-fluid ">
<div class="row">
<nav class="navbar navbar-default sub-navbar">
<div *ngFor="let nav of navMenu">
<ul class="nav navbar-nav " *ngIf="nav.link == currentLink">
<!--<div *ngIf="nav.link == currentLink" >-->
<li *ngFor="let sub of nav.subMenu">
<a [routerLink]="[sub.link]">
{{sub.name}}
</a>
</li>
<!--</div>-->
</ul>
</div>
</nav>
</div>
the problem was in the tag with the ngIf
I am designing a website using twitter bootstrap. Everything is working fine except the header area.
Screenshot
I have used .container-fluid to set the full-width background. And used .container to put the contents within 960px. But the problem is with the logo background. I want logo background area to fill out the left area outside the .container class. Is it possible?
Here is my markup -
<div class="container-fluid full-width">
<div class="row-fluid header-top">
<div class="container">
<div class="span4 logo-area">
<div class="logo">
<h1> hello.</h1>
</div>
</div>
<div class="menu span8">
<div class="navbar">
<ul class="nav" id="nav">
<li> Home </li>
<li> Menu Item2 </li>
<li> Menu Item3 </li>
<li> Menu Item4 </li>
<li> Menu Item5 </li>
<li> Menu Item6 </li>
</ul>
</div>
</div>
</div>
</div>
</div>
Thanks in advance.
It is, but you will need to remove it from the flow of the container either by placing it outside of it, or using CSS to control it by giving it position:absolute etc.
Something like:
<div class="logo">
<h1> hello.</h1>
</div>
<style>
.logo {
position:absolute;
top:100px;
left:100px;
}
</style>
<div class="container-fluid full-width">
<div class="row-fluid header-top">
<div class="container">
<div class="menu span8">
<div class="navbar">
<ul class="nav" id="nav">
<li> Home </li>
<li> Menu Item2 </li>
<li> Menu Item3 </li>
<li> Menu Item4 </li>
<li> Menu Item5 </li>
<li> Menu Item6 </li>
</ul>
</div>
</div>
</div>
</div>
</div>
I think you don't want to use position:absolute property.However you can't make your logo background area to fill out the left area outside the .container class.Because whatever you do it will remain inside .container class. The only way is to either you make the position:absolute or move the your .logo class outside of .container class(just above the the .container class).
Here's the code:
<html>
<head>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.1.1.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="sidebar">
<div style="height: 500px; background: red;"></div>
</div>
<div class="content">
<div style="height: 500px; background: #eee;">
<ul class="tabs">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
</html>
and a link to the live preview: http://jsfiddle.net/7W32Z/.
Why does the border end up below the sidebar? It has to do with the clearfix applied to the <ul class="tabs" /> element, because if I clear: right only, the border jumps up.
Float ul.tabs and the border should be fixed.
http://jsfiddle.net/laheab/7W32Z/3/