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.
Related
I have a header that I plan to use on the top of all my pages. I'd like to keep it in a separate file (something I'm used to doing with php, but I'm new to the world of Bootstrap); however, I am not sure how I would handle dynamically assigning the active class to the nav-item that represents the current page. Does Bootstrap (4) have a baked-in solution for this sort of thing? I've been searching around but haven't found a good solution yet. Thanks in advance!
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-transparent fixed-top">
<div class="container">
<a class="navbar-brand" href="#">My Site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
Bootstrap includes some jQuery and is not just CSS. However, you can always run some JavaScript or jQuery on page load that toggles the class based on reading an element when the page is loaded. For example you could:
1) have an identifier on each page (eg. class name inside an element on a page that holds the page's name/value). Example:
<h1 class="page-lookup">
Home
</h1>
2) set you jQuery in a function to read for class and grab the value of the element with a .val(). Example:
const activePage = $(".page-lookup").val()
3) Add an id on each in your navbar to uniquely identify them. Example:
<li id="home-page" class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
4) Run a switch case that looks up the stored value (activePage) for a match. In the case that matches you can run jQuery to update the class to include the "active" syntax that will trigger Bootstrap's formatting.
Example:
switch (activePage) {
case Home:
$('#home-page).attr("class", "nav-item active");
break;
case About:
$('#about-page).attr("class", "nav-item active");
break;
}
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 am creating a single page website using Angular 2 and Bootstrap 4.
I created a navbar component that is always on top of the page and I am using page anchor navigation (#id). Please note that I haven't created a routing module (so far it hasn't been necessary to do this).
The navbar code is below:
<nav class="navbar navbar-default fixed-top navbar-inverse navbar-toggleable-md">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggler navbar-toggler-right btn btn-outline-secondary" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<a class="navbar-brand" href="index.html">Garatéa</a>
</div>
<div id="collapseExample" class="navbar-collapse collapse" [ngbCollapse]="isCollapsed">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#home">Início</a></li>
<li class="nav-item"><a class="nav-link" href="#about">Sobre</a></li>
<li class="nav-item"><a class="nav-link" href="#team">Quem Somos</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contato</a></li>
</ul>
</div>
</div>
</nav>
Each link corresponds to a section of the single page website, for example, the home component template is:
<div id="home" class="text-center home-background">
<div class="overlay">
<div class="content">
<h1>Bem vindo à <strong><span class="title-text">Garatéa</span></strong></h1>
<p class="lead">Somos uma inciativa que <strong>aumenta a taxa de sobrevivência</strong> em emergências médicas.</p>
</div>
</div>
</div>
My question is: how can I highlight the link in the navbar that corresponds to the section of the website that I am currently browsing? For example, if I am looking at the team about section, I expect to have an active CSS class on the navbar: <li class="nav-item active"><a class="nav-link" href="#about">Sobre</a></li>.
You can use the srcElement on click of that <a> tag as below
<a class="nav-link" (click)="clickedLink($event)">Início</a>
<a class="nav-link" (click)="clickedLink($event)">Início</a>
<a class="nav-link" (click)="clickedLink($event)">Início</a>
Method will be as
clickedLink(e){
let element = e.srcElement;
console.log(e)
for(let i =0; i <element.parentElement.children.length ; i++){
if(element.parentElement.children[i].classList.contains('active')){
element.parentElement.children[i].classList.remove('active')
}
}
element.classList.add('active');
}
LIVE DEMO
I want to create a simple navbar using Bootstrap, but when the screen size reduces the header spans over 2 - 3 rows and starts shadowing the form. Is there anyway to restrict the header to just one line?
https://jsfiddle.net/jaiasher88/8879m9yc/
<nav class="navbar navbar-default navbar-fixed-top">
<div class = "container-fluid">
<a href = "page-list.html" class = "navbar-text pull-left no-left-margin">
<span class = "glyphicon glyphicon-chevron-left glyphiconBackProperties default-blue"/>
</a>
<a class = "navbar-brand default-blue" href = "#">
Edit Page
</a>
<a href = "page-list.html" class = "navbar-text pull-right">
<span class = "glyphicon glyphicon-plus glyphiconPlusProperties default-blue"></span>
</a>
</div>
</nav>
I've looked over this code about ten times now and I can't seem to get the nav bar to work properly when on mobile. It just doesn't work when I click on it.
Edit: We're using React to render the navbar to the page. Added the entire JS file so you can take a look.
var NavLoggedIn = React.createClass({
render: function() {
return (
// <div className ="navcontainer">
// <nav>
// <a href='/index'>Index</a>
// <a href='/pod-search'>POD Search</a>
// <a href='/book-now'>Book Now</a>
// <a href='/current-bookings'>Current Bookings</a>
// <a href='/historic-bookings'>Historic Bookings</a>
// <a href='/contact-us'>Contact Us</a>
// <a href='/pod-profile'>pod profile</a>
// <a href='/my-profile'>My profile</a>
// <a href='/login'>Log In</a>
// </nav>
// </div>
< nav className = "navbar-fixed-top navbar-inverse"
id = "navColor" >
< div className = "container-fluid" >
< div className = "navbar-header" >
< button type = "button"
className = "navbar-toggle collapsed"
data - toggle = "collapse"
data - target = "#navbar"
aria - expanded = "false"
aria - controls = "navbar" >
< span className = "icon-bar" > < /span>
<span className="icon-bar"></span >
< span className = "icon-bar" > < /span>
</button >
< /div>
<div id="navbar" className="collapse navbar-collapse" >
<ul className="nav navbar-nav" id="center myNavbar">
<li id="color" >My Profile </li>
<li>POD Search</li>
<li>Current Bookings </li>
<li>Historic Bookings</li>
<li>Contact Us </li>
<li>Log Out </li>
</ul>
</div>
</div>
</nav>
)}
});
var NavLoggedOut = React.createClass({
render: function() {
return (
<div className ="navcontainer">
<nav>
<a href=' / pod - search '>POD Search</a>
<a href=' / contact - us '>Contact Us</a>
<a href=' / login '>Log In</a>
<a href=' / pod - profile '>pod profile</a>
</nav>
</div>
)}
});
var logged = true;
if (logged) {
ReactDOM.render(<NavLoggedIn />, document.getElementById('
navbar '));
} else {
ReactDOM.render(<NavLoggedOut />, document.getElementById('
navbar '));
}
Also when I click on the hamburger button so many times the nav bar vanishes.
Can anyone help me with this?
I had the same problem and worked for me when I switched the data-target field.
Try using this instead.
<nav class="navbar-fixed-top navbar-inverse" id="navColor">
<div class="container-fluid">
<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 id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="center myNavbar">
<li id="color">My Profile
</li>
<li>POD Search
</li>
<li>Current Bookings
</li>
<li>Historic Bookings
</li>
<li>Contact Us
</li>
<li>Log Out
</li>
</ul>
</div>