Hello im trying to put my content area to the right of my vertical nav bar using bootstrap 4. in my current code the content area is under the menu. any suggestions on how to fix it so its next to the menu on the right side.
Thank you
<div class="container-fluid">
<div class="col-3">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#collapsibleNavbar" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse show" id="collapsibleNavbar" style>
<ul class="navbar.flex-column">
<li class="nav-item">
<a class="nav-link" href="index.html">Index</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="container-fluid">
<div class="col-9">
<p>Main Content area</p>
</div>
</div>
Copy the col-9 div and place it after the col-3 div ends. Add d-flex flex-row classes with container-fluid class.
Related
I am working on a final project for a class, and am just learning how to use bootstrap. While I have some working knowledge of HTML and the like (or know where to go if I get stuck), the one thing I cannot figure out for the life of me is how to make the bootstrap columns take up more of the screen. I've copied and pasted the relevant code below, hopefully someone can tell me what I am doing wrong or if this can even be resolved!
I have been looking at other slack posts (I forgot to copy the link, sorry!) and the w3schools website, but am still having the same problem.
<nav class="navbar navbar-expand-sm bg-white navbar-light">
<a class="navbar-brand" href="#">Navbar</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="#">Awards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Papers</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<! –– The columns still aren't taking up 100% of the screen width. ––>
<div class="col-sm-2">
<! –– Ideally more to the left ––>
Welcome the user to the website here
</div>
<div class="col-sm-4">
Brief bit of information about me
</div>
<div class="col-sm-6">
Image carosel (idk how to spell) with images of me, my friends & family
</div>
</div>
</div>
When you use container class its by default takes 80% of window width along with margin right and left auto. For 90% of window you need to use container-fluid class so it cover full width of window. Then you col-4 col-2 and col-5 to achieve 90%.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-sm bg-white navbar-light">
<a class="navbar-brand" href="#">Navbar</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="#">Awards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Papers</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<! –– The columns still aren't taking up 100% of the screen width. ––>
<div class="col-sm-2">
<! –– Ideally more to the left ––>
Welcome the user to the website here
</div>
<div class="col-sm-4">
Brief bit of information about me
</div>
<div class="col-sm-5">
Image carosel (idk how to spell) with images of me, my friends & family
</div>
</div>
</div>
Use this :
<div class="container-fluid">
<div class="row">
<! –– The columns still aren't taking up 100% of the screen width. ––>
<div class="col-sm-2">
<! –– Ideally more to the left ––>
Welcome the user to the website here
</div>
<div class="col-sm-4">
Brief bit of information about me
</div>
<div class="col-sm-5">
Image carosel (idk how to spell) with images of me, my friends & family
</div>
</div>
</div>
I would like my navbar to be divided into 12 sections with each element taking up 1 section, i.e have 12 elements in the navbar. I would also like them to start from the very left of the screen, instead of what I currently have in the image below;
I thought container-fluid and navbar-left would align the elements fully to the left of the navbar but I am really struggling in trying to move them over.
What I Have Tried (my code so far)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container container-fluid">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Directories</li>
<li>Contracts</li>
<li>Processes</li>
<li>Filing</li>
<li>My Profile</li>
</ul>
</div>
</div>
</div>
#RenderBody()
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Am I able to A) Align all the elements in the navbar fully to the left and B) Divide the navbar into 12 "sections" that each element shall take one of?
I am using Bootstrap v3.3.7.
Add the row class to the container:
<div class="container container-fluid">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container row">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Directories</li>
<li>Contracts</li>
<li>Processes</li>
<li>Filing</li>
<li>My Profile</li>
</ul>
</div>
</div>
</div>
#RenderBody()
</div>
jsFiddle
A)
I think you have to take away the container class in the first line, like that:
<div class="container-fluid">
B)
You can add the col-md-1 Bootstrap class to the li elements, like that:
<li class="col-md-1">Directories</li>
If you inspect the navbar you created you will find some padding/margin left generated by bootstrap, just add your own class to that element and set margin or padding you want. You can create as many li elements as you want.
In the output below I can't see my navbar menu correctly. Where is the problem?
Please anyone help me.
I just changed my code bootstrap.css and make this line comment the line name: padding-bottom.
<nav class="navbar navbar-inverse" style="height:120px;">
<div class="container" style="padding-top:30px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a><img class="pull-left" src="images/mt-626_header_logo01.png"></a>
<a class="navbar-brand" href="#"><strong style="color:white">SOFT</strong><strong style="color:#3EC7C2">APP</strong></a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>BLOG</li>
<li>CONTACTS</li>
</ul>
</div>
</div>
</nav>
<!-- First Container -->
<div class="container-fluid fcontaner">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<img src="images/mt-0626-img.png" style="height:100%;width:100%"/>
</div>
<div class="col-md-6">
<h1 style="padding-top:150px"><strong style="color:white;">SOFT</strong><strong style="color:">APP</strong></h1>
<h1>INNOVATIVE SOLUTIONS</h1>
<h3 style="color:white;padding-bottom:50px;">Innovative solutions delivering a product, which <br>includes tomorrow’s technology – already today!</h3>
<img src="images/mt-0626-img2.png">
</div>
</div>
</div>
</div>
You can remove the height from the <nav class="navbar navbar-inverse" style="height:120px;"> if you want as suggested by Ismail.
But if you really want your nav to have a default height, then instead of height you can give min-height as <nav class="navbar navbar-inverse" style="min-height:120px;"> and it will work. Your nav will expand as the content in it increases in height.
Demo:http://www.bootply.com/0JiOM9OxYW
Remove the height and padding-top css.
You have added inline style here <nav class="navbar navbar-inverse" style="height:120px;"> just remove it your problem will solve.
See Demo
I have a site with a single page. The site has seven sections.
The header is fixed, but I would like to change some of its contents in each of the sections .
Any suggestion?
Hugs from Sao Paulo / Brazil
My code
<div class="section"id="home">
<header class="navbar navbar-inverse navbar-fixed-top grid_12 ">
<div class="container col-xs-2 fundo_branco ">
<div class="navbar-header">
<!-- responsive nav button left-->
<button type="button" class="navbar-toggle-left float-left" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars fa-2x"></i>
</button>
<!-- /responsive nav button left-->
</div>
<!-- main nav left -->
<nav class="collapse navbar-collapse navbar-left sobe" role="navigation">
<ul id="nav" class="nav navbar-nav">
<li><img src="assets/img/logo_menu.png" alt=""></li>
<li >HOME</li>
<li>WELCOME</li>
<li>TOP DRINKS</li>
<li>PORTFOLIO</li>
<li>HELP!BLOG</li>
<li>FRANCHISE</li>
<li>CONTATO</li>
</ul>
</nav>
<!-- /main nav left-->
</div>
<div id="header" class="container col-xs-3"> <!-- Sugestion#Snappawapa-->
<h1>Section 1</h1>
</div>
<div class="container col-xs-2 col-md-offset-5">
<div class="navbar-header">
<!-- responsive nav button right -->
<button type="button" class="navbar-toggle float-right" data-toggle="collapse" data-target=".navbar-collapsea">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-square-o fa-2x"></i>
</button>
<!-- /responsive nav button -->
</div>
<!-- main nav right-->
<nav class="collapse navbar-collapsea navbar-left desce" role="navigation">
<ul id="nav" class="nav navbar-nav">
<li>
<a href="#features">
<img src="assets/img/bloco1.png" alt="">
</a>
</li>
</ul>
</nav>
<!-- /main nav right-->
</div>
</header>
</div>
I need in each section change the contents of this div in section #welcome
<div class="container col-xs-3">
<h1>Welcome!</h1>
</div>
Code Section #welcome in this page
<div class="section" id="welcome">
<script>
document.getElementById("header").innerHTML = "<h1>Welcome</h1>";
</script>
This is works, but in the section home changes also.
I want to keep this header for each section. Example:
in section welcome
header=<h1>Welcome</h1>
in section top-drinks
header=<h1>Top drinks</h1>...
JavaScript would probably help you out. Give it an id:
<div id="header" class="container col-xs-3">
<h1>Este conteúdo muda em cada seção!!!!</h1>
</div>
Then you can use some JavaScript to change the contents of it:
document.getElementById("header").innerHTML = "<h1>New Header</h1>";
You could use different events on elements in the page to change it by putting that code in a function:
HTML:
<li >HOME</li>
JavaScript:
function changeHeader(newStuff){
document.getElementById("header").innerHTML = newStuff;
}
Hope this helps
I am using HTML5 boilerplate and Bootstrap to create a website.
I am looking to make the orange and grey banner fixed on scroll but also centered and responsive. At the moment it is fixed on scroll and responsive but NOT CENTERED.
How can i make this element:
- FIXED ON SCROLL
- RESPONSIVE
- CENTRED
Bare in mind that i still want the slider to appear behind the banner as is.
Here is my code for this bit:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav pull-right" id="nav-links">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="span12"> <!--THIS IS THE IMAGE I AM USING-->
<img src="images/PBP_header.png"/>
</div>
</div>
My dev site is: http://dev.paperboyposse.com
Thanks in advance guys!
Ash
Just replace
<div class="span12">
<img src="images/PBP_header.png">
</div>
with
<div class="container">
<div class="span12">
<img src="images/PBP_header.png">
</div>
</div>
It should be fixed, responsive and centered now :)
NOTE : I am not considering the slider as part of header btw.