I am trying to build a nav-bar that would appear on the left-hand side while the rest of the content would be on the right-hand side. The problem is the nav-bar buttons group is not in the same section with the navbar-header. I want the nav-bar buttons to align together vertically with the navbar-header on the left-hand side, but right now they just overlap each other. Not only that, it looks like the buttons group is sitting/overlapping between the navbar-header and the rest of the HTML content.
Much appreciate all the help that can point me to fix this! Thank you!
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-lg-2">
<nav class="navbar navbar-default navbar-fixed-side">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="./">Lessons</a>
</div>
<div class="btn-group-vertical navbar-btn">
<div class="btn-group navbar-btn">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
Lesson #1<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Lecture</li>
<li>Quiz</li>
<li>Exam</li>
</ul>
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
Lesson #2<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Lecture</li>
<li>Quiz</li>
<li>Exam</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<div class="col-sm-9 col-lg-10">
<div id="lesson">
<h2>Choose a lesson on the left panel to start your study module.</h2>
</div>
</div>
</div>
</div>
First off, You seem to be missing a outline CSS.
I assume the code is also incomplete, as I do not see at the very least a "body" tag. Note, if you do have a outline CSS, and you didn't include it, that may also be your issue.
Towards alignment, you can use "margin(-*):[distance][unit];", or "align="[Center, right, justified, etc]"
Related
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.
Using bootstrap I'd like to show combobox which should expand and show its items into visible part of web page.
Given following snippet:
<div class="row">
<div class="col-xs-5">I contain long label</div>
<div class="col-xs-3"></div>
<div class="col-xs-4">
<div class="dropdown">
<button class="btn btn-default btn-block dropdown-toggle" type="button" data-toggle="dropdown">
<span>Options</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>This is very long text which normally overlays box on right</li>
</ul>
</div>
</div>
</div>
jsfiddle here
When dropdown button is expanded it overflows on right side and causes scrollbar to show.
How it would be possible to utilize free space on left side - e.g. make <ul> and <li> overflow original combobox header on other side and so prevent scrollbar to appear?
Just add class dropdown-menu-right to your ul item like
<ul id="migratorAvailableBuildings" class="dropdown-menu
migratorDropDownRight dropdown-menu-right"
Fiddle
adding .pull-right to ul.dropdown-menu should do it, updated fiddle http://jsfiddle.net/hku8a8nf/3/
I have an angular page where I want a fixed nav bar on top. The title of the page on the left, some buttons in the middle, and a dropdown on the right. I'm using bootstrap and ui-bootstrap and I've got somewhat of a navbar going but I just can't get the dropdown to go to the right. It just stays in the middle no matter what I try. Here's a plunker reproducing my problem. I've tried text-align: right; and float:right; but nothing works!
Any idea what I'm doing wrong here? Or is there a good example that does what I want?
Try reversing the order of your center div and right div (order matters when floating) like so:
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<a class="navbar-brand page-scroll">Test</a>
</div>
<div class="navbar-header page-scroll navbar-right pull-right">
<div class="btn-group" uib-dropdown>
<button id="btn-append-to-single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu"
uib-dropdown-menu role="menu"
aria-labelledby="btn-append-to-single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
</ul>
</div>
</div>
<div class="float-center btn-group form-group row"
data-toggle="buttons">
<label ng-repeat="foo in ctrl.foos" class="btn btn-primary">
<input type="radio"
name="foo"> {{foo}}
</label>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Also, you probably want to give the parent element of your navbar-brand the float: left property so it doesn't span the entire width. And if you want to keep using relative positioning for your center element, you'll need to play around with the values. Left: -15% worked for me with the above changes.
What I can see from the plunker is the css below breaks the position of the dropdown list :
.float-center {
float: right;
left: -35%;
margin: 4px;
}
Two simple solutions could be done:
1. switch the position of the dropdonw button and the middle buttons, forked link here: https://plnkr.co/edit/HAAKWziKM3o6uBE6uZtq?p=preview
change the float from right to left and modify the value of left
Hope this can help you :)
I have searched for my problem, but can not find a solution to mine.
how can I make text wrap in bootstrap 3 drop down menu
here is my html :
<div class="row"">
<div class="col-xs-12 col-sm-12">
<div class="btn-group btn-block">
<button type="button" class="btn btn-primary btn-block btn-lg dropdown-toggle" data-toggle="dropdown">
<span id="promotion"></span> <span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block" role="menu" >
<li ng-repeat="a in model.list">
<a ng-bind="a"></a>
</li>
</ul>
</div>
</div>
</div>
The value of a coming from the database :
If a text gets bigger :
then it breaks my whole page and I can swap the page to the right. If it is a mobile device.
I have tried the solutions in the following question :
Bootstrap dropdown: how to make text wrap nicely
but it did not work for me.
Any Suggestions or any alternatives I can use to have a collapse drop down list in bootstrap twitter 3.
Thanks.
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.