So I just recently started using bootstrap, and I created navigation buttons. But for some reason I can't put any content to the right of the buttons. I would like to have a section for content to the right of the buttons with a black background.
body{
overflow: hidden;
background-color: #1C213D;
}
ul li{
position: relative;
text-align: center;
list-style: none;
display: block;
color: lightsteelblue;
font-size: 20px;
padding-top: 12px;
padding-bottom: 12px;
margin-top: 200px;
}
.nav{
width: 200px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Home</title>
</head>
<body>
<div class="container-fluid">
<ul class="nav nav-pills nav-stacked" role="tablist">
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
This is a continuation to the above question. If you want to make any bottstrap design responsive i.e if you want it to look same in all screen size you should use these classes col-md-4 col-lg-4 col-sm-4 col-xs-4 together. Also I have used col-lg-offset-1 offset classes as it will create a automatic margin(margin of 1 column in this case) between your elements and the design will look good.
body{
overflow: hidden;
background-color: #1C213D;
}
ul li{
position: relative;
text-align: center;
list-style: none;
display: block;
color: lightsteelblue;
font-size: 20px;
padding-top: 12px;
padding-bottom: 12px;
margin-top: 50px;
}
.nav{
width: 200px;
}
.main{
margin-top:50px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Home</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
<ul class="nav nav-pills nav-stacked" role="tablist">
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
<div class="col-md-7 col-lg-7 col-xs-7 col-sm-7 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 main">
Main content goes here
</div>
</div>
</body>
</html>
Hope this helps!
You can use col-* classes of bootstrap, assign certain columns width to your nav and certain column width to your main content.
Check the result in expanded window.
body{
overflow: hidden;
background-color: #1C213D;
}
ul li{
position: relative;
text-align: center;
list-style: none;
display: block;
color: lightsteelblue;
font-size: 20px;
padding-top: 12px;
padding-bottom: 12px;
margin-top: 50px;
}
.nav{
width: 200px;
}
.main{
margin-top:50px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Home</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="col-md-4">
<ul class="nav nav-pills nav-stacked" role="tablist">
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
<div class="col-md-8 main">
Main content goes here
</div>
</div>
</body>
</html>
Related
This question already has an answer here:
Bootstrap navbar: nothing is displayed on smaller devices
(1 answer)
Closed 1 year ago.
I am trying to make my navigation bar responsive. When I resize my browser to test, the nav bar does collapse but the button is not visible. I tried to set the nav bar background as bg-dark but the button will still be invisible.
This is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Cuppela</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/popper.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/test.css" type="text/css">
</head>
<body>
<div id="nav-menu">
<nav id="main-nav" class="navbar navbar-expand-md fixed-top">
<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="nav navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container-fluid" id="top-main">
<div id="top_text">
<h1>Cuppela Made With Sugar</h1>
<p style="font-size: x-large;">Delicious Homemade Cakes</p>
</div>
</div>
<div id="best-sellers "class="container">
<h2>Best Sellers</h2>
<hr>
<div id="best-seller-cakes" class="row">
<div class="col-xs-12 col-sm-6 col-lg-3">
<img src="images/chocolate_cake.jpg">
<h4>Good<br>Cakes</h4>
<p>Delicious Cake with Awesome Goodness</p>
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<img src="images/red_velvet_cake.jpeg">
<h4>Awesome<br>Cakes</h4>
<p>Delicious Cake with Awesome Goodness</p>
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<img src="images/strawberry_cake.jpg">
<h4>Great<br>Cakes</h4>
<p>Delicious Cake with Awesome Goodness</p>
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<img src="images/cake_seven.jpg">
<h4>Delicious<br>Cakes</h4>
<p>Delicious Cake with Awesome Goodness</p>
</div>
</div>
</div>
</body>
</html>
This is my css:
body{
margin: 0px;
}
li a:hover {
background-color: #ff9900;
border-radius: 10px;
}
li a{
color: white !important;
}
.nav-link{
padding: 0 0 .2rem
}
#top-main{
background-image: url(../images/cake_six_two.jpg);
height: 100vh;
}
#nav-menu{
font-size: medium;
position: relative;
}
#top_text{
color: white;
text-align: center;
position: relative;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
h1{
font-size: 500%;
text-align: center;
}
h2{
text-align: center;
}
#best-sellers{
text-align: center;
}
#best-seller-cakes{
text-align: center;
}
h4
{
font-size: x-large;
font-weight: bold;
font-family: Georgia, 'Times New Roman', Times, serif;
}
Edit: Removed webpage link as link no longer exists
Resulting change - The issue is in your HTML.
Add this two classes to the <nav> </nav> element in your HTML more details cna be found on the bootsrap page.
navbar-dark bg-dark
or the result will be -
<nav id="main-nav" class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
by changing these two classes or modify their properties you can change the behavior. And don't override the bootstrap classes, add your own to override the CSS properties you need to change
Add this Class navbar-dark bg-transparent
<nav id="main-nav" class="navbar navbar-expand-md fixed-top navbar-dark bg-transparent">
your issue is on the a css file called_transitions.scss
I have looked at your code and I found out you have a css rule that will set the navbar's display property to none when it goes below 750 width-pixels
Try looking at this file and either edit it to just compress your navbar or try removing the code
on the code, this is the part that makes your navbar not visible when scaling
.collapse {
&:not(.show) {
display: none;
}
}
You actually apply transparent background and border css on Collapse button, this is the reason why collapse button not visible.
Goto line no 109 on _navbar.scss file and you will find below CSS.
.navbar-toggler {
padding: .25rem .75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: .25rem;
}
Just replace background-color: transparent; to background-color: white;
.navbar-toggler {
padding: .25rem .75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid white;
border-radius: .25rem;
}
I hope it'll resolve your issue. Thank You
I've been having trouble and I'm when I searched the web, I couldn't find the solution to this.
I'm currently using bootstrap to create my website, but when I shrink the page down to mobile/tablet-sized, my navbar list shifts to the left. I want it center-aligned, but ONLY when the screen is small. Otherwise, I want my list to be on the right.
I've included a code sample below:
HTML:
<title>ZebarWorld Landing Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
<link href="index.css" rel="stylesheet"/>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class = "container-fluid">
<div class ="navbar-header">
<a class="navbar-brand" href="#"><img src="LogoPurple.png"></a>
</div>
<span class="navbar-text">
We're currently under construction.<br>Join our waitlist to be the first to play at Zebra World!
</span>
<ul class="nav navbar-nav myNav">
<li><a class="navi" href="#">Sign Up for Updates!</a></li>
</ul>
</div>
</nav>
</body>
CSS:
html,body{
background-color: #EE870D;
width:100%;
height:100%;
>}
.navbar{
background-color: #FFFFFF;
margin-top: 30px;
}
.navbar-header{
}
.navbar-brand{
}
.navbar-brand img{
max-width:100%;
width: 300px;
height: auto;
}
.navbar-text{
text-align:center;
}
.navbar-nav{
border-radius: 25px;
background: #A12F2F;
padding: 10px;
}
.myNav{
text-align: center;
}
.myNav li{
float:none;
display:inline-block;
}
a.navi{
text-decoration: none;
}
a.navi:link{
color:white;
}
a.navi:visited{
color: white;
}
a.navi:hover{
color: black;
}
a.navi:target{
color: red;
}
https://jsfiddle.net/0jpsyot2/1/
You should use these classes justify-content-center justify-content-md-between on container tag
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid justify-content-center justify-content-md-between">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="LogoPurple.png"></a>
</div>
<span class="navbar-text">
We're currently under construction.<br>Join our waitlist to be the first to play at Zebra World!
</span>
<ul class="nav navbar-nav myNav">
<li><a class="navi" href="#">Sign Up for Updates!</a></li>
</ul>
</div>
</nav>
By my suggestion you can use the media query in this code
#media (max-width: 645px){
.nav{
margin-left: 50%;
}
}
in this code i use you nav class and apply media query on this.
or you can also use justify-content-center bootstrap class to centralized your button.
I am trying to create a navbar in bootstrap 3.x. But I have an issue (JsFiddle) when trying to divide the menus to the left and right as in the following example.
Home - About - Services - Contact Login - Register
But the result I get with my code is something like this:
Home - About - Login
Services - Contact Register
This is my code currently.
.site-top-nav{
padding:0.5em;
color: #fff;
font-size: 12px;
width: 100%;
text-transform: uppercase;
}
.site-top-nav li{
margin-left: 2%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse" role="nagivation">
<div class="container-fluid">
<div class="navbar-inner site-top-nav">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav" style="float:right;">
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
</nav>
I have tried other methods, but I can't get the effect I needed.
I did few changes to your existing fiddle.
Just you need to add one more css property
check it here : https://jsfiddle.net/ns82ne1z/5/
.navbar-nav li{
margin-left:10px;
}.
it may help you.
use float: left property to other ul element, and display: inline-block to li element
try using this Jsfiddle code updated
Example below
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container">
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
</body>
</html>
If it helps mark as answer.
you need to do something like the code I will link below:
.body {
margin: 0px;
padding: 0px;
}
.nav-bar {
padding: 0px;
width: 100%;
margin: 0px auto;
}
.nav-bar ul {
list-style-type: none;
}
.nav-bar li {
display: inline-block;
padding: 10px;
}
.left {
position: relative;
right: 30px;
}
.right {
float: right;
}
<html>
<body>
<div class="nav-bar">
<ul>
<li class="left">Home</li>
<li class="left">About</li>
<li class="left">Contact</li>
<li class="left">More</li>
<li class="right">Register</li>
<li class="right">Log In</li>
</ul>
</div>
</body>
</html>
Hopefully this works for you, any issues please report back. It worked in the fiddle so it should apply the same to your project.
Best of luck mate!
Editted on https://jsfiddle.net/ns82ne1z/4/
<div class="container-fluid">
<div class="navbar-inner site-top-nav">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
<li>Register</li>
</ul>
</div>
Add in the following CSS
.site-top-nav li{
padding-left:15px;
padding-right:15px;
}
.navbar-nav>li {
float: left;
}
Hope this helps.
I'm just learning html, css, boostrap.
I want to put an item (navbar, a tag div, ...) under grid, but when I resized my browser, it lays on the grid.
#header {
height: 40px;
}
* {
box-sizing: border-box;
}
#header>div {
padding: 0;
line-height: 44px;
}
#header div a {
text-transform: uppercase;
text-decoration: none;
display: block;
font-size: 12px;
font-weight: 600;
height: 44px;
color: #666;
text-align: center;
margin: 0 auto;
float: both;
}
#header div:hover a {
background-color: lightgrey;
text-decoration: none;
}
<div id="header" class="container-fluid">
<div class="contactinfo col-sm-8">
<p>
<strong>Call : </strong> +84902xxxxxx | <strong>Email: </strong> xxx#gmail.com
</p>
</div>
<div class="col-sm-2 signin">
Sign in
</div>
<div class="col-sm-2 signup" >
Sign up
</div>
</div>
I think you are trying to do this. may it be helpful to you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<!--<a class="navbar-brand" href="#">WebSiteName</a>-->
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">
<strong>Call : </strong>
+84902xxxxxx | </a>
</li>
<li><strong>Email: </strong> xxx#gmail.com  </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</nav>
<div class="container">
</div>
</body>
</html>
First Question
Bootstrap collapse not working when i check responsive...but when i resize my browser it works but still there is a prblem i dont want it to collapsed next to navbar brand...it must be under it
collapseImg
<!DOCTYPE html>
<html>
<head>
<title>Company Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="Bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="Font Awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="Flex Slider/flexslider.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" id="mainNav">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="navbar-header pull-left">
Lorem
</div>
<button type="button" class="navbar-toggle btn navbar-btn" data-toggle="collapse" data-target="#navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse" id="navigation">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
whiteSpaceImg
Second questioin is about white space on right side
<!-- SLIDER -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="flexslider" id="slider">
<ul class="slides">
<li id="slide1"><video id="myVideo" src="./videos/myVideo.mp4" style="width:100%;"></video></li>
<li id="slide2"><img src="Images/Slider Images/image1.jpg"></li>
<li id="slide3"><img src="Images/Slider Images/image2.jpg"></li>
<li id="slide4"><img src="Images/Slider Images/"></li>
<li id="slide4"><img src="Images/Slider Images/"></li>
</ul>
</div>
</div>
</div>
</div>
/----- NAVIGATION ----/
html{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
#mainNav{
background:transparent;
border: none;
overflow:hidden !important;
}
.navbar-default a{
color: white !important;
transition: color 0.5s;
font-weight: bolder;
}
.navbar-default a:hover{
color: black !important;
}
#slider{
border: none;
margin: 0px !important;
}
/* ---- HEADER -----*/
#slider img{
height: 100vh;
width: 100%;'
}
.col-sm-12{
padding-left:0 !important;
padding-right:0 !important;
}