I am having problems with the gap between header and navbar. I have no idea how to get rid of that gap. I would be grateful if anyone here would know how to repair that issue.
<!DOCTYPE html>
<html lang=en>
<html>
<head>
<script src=java.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="icon" type="image/jpg" href="link"> <!--browser icon-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<title>Browser page name</title><!--insert page name-->
</head>
<body>
<div class="body">
<div class="jumbotron header">
<div class="container text-center">
<h1>Business Name</h1> <!--big header name-->
<p>Motto or slogan</p> <!--smaller text below header name-->
</div> <!--end of container text center div-->
</div> <!--end of jumbotron header div-->
<!--start of navigation-->
<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">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<!--end of navigation-->
</div><!--end of body div-->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-
0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
css
.header /* Header settings */
{
background-color:#000 !important; /*background color black*/
color:#fff !important; /*font color white*/
height:200px; /*height of the whole element*/
font-family:Impact, Charcoal, sans-serif; /*font of the text*/
}
body /*background of the page*/
{
background:#ffb3b3 !important; /*background color of the whole page*/
}
Please help me with this as this looks ugly.
The Jumbotron class has 30px bottom margin by default. Change the jumbotron class to have margin-bottom:0; Here is a fiddle
Because you have .jumbotron class which has margin-bottom:30px by default in Bootstrap.
So you need to reset it, using margin-bottom:0
Note:
avoid using !important , it is bad practice.
you have 2 bootstrap-min.js files, when you just need one.
.header {
/* Header settings */
background-color: #000
/*background color black*/
color: #fff
/*font color white*/
height: 200px;
/*height of the whole element*/
font-family: Impact, Charcoal, sans-serif;
/*font of the text*/
}
body {
/*background of the page*/
background: #ffb3b3
/*background color of the whole page*/
}
.body .jumbotron {
margin-bottom: 0
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="body">
<div class="jumbotron header">
<div class="container text-center">
<h1>Business Name</h1>
<!--big header name-->
<p>Motto or slogan</p>
<!--smaller text below header name-->
</div>
<!--end of container text center div-->
</div>
<!--end of jumbotron header div-->
<!--start of navigation-->
<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">Home
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1
</li>
<li>Page 1-2
</li>
<li>Page 1-3
</li>
</ul>
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
</div>
</nav>
<!--end of navigation-->
</div>
<!--end of body div-->
Related
I am attempting to make a bootstrap navbar that spans horizontally across the screen. However, when I attempt to do so, the navbar links stack vertically as I will show.
Here is the HTML / CSS I have implemented:
body{
padding-top: 90px;
background-color: #dbdbdb;
}
#navMain{
background-color: #db8606;
padding-left: 20px;
padding-right: 20px;
}
#navbar-brand-image{
height: 70px;
}
.nav-link{
font-size: 165%;
font-family: 'Sriracha', cursive;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght#1,500&family=Parisienne&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sriracha&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-default fixed-top" id="navMain">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" id="navbar-brand-title" href="index.html"><img src="content/logo.png" id="navbar-brand-image" alt=""></a>
</div>
<ul class="nav navbar-nav">
<li>
<a class="nav-link" href="#">Home</a>
</li>
<li>
<a class="nav-link" href="about.html">About</a>
</li>
<li>
<a class="nav-link" href="about.html">About</a>
</li>
<li>
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
The result that I achieve looks like this:
Instead, I want the links to span horizontally.
I tried using the W3schools tutorial at this link and it doesn't even recreate the same as what's on the site.
Thanks for your help in advance!
Navbars are really not that special, except they are fluid (100% wide) and hidden by default when printing. If you place the navbar inside a column grid it will align responsively to its parent; it also works with dropdowns:
<div class="row">
<div class="col-9">main content</div>
<div class="col-3">
<nav>
<div class="navbar-header">
<a class="navbar-brand" id="navbar-brand" href="#">#</a>
</div>
<ul class="nav navbar-nav">
<li><a class="nav-link" href="#">Home</a></li>
<li><a class="nav-link" href="about.html">About</a></li>
<li>
<a class="dropdown-toggle" aria-expanded="false" data-toggle="collapse" href="#dropdown">dropdown</a>
<ul class="collapse" id="dropdown">
<li>item 1</li>
<li>item 2</li>
</ul>
</li>
<li><a class="nav-link" href="about.html">About</a></li>
</ul>
</nav>
</div>
</div>
http://jsfiddle.net/e2ur4wd0/
i have a html page with fixed bootstrap navbar.i have a container of width 1000px i am trying to put this navbar inside my container but i couldn't achieve.still it occupies the entire page width.I want the fixed navbar to be aligned within my container.i have attached the snapshot.enter image description here
enter code here
<!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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
html,body{
font-family: Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background: #fff;
height: 100%;
margin:0;
}
#container {
width: 1000px;
display: table;
min-height: 100%;
margin: auto;
height:100%;
background:#f5f5f5;
}
</style>
</head>
<body style="height:1500px">
<div id="container">
<nav width="1000px" class="conatiner1 navbar navbar-inverse navbar-fixed-top">
<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" style="margin-top:50px">
<h3>Fixed Navbar</h3>
<div class="row">
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
</div>
</div>
<h1>Scroll this page to see the effect</h1>
</div>
</body>
</html>
Just removed the navbar-fixed-top from navbar.
Here is updated code
<!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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
html,
body {
font-family: Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background: #fff;
height: 100%;
margin: 0;
}
#container {
width: 1000px;
display: table;
min-height: 100%;
margin: auto;
height: 100%;
background: #f5f5f5;
}
</style>
</head>
<body style="height:1500px">
<div id="container">
<nav width="1000px" class="conatiner1 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">
Home
</li>
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</div>
</nav>
<div class="container" style="margin-top:50px">
<h3>Fixed Navbar</h3>
<div class="row">
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
</div>
</div>
<h1>Scroll this page to see the effect</h1>
</div>
</body>
</html>
<nav width="1000px" 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">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
Js Fiddle
See this below example it will help
<!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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
html,body{
font-family: Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background: #fff;
height: 100%;
margin:0;
}
.conatiner1{position:fixed; width:100%}
#media (max-width:769px){
.divContent{margin-top:230px !important;}
}
</style>
</head>
<body style="height:100%;">
<div class="container">
<nav class="conatiner1 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">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
</div><div>
<div class="container divContent" style="margin-top:50px">
<h3>Fixed Navbar</h3>
<div class="row">
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
</div>
</div>
<h1>Scroll this page to see the effect</h1>
</div>
</body>
</html>
Just Check following code
<!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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
html,body{
font-family: Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background: #fff;
height: 100%;
margin:0;
}
#container {
width: 1000px;
display: table;
min-height: 100%;
margin: auto;
height:100%;
background:#f5f5f5;
}
nav {
width: 100%;
max-width: 1170px;
left: 0;
right: 0;
margin: 0 auto;
}
</style>
</head>
<body style="height:1500px">
<div id="container">
<nav width="1000px" class="conatiner1 navbar navbar-inverse navbar-fixed-top">
<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" style="margin-top:50px">
<h3>Fixed Navbar</h3>
<div class="row">
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
</div>
</div>
<h1>Scroll this page to see the effect</h1>
</div>
</body>
</html>
I am trying to create a page with a collapsible sidebar on the left and a content are that occupies the rest of the page. In my content area I want a navbar up on top and the rest of the content below.
Currently, I am using a container-fluid class to make sure the navbar resizes. When I have a regular paragraph encapsulated in <p> tag the navbar and the paragraph spans the full width of the page. However, the moment I use row's and col's the content seems to take up only have the page and does not go to the edges.
Here is my html code:
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn navbar-btn">
<i class="glyphicon glyphicon-menu-hamburger"></i>
<span>Toggle Sidebar</span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>username</li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-3">
<!-- I have a few divs here -->
</div>
<div class="col-md-9">
<!-- I have a fre more divs here -->
</div>
</div><!-- row -->
</div>
I am currently using Bootstrap 3 (3.3.7) and was following along with this tutorial. I know there are a few other questions on Stack Overflow, but none of the solutions there seems to do anything to solve my problem.
Thanks for any help.
I think you expecting this. if it's not your expectation please add fiddler snippet here, I will update code.
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar, #content').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://bootstrapious.com/tutorial/sidebar/style2.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>
About
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>Download source</li>
<li>Back to article</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content" class="">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Page</li>
<li>Page</li>
<li>Page</li>
<li>Page</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-3">
<div style="background-color: #324D5C; padding: 25px; border-radius: 5px;">
<p><b style="color: #fff;">Upcomming</b></p>
<h1 style="color: #46B29D; text-align: right;">50</h1>
</div>
<br>
<div style="background-color: #46B29D; padding: 25px; border-radius: 5px;">
<p><b style="color: #fff;">Total Created</b></p>
<h1 style="color: #F0CA4D; text-align: right;">120</h1>
</div>
<br>
<div style="background-color: #F0CA4D; padding: 25px; border-radius: 5px;">
<p><b style="color: #E37B40;">Avgerage Value</b></p>
<h1 style="color: #324D5C; text-align: right;">$400</h1>
</div>
<br>
</div> <!-- col-md-3 -->
<div class="col-md-9">
<div style="background-color: #46B29D; padding: 25px; border-radius: 5px;">
<p><b style="color: #fff;">Upcomming</b></p>
<h1 style="color: #46B29D; text-align: right;">50</h1>
</div>
<br>
<div style="background-color: #46B29D; padding: 25px; border-radius: 5px; ">
<p><b style="color: #fff;">Total Created</b></p>
<h1 style="color: #F0CA4D; text-align: right;">120</h1>
</div>
<br>
<div style="background-color: #F0CA4D; padding: 25px; border-radius: 5px;">
<p><b style="color: #E37B40;">Avgerage Value</b></p>
<h1 style="color: #324D5C; text-align: right;">$400</h1>
</div>
<br>
</div> <!-- col-md-9 -->
</div><!-- row -->
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
</body>
</html>
Why the button is located on the left and not under the picture?
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<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>
<link href="~/Content/My.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<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>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-body">
<img src="~/Images/FirstImage.jpg" class="img" />
<button type="button" class="btn btn-default">Buy</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Image is an inline element such as span, not block element such as div, so next element is following the image on the same line.
To make it block element you can put the image inside the div:
<div><img ...></div>
or use style to make it block element
<img style="display: block;" >
or using the css annotation:
.img { display: block; }
Because neither image or button are block elements. This doesn't have anything to do with bootstrap.
img {
display: block;
}
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<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>
<link href="~/Content/My.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<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>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-body">
<img src="https://placebear.com/100/100" class="img" />
<button type="button" class="btn btn-default">Buy</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You need to set this CSS rule:
.panel-body { display: grid; }
Or this one:
.img { display: block; }
And here is the jsfiddle
Just started working with bootstrap today and I ran into a few issues. I want to edit the size of certain parts of the site but can't get them to change/am worried about the responsivity. For example in the code below I wanted to change the size of the icons so I added an additional class "size" and set the width to 300px, but the change isn't made on the site. I even tried using !important without success. Additionally, I would like to change the height of the jumbotron in the same way but have been unsuccessful. How would I go about changing these? Do I need to go into the bootstrap script? Also when designing a responsive website should I use percentages instead of pixels? Thanks, code is here:
*{
margin: 0;
padding: 0;
}
.navbar-default{
background-color: rgb(66, 134, 244);
}
.under {
border-bottom: 15px solid rgb(66, 134, 244);
}
.size {
width: 300px!important;
}
<!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>
<<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<!-- Button nav for small screens -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand name -->
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<!-- Makes nav not expand on resize -->
<div class="collapse navbar-collapse" id="myNavbar">
<!-- Menu -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<!-- Dropdown menu -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<!-- Non dropdown -->
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center under">
<h1>Website Heading</h1>
<p>Information about the website!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span id="size" class="glyphicon glyphicon-leaf size"></span>
</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-hourglass btn-lg"></span>
</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-plus btn-lg"></span>
</div>
</div>
</div>
</body>
</html>
Change styles.css to custom.css and put it in folder called css
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
<link href="css/custom.css" rel="stylesheet">
You can just wrap the icon span with a h1 tag.
<h1> <span id="size" class="glyphicon glyphicon-leaf size large"> </span></h1>
I have made some changes on your code:
/*
Put this content into style.css
*/
* {
margin: 0;
padding: 0;
}
.navbar-default {
background-color: rgb(66, 134, 244);
}
.jumbotron {
/* jumbotron height */
height: 400px;
}
.under {
border-bottom: 15px solid rgb(66, 134, 244);
}
.size {
/*use font-size instead of width*/
font-size: 100px !important;
/* this is the last one:
width: 300px!important;
(missing space before !important )
*/
}
<!--
http://stackoverflow.com/questions/42940712/bootstrap-css-customization-issues
-->
<!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>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<!-- Button nav for small screens -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand name -->
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<!-- Makes nav not expand on resize -->
<div class="collapse navbar-collapse" id="myNavbar">
<!-- Menu -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<!-- Dropdown menu -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<!-- Non dropdown -->
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center under">
<h1>Website Heading</h1>
<p>Information about the website!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span id="size" class="glyphicon glyphicon-leaf size"></span>
</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-hourglass btn-lg"></span>
</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-plus btn-lg"></span>
</div>
</div>
</div>
</body>
</html>