I have a issue with tabs on Bootstrap:
I coded a page that's is suppose to be full width/height and the navbar would be the tabs.
I don't know why when I click on any tab button, It brings me a weird transition that isn't supposed to be there.
I just need a static tab menu, out off any transitions
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daniel</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="navarea transition-width">
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
LOGO
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse" data-toggle="collapse" data-target="#navbarCollapse">
<ul class="nav navbar-nav">
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
<li>Tab5</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="tab-content text-center">
<div class="tab-pane active" id="tab1">
<br>
<br>
<br>
<h1>TAB 1</h1>
</div>
<div class="tab-pane" id="tab2">
<div class="tab-content text-center">
<div class="tab-pane active" id="tab1">
<br>
<br>
<br>
<h1>TAB 2</h1>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<div class="tab-content text-center">
<br>
<br>
<br>
<h1>TAB 3</h1>
</div>
</div>
<div class="tab-pane" id="tab4">
<br>
<br>
<br>
<h1>TAB 4</h1>
</div>
<div class="tab-pane" id="tab5">
<br>
<br>
<br>
<h1>TAB 5</h1>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Is better if you check out the snippet by full screen;
There's a lot of fluff in here that you probably don't need, but I removed one of the
data-target="#navbarCollapse"
and it stopped animating
Found this example on w3schools that you could probably check out as well:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daniel</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="navarea transition-width">
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
LOGO
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse" data-toggle="collapse">
<ul class="nav navbar-nav">
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
<li>Tab5</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="tab-content text-center">
<div class="tab-pane active" id="tab1">
<br>
<br>
<br>
<h1>TAB 1</h1>
</div>
<div class="tab-pane" id="tab2">
<div class="tab-content text-center">
<div class="tab-pane active" id="tab1">
<br>
<br>
<br>
<h1>TAB 2</h1>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<div class="tab-content text-center">
<br>
<br>
<br>
<h1>TAB 3</h1>
</div>
</div>
<div class="tab-pane" id="tab4">
<br>
<br>
<br>
<h1>TAB 4</h1>
</div>
<div class="tab-pane" id="tab5">
<br>
<br>
<br>
<h1>TAB 5</h1>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Related
I have a two-column layout with one element on the left and two on the right.
How can I keep the last element inside the right column aligned relatively to the bottom of the left column?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Bare - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container-fluid">
<div class="row">
<div class="col-7">
<div class="card card-block">
<h3>Column 1</h3>
<br />
<br />
<br />
<p>..end of content</p>
</div>
</div>
<div class="col-5">
<div class="row no-gutters">
<div class="col-12">
<div class="card card-block">
<h3>Column 2</h3>
</div>
</div>
<div class="col-12 align-self-end">
<div class="card card-block">
<h3>Column 3</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Thank you for your help!
By adding the .align-items-end to the parent row, it vertically aligns the columns to bottom of it.
If you want to have the column number 3 on the top but preserve the current position of column 4, I would suggest for you to take a look in to a jQuery library called eqHeight. This would allow you to stretch the parent columns (col-7 and col-5) to same height, after which the column number 3 should be on top with column 1.
<!-- Page Content -->
<div class="container-fluid">
<div class="row align-items-end">
<div class="col-7">
1<br>
<br>
<br>
2
</div>
<div class="col-5">
<div class="col-12">
3
</div>
<div class="col-12 align-self-end">
4
</div>
</div>
</div>
</div>
Why not use different row for 1 - 3 and 2 - 4.
Because you have using bootstrap grid system.
7 col - 5 col
-------------
Bootstrap two column layout
Kindly add style in fourth column div.
style="position: absolute;bottom: 0px;"
<!-- Page Content -->
<div class="container-fluid">
<div class="row">
<div class="col-7">
1 <br />
<br />
<br />
<br />
2
</div>
<div class="col-5">
<div class="row no-gutters">
<div class="col-12 align-self-end">
3
</div>
</div>
<div class="row no-gutters" >
<div class="col-12 align-self-end" style="position: absolute;
bottom: 0px; ">
4
</div>
</div>
</div>
</div>
</div>
This could be what you are looking for:
<div class="row">
<div class="col-md-6">
1
</div>
<div class="col-md-6">
3
</div>
</div>
<div class="row">
<div class="col-md-6">
2
</div>
<div class="col-md-6">
4
</div>
</div>
OR
<div class="row">
<div class="col-md-6">
1
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
2
</div>
<div class="col-md-12">
3
</div>
</div>
</div>
</div>
<div class="col-5">
<row class="no-gutters">
<div class="col-lg-12">
3
</div>
<div class="col-lg-12">
4
</div>
</row>
</div>
It will take full width in any screen size.
my hamburger button isn't working when I minimize the page to mobile size. Everything else seems to flow correctly, I've checked numerous times on the code and it seems to be correct. At this point, I'm not sure whether it's the script codes I have down below which disables the drop-down menu or what?
<!DOCTYPE html>
<html>
<head>
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="gallery.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" date-target="#bs-nav-demo" 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>
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span> IMAGES
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo-1">
<ul class="nav navbar-nav">
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1><span class="fas fa-camera-retro"></span> The Image Gallery</h1>
<p>Wonderful pictures at your disposal!</p>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6" >
<div class="thumbnail">
<img src="http://i.imgur.com/qK42fUu.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1435771112039-1e5b2bcad966?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1442406964439-e46ab8eff7c4?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439524970634-649c37a69e5c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1450&h=825&fit=crop&s=bfda9916c885869b43b70738693428d9">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1444090542259-0af8fa96557e?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1434543177303-ef2cc7707e0d?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1436262513933-a0b06755c784?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439396087961-98bc12c21176?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439694458393-78ecf14da7f9?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
</div>
</div>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>
-> please update following code into your existing code.
-> must be same id name into button data-target name and collapse id name.
-> also add meta tag into head tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="gallery.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo-1" 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>
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span> IMAGES
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo-1">
<ul class="nav navbar-nav">
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1><span class="fas fa-camera-retro"></span> The Image Gallery</h1>
<p>Wonderful pictures at your disposal!</p>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6" >
<div class="thumbnail">
<img src="http://i.imgur.com/qK42fUu.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1435771112039-1e5b2bcad966?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1442406964439-e46ab8eff7c4?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439524970634-649c37a69e5c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1450&h=825&fit=crop&s=bfda9916c885869b43b70738693428d9">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1444090542259-0af8fa96557e?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1434543177303-ef2cc7707e0d?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1436262513933-a0b06755c784?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439396087961-98bc12c21176?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439694458393-78ecf14da7f9?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
</div>
</div>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>
I have an attached background image on the container, but it only goes with like half the columns and then the columns overflow and the bg image stops.
i tried min-height
the 2 columns are in a container and the columns contain multiple rows
i don't understand why on earth the container is not growing with the columns
HTML:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css"> </head>
<body>
<div class="bg-primary text-center d-flex align-items-center h-50" style="background-image: url("projektberge.png");">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="display-1 text-white">COVER</h1>
<p class="lead text-white">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
Button
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-light bg-faded text-center">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse text-center justify-content-center" id="navbar2SupportedContent">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="attached" style="background-image: url("FB-1_Christopher Gusenbauer_PanoramaBahnhof.jpg");">
<div class="h-100">
<div class="container-fluid w-100">
<div class="row h-100">
<div class="col-md-8">
<div class="row" style="height:100%">
<div class="col-md-2 h-100 bg-primary" style="height:100%">
<h1 class="">Summary</h1>
</div>
<div class="col-md-10 h-100">
<div class="row ">
<div class="jumbotron jumbotron-fluid w-100">
<div class="container">
<h1 class="display-3">Jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12"></div>
</div>
<div class="row bg-primary">
<div class="col-md-6 bg-secondary">
<img class="img-fluid d-block py-3" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg"> </div>
<div class="col-md-6 py-3">
<h1 class="">Heading</h1>
<p class="">Paragraph</p>
</div>
</div>
<div class="row">
<div class="col-md-12 bg-primary"></div>
</div>
<div class="row">
<div class="col-md-12 bg-primary">
<div class="container">
<header class="page-header">
<h1>Dark Responsive Timeline with Bootstrap</h1>
</header>
<ul class="timeline">
<li>
<div class="tldate">Apr 2014</div>
</li>
<li>
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Surprising Headline Right Here</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3 hours ago</small></p>
</div>
<div class="tl-body">
<p>Lorem Ipsum and such.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Breaking into Spring!</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 4/07/2014</small></p>
</div>
<div class="tl-body">
<p>Hope the weather gets a bit nicer...</p>
<p>Y'know, with more sunlight.</p>
</div>
</div>
</li>
<li>
<div class="tldate">Mar 2014</div>
</li>
<li>
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>New Apple Device Release Date</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/22/2014</small></p>
</div>
<div class="tl-body">
<p>In memory of Steve Jobs.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-panel">
<div class="tl-heading">
<h4>No icon here</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/16/2014</small></p>
</div>
<div class="tl-body">
<p>Here you'll find some beautiful photography for your viewing pleasure, courtesy of
lorempixel.</p>
<p>
<img src="http://lorempixel.com/600/300/nightlife/" alt="lorem pixel"> </p>
</div>
</div>
</li>
<li>
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Some Important Date!</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/03/2014</small></p>
</div>
<div class="tl-body">
<p>Write up a quick summary of the event.</p>
</div>
</div>
</li>
<li>
<div class="timeline-panel noarrow">
<div class="tl-heading">
<h4>Secondary Timeline Box</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/01/2014</small></p>
</div>
<div class="tl-body">
<p>This might be a follow-up post with related info. Maybe we include some extra links, tweets, user comments, photos, etc.</p>
</div>
</div>
</li>
<li>
<div class="tldate">Feb 2014</div>
</li>
<li class="timeline-inverted">
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>The Winter Months</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 02/23/2014</small></p>
</div>
<div class="tl-body">
<p>Gee time really flies when you're having fun.</p>
</div>
</div>
</li>
<li>
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Yeah we're pretty much done here</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 02/11/2014</small></p>
</div>
<div class="tl-body">
<p>Wasn't this fun though?</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
<div class="row"> </div>
<div class="row"> </div>
<div class="row"> </div>
<div class="row"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.min.js"></script>
</div>
</body>
</html>
It's a bug in Boostrap 4 alpha 6.
It's fixed in Boostrap 4 beta 1 that it's under development.
I noticed you are using Pingendo, you can use the Bootstrap 4 beta 1 version changing the import at the end of your sass file in
#import 'bootstrap-4.0.0-alpha.6';
It seems you haven't included bootstrap references inside your head tag
Here are the links - Bootstrap Js Link
Bootstrap CSS Link
Add them like this.
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap.min.css" integrity="sha512-siwe/oXMhSjGCwLn+scraPOWrJxHlUgMBMZXdPe2Tnk3I0x3ESCoLz7WZ5NTH6SZrywMY+PB1cjyqJ5jAluCOg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.min.js" integrity="sha512-vyRAVI0IEm6LI/fVSv/Wq/d0KUfrg3hJq2Qz5FlfER69sf3ZHlOrsLriNm49FxnpUGmhx+TaJKwJ+ByTLKT+Yg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
I'm working on my first Bootstrap layout and so far enjoying it, although I have ran into some issue where it seems to be creating unexpected padding and alignment issues.
I want to have it laid out horizontally as Nav Bar, Search Bar, Content, Footer. They should all be full width of the page, but all content is kept in the middle and aligned. For some reason, my Nav Bar/Footer have weird spaces on either side and the content alignment tends to be jagged.
Can anyone help me figure out what is causing these problems?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<!-- Navigation Bar -->
<!--<nav class="navbar navbar-inverse navbar-fixed-top">-->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Website</a>
</div>
<!-- Right Contents -->
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
<li><span class="glyphicon glyphicon-user"></span> Register</li>
</ul>
</div>
</nav>
<!-- Search Bar -->
<div class="row search-bar">
<div class="container">
<!-- Search Text Box -->
<div class="col-lg-5">
<input class="form-control" id="search" type="text" value="Search stuff...">
</div>
<!-- Search Category -->
<div class="col-lg-3">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Category <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
</div>
<!-- Search Location -->
<div class="col-lg-3">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Location <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
</div>
<!-- Search Button -->
<div class="col-lg-1">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="content col-lg-12">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Site footer -->
<footer class="footer">
<div class="container">
<p>© Company 2016</p>
</div>
</footer>
</div>
</body>
</html>
You have not structured your HTML properly. Always rule of thumb is all your columns must be inside a row and row inside a container. You can imagine it as
container > row > columns
Also I added a btn-block on the last button so it spreads out a bit. Another thing to not is you have used multiple containers in your HTML. Generally the rule of thumb is use one container in your page. However in your case as you have a menu that spreads throught the page and the body is centered, you will need 2 containers. The general boilerplate would be something as follows:
container
row // each row is 12 columns. so add the combination
col 4
col 8
row
col 3
col 3 // you can further divide each columns into a row
row // again divided into 12 columns
col 6
col 6
col 3
col 3
Container: wraps everything and centers its contents
Container Fluid: wraps everything but lets it flow
Row: Container to define columns. Bootstrap uses 12 column grid
Column: Each columns
Bootstrap website has a good example of how grids work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<!-- Navigation Bar -->
<!--<nav class="navbar navbar-inverse navbar-fixed-top">-->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Website</a>
</div>
<!-- Right Contents -->
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
<li><span class="glyphicon glyphicon-user"></span> Register</li>
</ul>
</div>
</nav>
</div>
<!-- Search Bar -->
<div class="container">
<div class="row search-bar" style="margin-bottom: 10px;">
<!-- Search Text Box -->
<div class="col-lg-5">
<input class="form-control" id="search" type="text" value="Search stuff...">
</div>
<!-- Search Category -->
<div class="col-lg-3">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Category <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
</div>
<!-- Search Location -->
<div class="col-lg-3">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Location <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
</div>
<!-- Search Button -->
<div class="col-lg-1">
<button class="btn btn-default btn-block" type="button"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
<div class="row">
<div class="content col-lg-12">
<div class="row">
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
</div>
</div>
</div>
</div>
<!-- Site footer -->
<footer class="footer">
<div class="container">
<p>© Company 2016</p>
</div>
</footer>
</body>
</html>
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows
Bootstrap
Your padding and alignment issue fixed its happening because of improper bootstrap structure. see the code here CODEPEN
<div class="container-fluid">
<!-- Navigation Bar -->
<!--<nav class="navbar navbar-inverse navbar-fixed-top">-->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Website</a>
</div>
<!-- Right Contents -->
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
<li><span class="glyphicon glyphicon-user"></span> Register</li>
</ul>
</div>
</nav>
<!-- Search Bar -->
<div class="container ">
<div class="row search-bar" style="margin-bottom:10px;">
<!-- Search Text Box -->
<div class="col-lg-5">
<input class="form-control" id="search" type="text" value="Search stuff...">
</div>
<!-- Search Category -->
<div class="col-lg-3">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Category <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
</div>
<!-- Search Location -->
<div class="col-lg-3">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Location <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
</div>
<!-- Search Button -->
<div class="col-lg-1">
<button class="btn btn-default btn-block" type="button"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="content col-lg-12">
<div>
<div class="row">
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Site footer -->
<footer class="footer">
<div class="container">
<p>© Company 2016</p>
</div>
</footer>
</div>
CSS
.no-margin{
margin: 0px;
}
.no-padding
{
padding: 0px;
}
HTML
<div class="panel-group" no-margin no-padding>
<div class="panel-primary" style="box-shadow:0px 20px 20px 0px">
<div class="panel-body">
ANYWHERE IN ANY DIV CLASS
<nav class="navbar navbar-background navbar-info no-margin no-padding" >
<div class="navbar-header ">
<ul class="nav navbar-nav">
There is already a Bootstrap tweak class for that common problem since always...
gutters or no-gutters
.no-gutters {
margin-right: 0;
margin-left: 0;
}
I created a testing file using bootstrap. I called the bootstrap.min.css in the head section of the webpage.
Also, I called few JavaScript files before closing the body tag.
But now as I want to create a toggle menu this will become a drop down menu when seen in mobile version, the toggle button is not working. Here is the code of Toggle button.
I want to know that what is the reason behind that. Why the toggle button is not working correctly?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Testing of Bootstrap</title>
<meta name-"viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/home/user/Testing/bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-ctoggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li class="dropdown">Themes<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Admin & Dashboard</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<h1>Testing H1</h1>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">Box 1</div>
<div class="col-md-4 col-sm-6">Box 2</div>
<div class="col-md-4 col-sm-6">Box 3</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4 col-sm-6">Box 4</div>
<div class="col-md-4 col-sm-6">Box 5</div>
<div class="col-md-4 col-sm-6">Box 6</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4 col-sm-6">Box 7</div>
<div class="col-md-4 col-sm-6">Box 8</div>
<div class="col-md-4 col-sm-6">Box 9</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4 col-sm-6">Box 10</div>
<div class="col-md-4 col-sm-6">Box 11</div>
<div class="col-md-4 col-sm-6">Box 12</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/home/user/Testing/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Image link: http://i.stack.imgur.com/tRBaV.png
There is typo mistake in your code which I corrected it. You wrote 'data-ctoggle' instead data-toggle
Correct code: <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Testing of Bootstrap</title>
<meta name-"viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://getbootstrap.com/examples/navbar/navbar.css">
</head>
<body>
<nav class="navbar navbar-default" >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li class="dropdown">Themes<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Admin & Dashboard</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<h1>Testing H1</h1>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">Box 1</div>
<div class="col-md-4 col-sm-6">Box 2</div>
<div class="col-md-4 col-sm-6">Box 3</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4 col-sm-6">Box 4</div>
<div class="col-md-4 col-sm-6">Box 5</div>
<div class="col-md-4 col-sm-6">Box 6</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4 col-sm-6">Box 7</div>
<div class="col-md-4 col-sm-6">Box 8</div>
<div class="col-md-4 col-sm-6">Box 9</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4 col-sm-6">Box 10</div>
<div class="col-md-4 col-sm-6">Box 11</div>
<div class="col-md-4 col-sm-6">Box 12</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>
check this line to see if it points correctly or not
<script src="/home/user/Testing/bootstrap/js/bootstrap.min.js"></script>
or
Download the core files from http://getbootstrap.com/getting-started/#download
Replace the javascript code as the following
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>