If I have a navbar that is hiding part of the container. How can I move the container lower in the page so I can see the whole container please? I tried editing a bit in the CSS but I couldn't fix it.
<nav class = "navbar navbar-expand-md navbar-dark bg-dark fixed-top" id = "nav">
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
<span class="navbar-toggler-icon"></span>
</button>
<div class ="collapse navbar-collapse" id = "collapse_target">
<h3 class = "navbar-text">Music Cloud</h2>
<ul class ="navbar-nav" >
<li class = "nav-item">
<a class = "nav-link" href = "index1.php">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">List</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "register.php">Register</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "login.php">Log-in</a>
</li>
</ul>
</div>
</nav>
<div class = "container">
<div class = "row">
<div class = "col-sm-5">
<h2>Register an Account</h2>
<input class = "form-control" type="password" id="password" name = "password"/><br />
<p>Confirm Password:</p>
<input class = "form-control" type="password" id="password2" name = "password2"/><br />
<input type="file" name="image" id="image"><br /><br />
<input class = "btn btn-primary btn-block" type="submit" name="submit" value="Register" />
</div>
</div>
</div>
Related
When I'm trying to take it as mobile version, I don't see the menu by clicking on the place where I showed in the picture. Can someone please help me?enter image description here
<div class = "container">
<div class = "navbar-header">
<button type = "button" class = "navbar-toggle" data-toggle = "collapse"
data-target = "#micon">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<img class = "logo" src = "logo1.png">
</div>
<div class = "collapse navbar-collapse" id = "micon">
<ul class = "nav navbar-nav navbar-right">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</nav>
</header>
did you include the cdn and css links in your index.html and css?
I'm designing a website for a biomedical engineering conference using Bootstrap and am having some trouble configuring it for mobile.
Specifically, on the page titled cochairs.html, the collapsed navbar does not share the same width as the content below it.
Unsure as to how to fix this problem, I wrapped all navbar and image tags in a container with class = "text-center" hoping this would align all of the page's content.
Here's the relevant section of my cochairs.html file:
<div container class = "text-center">
<nav class="navbar navbar-expand-lg navbar-light bg-light" style = "background-color: #0b98de;">
<a class="navbar-brand" href="index.html">NANODDS 2019</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="abstracts.html">Abstracts <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="speakers.html">Speakers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cochairs.html">Co-Chairs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="agenda.html">Agenda</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "registration.html">Registration</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "travel-lodging.html">Travel/Lodging</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "venue.html">Venue</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "sponsors.html">Sponsors</a>
</li>
</ul>
</div>
</nav>
<h2 class = "text-center">Meet the Co-Chairs</h2>
<div class = "container">
<div class = "row">
<div class = "col">
<div class = "caption">
<img src = "anderson.jpg" alt = "anderson" class = "img-container circle-img rounded-circle">
<h4>Daniel Anderson</h4>
<p class = "text-center">Associate Professor, Chemical Engineering and Institute for Medical Engineering and Science, Massachusetts Institute of Technology</p>
</div>
</div>
<div class = "col">
<div class = "caption">
<img src = "qiaobing.png" alt = "qiaobing" class = " img-container circle-img rounded-circle">
<h4>Qiaobing Xu</h4>
<p class = "text-center">Associate Professor, Department of Biomedical Engineering, Tufts University</p>
</div>
</div>
</div>
</div>
</div>
If you know of any effective ways to contain the page's content please let me know. I'm guessing it's a fairly easy fix, I'm just relatively new to Bootstrap. Any help is appreciated, thanks :)
Try adding the img-fluid class to your images.
<img src = "anderson.jpg" alt = "anderson" class = "img-fluid img-container circle-img rounded-circle">
This will make the images responsive to the screen size and now push them outside of the margin.
I have been working with this for awhile. The navbar shows up just fine, but the functionality is not there. Here is the code:
<nav class = "navbar navbar-inverse navbar-fixed-top" role = "navigation" id = "my-navbar">
<div class = "container">
<div class = "navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-ex1-collapse" 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 = "index.html">WM</a>
</div>
<div class = "collapse navbar-collapse" id = "myNavbar">
<ul class = "nav navbar-nav navbar-right">
<li>Projects</li>
<li>Resume</li>
<li>Contact Me</li>
<input type = "button" class="btn btn-info navbar-btn" value = "Blog" onclick = "relocate_blog()" id = "blog-button">
<script>
function relocate_blog() {
location.href = "blog.html ";
}
</script>
</ul>
</div>
</div>
<!--End Container -->
</nav>
<!-- End Navbar -->
<nav class = "navbar navbar-inverse navbar-fixed-top" role = "navigation">
<div class = "container">
<div class = "navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" 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 = "index.html">WM</a>
</div>
<div class = "collapse navbar-collapse" id = "myNavbar">
<ul class = "nav navbar-nav navbar-right">
<li>Projects</li>
<li>Resume</li>
<li>Contact Me</li>
<input type = "button" class="btn btn-info navbar-btn" value = "Blog" onclick = "relocate_blog()" id = "blog-button">
<script>
function relocate_blog() {
location.href = "blog.html ";
}
</script>
</ul>
</div>
</div><!--End Container -->
</nav><!-- End Navbar -->
For some reason, my footer navigation bar when in full desktop mode is being displayed with some menu links being displayed on the same line as the navbar header and then centering themselves vertically when past the navbar header...I just want them to be displayed vertically in a line and cented....
(currently displayed)
Navbar Header Link 1
Link 2
Link 3
(How I actually want it displayed)
Navbar Header
Link 1
Link 2
Link 3
<div class = "container-fixed">
<div class = "row" height = 100%>
<div class = "col-sm-2 col-sm-offset-1">
<!-- Footer About Dropdown -->
<nav class = "navbar navbar-default" id = "bottomabout">
<div class = "container">
<div class = "navbar-header">
<button class = "navbar-toggle" data-toggle = "collapse" data-target = "#navbar-collapse">
<span class = "glyphicon glyphicon-plus"></span>
</button>
<h3 class = "text-center">
About Us
</h3>
</div>
<div class = "collapse navbar-collapse" id = "aboutcollapse">
<ul class = "nav nav-pills nav-stacked">
<li>
<a href = "">
OUR STORY
</a>
</li>
<li>
<a href = "">
BABY REGISTRY
</a>
</li>
<li>
<a href = "">
STORE LOCATOR
</a>
</li>
<li>
<a href = "">
TESTIMONIALS
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class = "col-sm-2">
<!-- Service Footer Dropdown -->
<nav class = "navbar navbar-default" id = "bottomservice">
<div class = "container">
<div class = "navbar-header">
<button class = "navbar-toggle" data-toggle = "collapse" data-target = "#navbar-collapse">
<span class = "glyphicon glyphicon-plus"></span>
</button>
<h3>
Service
</h3>
</div>
<div class = "collapse navbar-collapse" id = "aboutcollapse">
<ul class = "nav nav-pills nav-stacked">
<li>
<a href = "">
CONTACT US
</a>
</li>
<li>
<a href = "">
ORDER STATUS
</a>
</li>
<li>
<a href = "">
FAQ
</a>
</li>
<li>
<a href = "">
SHIPPING POLICY
</a>
</li>
<li>
<a href = "">
RETURN POLICY
</a>
</li>
<li>
<a href = "">
NEWSLETTER
</a>
</li>
<li>
<a href = "">
MY ACCOUNT
</a>
</li>
<li>
<a href = "">
LIVE CHAT
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Shop Footer Dropdown -->
<div class = "col-sm-2">
<nav class = "navbar navbar-default" id = "bottomshop">
<div class = "container">
<div class = "navbar-header">
<button class = "navbar-toggle" data-toggle = "collapse" data-target = "#navbar-collapse">
<span class = "glyphicon glyphicon-plus"></span>
</button>
<h3>
Shop
</h3>
</div>
<div class = "collapse navbar-collapse" id = "aboutcollapse">
<ul class = "nav nav-pills nav-stacked">
<li>
<a href = "">
BABY APPAREL
</a>
</li>
<li>
<a href = "">
BABY GIFTS
</a>
</li>
<li>
<a href = "">
CHRISTENING
</a>
</li>
<li>
<a href = "">
FURNITURE
</a>
</li>
<li>
<a href = "">
BEDDING
</a>
</li>
<li>
<a href = "">
DECOR
</a>
</li>
<li>
<a href = "">
LIGHTING
</a>
</li>
<li>
<a href = "">
SALE
</a>
</li>
<li>
<a>
BRANDS
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Contact Us Footer Dropdown -->
<div class = "col-sm-2">
<nav class = "navbar navbar-default" id = "bottomcontact">
<div class = "container">
<div class = "navbar navbar-header">
<button class = "navbar-toggle" data-toggle = "collapse" data-target = "#navbar-collapse">
<span class = "glyphicon glyphicon-plus"></span>
</button>
<h3>
Contact Us
</h3>
</div>
<div class = "collapse navbar-collapse">
<ul class = "nav nav-pills nav-stacked active">
<li>
<h6>
<b>
BEAUTIFUL BEGINNINGS
</b>
</h6>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class = "col-sm-2">
<h3>
Follow Us
</h3>
<button type="button" class="btn btn-fb"><i class="fa fa-facebook"></i></button>
</div>
</div>
</div>
If you remove the container it will work as you wish.
check the following:
<nav class = "navbar navbar-default" id = "bottomabout">
<div class = "navbar-header">
<button class = "navbar-toggle" data-toggle = "collapse" data-target = "#navbar-collapse">
<span class = "glyphicon glyphicon-plus"></span>
</button>
<h3 class = "text-center">
About Us
</h3>
</li>
<li class = "collapse navbar-collapse" id = "aboutcollapse">
<ul class = "nav nav-pills nav-stacked">
<li>
<a href = "">
OUR STORY
</a>
</li>
<li>
<a href = "">
BABY REGISTRY
</a>
</li>
<li>
<a href = "">
STORE LOCATOR
</a>
</li>
<li>
<a href = "">
TESTIMONIALS
</a>
</li>
</ul>
</div>
</nav>
I'm trying to create a basic bootstrap navbar that has a search bar in the middle of the bootstrap li elements. However, when I do this, it causes the text after the form to jump to the next line. I've tried messing with different classes, but I can't seem to figure this out. Below is an example of what's going wrong. Comment out the <form> and everything looks okay.
Here's the jsfiddle: http://jsfiddle.net/uyf2ddoc/
Thanks for the help!
<head>
<link rel= "stylesheet" href= "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" type="text/css">
<script src= "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id = "sidebar" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class = "navbar-header">
BookMaps
<button class = "navbar-toggle" data-toggle="collapse" data-target = ".navHeaderCollapse"><span class="glyphicon glyphicon-book"></span></button>
</div>
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-left">
<li><a href = '#'>About</a></li>
<li><a href = '#'>Contact</a></li>
</ul>
<span class = "addBookSpan">
<form class="navbar-form">
<span class="input-group">
<input type="text" style="display:inline" class = "form-control inputAB" id="addBook" placeholder = "Add a Book" >
<span class="input-group-btn">
<button class="btn btn-default" id="addBookButton">Submit</button>
</span>
</span>
</form>
</span>
<ul style="display:inline" class = "nav navbar-nav navbar-left">
<li><a>BOOK</a></li>
</ul>
</div>
</div>
</div>
</body>