I'm trying to change the color f my navbar buttons with the "white" class, but for some reason they are unresponsive to my css. The first html snippet is the unresponsive ones, and the second is where it worked fine.
.white {
color: #aaaeb5;
}
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="white">About</li>
<li class="white">Who We Are</li>
<li class="white">Services</li>
</ul>
<div class="container-fluid">
<div class="row">
<footer class="footer">
<h3 class="white col-sm-12 text-center">Palacios Beauty Salon</h3>
<h5 class="white col-sm-12 text-center"><i class="fa fa-building white padding" aria-hidden="true"></i>290 Broadway, Brooklyn, 11211</h5>
<h5 class="white col-sm-12 text-center"><i class="fa fa-phone white padding" aria-hidden="true"></i>(718) 123-4567</h5>
<h5 class="white col-sm-12 text-center"><i class="fa fa-envelope-o white padding" aria-hidden="true"></i>Palaciossalon#gmail.com</h5>
</div>
</div>
The reason behind this is the <a> tags. You have three options to do it:
adding class white to the <a> tags, not the parent <li> tags:
<ul class="nav navbar-nav navbar-right">
<li><a class="white" href="#About">About</a></li>
<li><a class="white" href="#Who We Are">Who We Are</a></li>
<li><a class="white" href="#Services">Services</a></li>
</ul>
adding !important to your CSS:
.white {
color: #aaaeb5 !important;
}
adding .white a to your CSS:
.white, .white a {
color: #aaaeb5;
}
I recommend option #1.
you need to target the links a to override the default color set by the browser:
.white a {
color: #aaaeb5;
}
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="white">About</li>
<li class="white">Who We Are</li>
<li class="white">Services</li>
</ul>
<div class="container-fluid">
<div class="row">
<footer class="footer">
<h3 class="white col-sm-12 text-center">Palacios Beauty Salon</h3>
<a href="https://www.google.com/maps/place/290+Broadway,+Brooklyn,+NY+11211/#40.7083862,-73.9605364,17z/data=!3m1!4b1!4m5!3m4!1s0x89c25be0961830a5:0xc6f496d3baa1bd27!8m2!3d40.7083862!4d-73.9583477">
<h5 class="white col-sm-12 text-center"><i class="fa fa-building white padding" aria-hidden="true"></i>290 Broadway, Brooklyn, 11211</h5>
</a>
<h5 class="white col-sm-12 text-center"><i class="fa fa-phone white padding" aria-hidden="true"></i>(718) 123-4567</h5>
<h5 class="white col-sm-12 text-center"><i class="fa fa-envelope-o white padding" aria-hidden="true"></i>Palaciossalon#gmail.com</h5>
</div>
</div>
Related
Sorry if it's a stupid question, I'm only starting to learn HTML, CSS and bootstrap. I've been trying to get a five-column footer on bootstrap.
So far I have achieved the five columns, but after hours of trying different things I have given up. I can't seem to figure out how to align the items in these columns.
You can see the full site here:
https://stevenarroyave.github.io/UPTAKE/
and the repo here:
https://github.com/stevenarroyave/UPTAKE
this is what I want it to look like:
https://drive.google.com/file/d/1bp2ZitBU4VGjPLhevdDZPBG5BeyEAO5X/view?usp=sharing
<footer>
<div class="col-sm-12 text-left">
<div class="row">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
<img id="logo" class="logo" src="img/FooterLogo.png"></img>
</div>
<div class="col-sm-4 text-left">
<h5 class="text mb-4">UPTAKE</h5>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<h5>About us</h5>
<li class="list-inline-item">
<h5>Contact Us</h5>
</li>
<li class="list-inline-item">
<h5>Blog</h5>
</li>
</ul>
</div>
<div class="col-sm-4 text-left">
<h5 class="text mb-4">HELP</h5>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<h5>FAQ</h5>
<li class="list-inline-item">
<h5>Tips and suggestions</h5>
</li>
<li class="list-inline-item">
<h5>Customer service</h5>
</li>
</ul>
</div><!-- end inner row -->
</div>
</div>
<div class="col-sm-5 five-two">
<div class="row">
<div class="col-sm-6 text-left">
<h5 class="text mb-4">LEGAL</h5>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<h5>Privacy Notice</h5>
<li class="list-inline-item">
<h5>Terms of use</h5>
</li>
<li class="list-inline-item">
<h5>How to use Uptake</h5>
</li>
</ul>
</div>
<div class="col-sm-6 text-left">
<h5 class="text mb-4">LANGUAGE</h5>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<input type="text" placeholder="English">
</li>
</ul>
</div>
</div><!-- end inner row -->
</div>
</div><!-- end outer row -->
<div class="row">
<div class="col-12 text-right">
<hr>
<h5>Follow us!</h5>
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-youtube"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
</footer>
As of now, I achieved the 5 columns, but as you can see, they all start at different heights, I'd like them to start at the same height, and stop the logo on the first column from resizing when resizing the window.
I also don't know how to get the pink icons on the bottom to show on the same line next to "Follow us!"
Thanks in advance for any help.
I am found some bug and fixed here screenshot change using the red mark arrow.
And your output is:
You need to defined align item to baseline. Try it specifically for footer row.
.row { align-items: baseline;}
Using Bootstrap 4.
I'd like to display a Twitter 'share' button within each accordion item when it's expanded.
I can get the button to display outside of the accordion, just not inside.
I think it has something to do with the class=="collapse" on the accordion <div>, because when I remove it the button displays. I have demonstrated this in my code, class="collapse" has been removed from one accordion item and it works.
My code is below, and a link the a fiddle.
I have commented the code showing where the button works and doesn't work.
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<div class="row">
<div class="col-md-12">
<div id="accordion" role="tablist">
<!-- works here outside accordion -->
Tweet #share
<div class="card list-view-brand">
<div class="card-header" role="tab">
<p title="Click to expand">
<a data-toggle="collapse" id="#4367" href="#4367" aria-expanded="false" aria-controls="4367" class="collapsed">
item 1
</a>
</p>
</div>
<div id="4367" class="" role="tabpanel" data-parent="#accordion" style="">
<div class="card-body">
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<small class="text-muted">ID</small>
<p class="my-0">4367</p>
</div>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<small class="text-muted">Language</small>
<p class="my-0">fre</p>
</div>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<!-- works here when class="collapse" removed from parent div -->
Tweet #share
</li>
</ul>
</div>
</div>
</div>
<div class="card list-view-brand">
<div class="card-header" role="tab">
<p title="Click to expand">
<a data-toggle="collapse" id="#4368" href="#4368" aria-expanded="false" aria-controls="4368" class="collapsed">
item 2
</a>
</p>
</div>
<div id="4368" class="collapse" role="tabpanel" data-parent="#accordion" style="">
<div class="card-body">
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<small class="text-muted">ID</small>
<p class="my-0">4368</p>
</div>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<small class="text-muted">Language</small>
<p class="my-0">ita</p>
</div>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<!-- doesnt work here -->
Tweet #share
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Any advice is appreciated.
What you can do is change the class of the share link.
From class="twitter-hashtag-button" to class="fa fa-twitter"
So the code would look something like this :
<!-- doesnt work here -->
Tweet #share
After doing this just style the .fa class like
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
The updated fiddle
I am using bootstrap to create a web site.
Here is the code for navbar
Edit: Fiddle http://jsfiddle.net/cb6rxu2h/
<header>
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-fluid">
<div class="navbar-header col-md-4 col-sm-12">
<a class="navbar-brand" href="#">BargainKart</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="badge pull-right">4</span><i class="fa fa-shopping-cart"></i>
</a></li>
<li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-sign-in"></i>
Sign in</a></li>
</ul>
</div> <!--container fluid-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-right">
<li>About</li>
<li class="dropdown">
Categories <span class="caret"></span>
<ul class="dropdown-menu">
<li>Electronics</li>
<li>Fashion</li>
<li role="separator" class="divider"></li>
<li>All</li>
</ul>
</li>
</ul>
<div class="col-sm-6 col-md-3 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i>
</button>
</div>
</div>
</form>
</div>
</div><!-- /.navbar-collapse -->
</nav>
</header>
And the code for sidebar
<div class="wrapper">
<aside>
<div class="categories-bar content-fluid col-md-3 col-sm-12">
<ul class="nav nav-pills nav-stacked">
<li class="active">Home</li>
<li>About</li><li class="active">Home</li>
<li>About</li><li ">Home</li>
<li>About</li> <li>Shop</li>
</ul>
</div>
</aside>
The css I've used is
aside {
padding-bottom: 5000px;
margin-bottom: -5000px;
background-color: white;
font-size: 1.5em;
}
.wrapper {
position: relative;
overflow: hidden;
}
I've messed up a lot but still can't figure out why the sidebar and wrapper div is overlapping into header.
I can use padding but when I scale the browser there's lot of empty space for small screen browsers.
Since you use the navbar-fixed-top giving the body a padding of the navbars height should fix this problem. Replace XX with your value of the height in pixels.
body {
padding-top: XXpx;
}
You can get this tip here.
I'm new to the world of UI design. I'm trying to get a basic page up & running with bootstrap. What I'm after is the underlying reason for using bootstrap which is to scale the page & it's components depending on the device on which the web page is loaded. I'm failing just with this very requirement :)
Here's the code I'm trying to get working
<div class="container-fluid">
<div class="row-fluid ">
<div class="row row-eq-height ">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 bg-primary pull-left">
<a id="home_btn" href="#"><i class="material-icons col-xs-1 col-sm-1 col-md-1 col-lg-1 " style="padding-top: 12px;font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000; text-align: left;">home</i></a>
</div>
<div class="col-xs6 col-sm-6 col-md-6 col-lg6 bg-primary">
<div class="page-header text-center" >
<p> <h2>BOOTSTRAP TRIAL </h2> </p>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center bg-success" style="padding-top: 20px;">
<h3> LOGGED IN</h3>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg- bg-primary text-right pull-right">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="material-icons" style="font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000;text-align:right;padding-left: 215px; ">account_circle</i>
</a>
<ul class="dropdown-menu">
<li>Account Settings <span class="glyphicon glyphicon-cog pull-right blue"></span></li>
<li class="divider"></li>
<li>User stats <span class="glyphicon glyphicon-stats pull-right blue"></span></li>
<li class="divider"></li>
<li>Messages <span class="badge pull-right blue"> 42 </span></li>
<li class="divider"></li>
<li>Favourites Snippets <span class="glyphicon glyphicon-heart pull-right blue"></span></li>
<li class="divider"></li>
<li>Sign Out <span class="glyphicon glyphicon-log-out pull-right blue"></span></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
This code doesn't re-size all the contents of the web page being loaded. I see just half the contents when I click on "restore" button of the browser.
A few questions
1) My understanding of bootstrap is that it is mobile first technology meaning, if we were to develop for small devices, then it could scale up to anything big. Please correct me if I've misunderstood this. Hence, Does one have to specify, -xs-, -md- & -lg- for all the elements in question to get the re-size working or is specifying -xs- enough? If not, which of these should I specify so that the scaling automatically happens across any device.
2) Is responsive web design only about handling content re-sizing?
I'd highly appreciate any help to get me moving here please.
Can you please check this code
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row-fluid">
<div class="row row-eq-height">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 bg-primary pull-left">
<a id="home_btn" href="#"><i class="material-icons col-xs-1 col-sm-1 col-md-1 col-lg-1" style="padding-top: 12px;font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000; text-align: left;">home</i></a>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 bg-primary">
<div class="page-header text-center" >
<p> <h2>BOOTSTRAP TRIAL </h2> </p>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center bg-success" style="padding-top: 20px;">
<h3> LOGGED IN</h3>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 bg-primary text-right pull-right">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="material-icons" style="font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000;text-align:right;padding-left: 215px; ">account_circle</i>
</a>
<ul class="dropdown-menu">
<li>Account Settings <span class="glyphicon glyphicon-cog pull-right blue"></span></li>
<li class="divider"></li>
<li>User stats <span class="glyphicon glyphicon-stats pull-right blue"></span></li>
<li class="divider"></li>
<li>Messages <span class="badge pull-right blue"> 42 </span></li>
<li class="divider"></li>
<li>Favourites Snippets <span class="glyphicon glyphicon-heart pull-right blue"></span></li>
<li class="divider"></li>
<li>Sign Out <span class="glyphicon glyphicon-log-out pull-right blue"></span></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
I want to create navigation bar [vertical] with bootstrap 3.
I tried this but it didn't work.
<ul class="nav nav-pils nav-stacked">
<li>jedan</li>
<li>dva</li>
<li>tri</li>
<li>cetriri</li>
<li>pet</li>
</ul>
I tried a lot of examples but it is all with old bootstrap. How to create that navigation with new bootstrap?
nav-pills class needs two l:
<ul class="nav nav-pills nav-stacked">
<li>jedan</li>
<li>dva</li>
<li>tri</li>
<li>cetriri</li>
<li>pet</li>
</ul>
http://getbootstrap.com/components/#nav-pills
It looks like you are missing an l in nav-pills (you have it listed as nav-pils)
<ul class="nav nav-pills nav-stacked">
<li>jedan</li>
<li>dva</li>
<li>tri</li>
<li>cetriri</li>
<li>pet</li>
</ul>
http://getbootstrap.com/components/#nav-pills
you could use the pills or you just could write this:
your html:
<!--navigation-->
<div class="navbar navbar-inverse navbar-fixed-left">
<a class="navbar-brand" href="#">LOGO</a>
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i><span> Link1 </span></li>
<li><i class="fa fa-info-circle"></i><span> Link2 </span></li>
<li><i class="fa fa-heart"></i><span> Link3 </span></li>
<li><i class="fa fa-briefcase"></i><span> Link4 </span></li>
<li><i class="fa fa-envelope"></i><span> Link5 </span></li>
</ul>
</div>
<!--end navigation-->
<!-- 1st section-->
<div class="wrapper">
<div class="container" id="home">
<div class="row">
<h2>Link 1</h2>
</div>
</div>
<!-- 2nd section-->
<div class="container" id="info">
<div class="row">
<h2>Link 2</h2>
</div>
</div>
<!--3rd section-->
<div class="container" id="love">
<div class="row">
<h2>Link 3</h2>
</div>
</div>
<!--4th section-->
<div class="container" id="work">
<div class="row">
<h2>Link 4</h2>
</div>
</div>
<!--5th section-->
<div class="container" id="contact">
<div class="row">
<h2>Link 5</h2>
</div>
</div>
</div>
your css:
/* CSS used here will be applied after bootstrap.css */
.navbar-fixed-left {
width: 140px;
position: fixed;
border-radius: 0;
height: 100%;
}
.navbar-fixed-left .navbar-nav > li {
float: none; /* Cancel default li float: left */
width: 139px;
}
.navbar-fixed-left + .container {
padding-left: 160px;
}
.container {
height: 1000px;
}
.wrapper {
margin-left: 140px;
}
working example here: bootply
I came late to the party but in case you just got here and you would like to add toggle to your vertical nav:
<nav class="list-group">
<ul class="nav">
<li>
<a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false" class="list-group-item">Item 1
</a>
<ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
<li>
<a href="#" class="list-group-item">
Item 2
</a>
</li>
<li>
<a href="#" class="list-group-item">
Item 3
</a>
</li>
</ul>
</li>
</ul>
</nav>
Use navbar-pills. It will work.