HTML/CSS: Bootstrap navigation bar isn't responsive - html

I am utilizing a Bootstrap Navigation Bar at the top of the webpage. Much like many Bootstrap Navbars, this particular one collapses when the page reaches a certain length, and all of the headings go into a button on the top right corner of the page. The problem is, when the button is clicked, the Navbar does not show the headings.
And here's the catch: On this one page in particular, and just this one page, the bar does not work. In fact, the button seems to be greyed out.
(I would provide images, but Stackoverflow does not let me place links because I am a new user)
I have tried substituting Navbars from other pages with this page - does not work.
AND
I have tried substituting this Navbar with Navbars from other pages - works perfectly fine.
This leads me to believe that there is something else on this page that is casuing the Navbar to be "disabled" or there is something causing it to be not shown, such as a missing tag. I've done a complete search of my code and can not find it.
As I said previously, the problem is, it is on only one page in particular; none others. Given that someone is willing to search though my source code, I have provided some source code below to find errors in the syntax.
Also, note well that I have included a Lightbox photo gallery in my code, and have placed external links and scripts at the bottom.
<head> <!--HEAD START-->
<meta name="description" content="Description"/>
<meta name="keyword" content="keyword"/>
<meta name="robots" content="index, follow"/>
<link rel="icon" href="img/icon.jpg"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="css/lightbox.css">
<script language="JavaScript" rel="text/javascript" src="js/logic.js"></script>
<title> Title </title>
</head><!--HEAD END-->
<body><!--BODY START-->
<noscript>
Please enable JavaScript to view this page's content
</noscript>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Navbar Title</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>News</li>
<li>The Association</li>
<li class="active">Photo Gallery </li>
<li>About</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div id="container"><!--CONTAINER START-->
<div class="jumbotron"><!--JUMBOTRON START-->
<h1> Title </h1>
<h6> Lorem ipsum dolar sit amat </h6>
</div><!--JUMBOTRON END-->
</div><!--CONTAINER END-->
<hr/>
<div class="page-header" id="heading2">
<h2> Photo Gallery <br/> <small class="style"> See pictures from the 2015-2016 Season </small></h2>
</div>
<div class="container">
<hr/>
<div class="gallery">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px">
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px">
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px">
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px">
</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px">
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px">
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px">
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px">
</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px">
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px">
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px">
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px">
</div>
</div>
<div class="row">
<hr/>
</div>
</div>
</div>
<footer class="footer"><!--FOOTER START-->
<div class="container">
<p class="text-muted">
© <script> writeDate(); </script>, All rights reserved.
</p>
</div>
</footer><!--FOOTER END-->
<!-- SCRIPTS MUST BE PLACED AT THE BOTTOM OF THE PAGE FOR PROPER EXECUTION OF ELEMENTS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script language="JavaScript" rel="text/javascript" src="js/lightbox.js"></script>
</body><!--BODY END-->
</html>


I think you're missing the bootstrap javascript library?
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Related

Bootstrap not loading when my html files are in templates folder

I am trying to do my very first own web app with Spring, Thymeleaf and everything seemed to be going well, however after I separated my html files in "templates" folder, since that is required to use thymeleaf, my bootstrap,JS,CSS and all my other resources stopped working.
I have my boostrap included with CDN with the css included in the header and JS,jQuery and popper included in the bottom of the body. I've tried moving the CDN links all in the header, removing my own js and css, however it didn't work.
You can review the html below:
<!doctype html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../static/css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>EventFinder</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand">eventfinder</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<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 active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/">Organize an event</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/">Register</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/login">Login</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Logout</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="slides" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../static/images/music.jpg" class="d-block w-100" alt="Music events">
</div>
<div class="carousel-item">
<img src="../static/images/arts.jpg" class="d-block w-100" alt="Art events">
</div>
<div class="carousel-item">
<img src="../static/images/travel.jpg" class="d-block w-100" alt="Travel and outdoor events">
</div>
<div class="carousel-item">
<img src="../static/images/hobbies.jpg" class="d-block w-100" alt="Hobbies">
</div>
</div>
</div>
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Welcome to eventfinder.</h1>
</div>
<hr>
<div class="col-12">
<p class="lead">Here you can search, join and create all kind of events. Eventfinder is free of charge web app, where people with the same
interests can match and meet in real life.</p>
</div>
</div>
</div>
<div class="container-fluid padding">
<div class="row container-fluid padding">
<div class="person_container col-12 col-sm-6 col-md-4">
<div class="img-area">
<img src="../static/images/person1.jpg" class="img-thumbnail person_pic">
</div>
<p>Some text here</p>
</div>
<div class="person_container col-12 col-sm-6 col-md-4">
<div class="img-area">
<img src="../static/images/person2.jpg" class="img-thumbnail person_pic">
</div>
<p>Some text here</p>
</div>
<div class="person_container col-12 col-md-4">
<div class="img-area">
<img src="../static/images/person3.jpg" class="img-thumbnail person_pic">
</div>
<p>Some text here</p>
</div>
</div>
<hr class="my-4">
</div>
<div class="my-div-body">
<div class="row container-fluid">
<div class="col">
Most recently added events
</div>
</div>
<div class="row recently-added-container container-fluid">
<div class="col">
TO ADD EVENT HERE
</div>
<div class="col">
TO ADD EVENT HERE
</div>
<div class="col">
TO ADD EVENT HERE
</div>
</div>
</div>
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Best cities to visit</h1>
</div>
<hr>
<div class="container-fluid padding">
<div class="row padding">
<div class="col-md-4">
<div class="card">
<img class="city-img-top" src=""/>
<div class="card-body">
<h4 class="card-title">City Name</h4>
<p class="card-text">Some text here</p>
See more
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="city-img-top" src=""/>
<div class="card-body">
<h4 class="card-title">City Name</h4>
<p class="card-text">Some text here</p>
See more
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="city-img-top" src=""/>
<div class="card-body">
<h4 class="card-title">City Name</h4>
<p class="card-text">Some text here</p>
See more
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="../static/js/app.js"></script>
</body>
</html>
Also you can check my project structure here:
Thank you in advance!

It's best to let thymeleaf handle paths for resources and not use relative ones.
For example set the folowing properties
spring:
web:
resources:
static-locations: classpath:/static/
chain:
strategy:
content:
enabled: true
paths: /resources/**
and then in the html do
<link rel="stylesheet" th:href="#{/css/style.css}"> and
<img th:src="#{/images/person3.jpg}" class="img-thumbnail person_pic">
This way you do not have to add an arbitrary amount of ../ to paths

How to created nested columns in Bootstrap 4?

I'm trying to created nested columns within the bootstrap nav. I've tried everything. But it seems like only containers possess this sort of functionality. How can I do this inside a bootstrap nav. Attached is an image of how I want things to be and the current code that I have (which currently has alignment issues).
<nav class="container">
<div class="row">
<div class="col-6 col-md-2">
<img src="images/nexletol-logo.png" alt="NEXLETOL™ (bempedoic acid) tablets" class="img-fluid">
</div>
<div class="col-6">
<img src="images/nexletol-logo.png" alt="NEXLETOL™ (bempedoic acid) tablets" class="img-fluid">
</div>
<ul class="row navbar-nav col-12 col-md-8">
<li class="nav-item col-4">hello</li>
<li class="nav-item col-4">hello</li>
<li class="nav-item col-4">hello</li>
</ul>
</div>
</nav>
nav mobile

Try this, The image you tag in your question i am doing this code for that only. Check and tell me you want the same.
<!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/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>
</head>
<body>
<nav class="container">
<div class="row">
<div class="col-lg-6 col-sm-6 col-xs-6">
<img src="images/nexletol-logo.png" alt="NEXLETOL™ (bempedoic acid) tablets" class="img-fluid">
</div>
<div class="col-lg-6 col-sm-6 col-xs-6">
<img src="images/nexletol-logo.png" alt="NEXLETOL™ (bempedoic acid) tablets" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-4 col-xs-4">
<p class="text-center"> Hello </p>
</div>
<div class="col-lg-4 col-sm-4 col-xs-4">
<p class="text-center"> Hello </p>
</div>
<div class="col-lg-4 col-sm-4 col-xs-4">
<p class="text-center"> Hello </p>
</div>
</div>
</nav>
</body>
</html>

How to show multiple horizontal images in Bootstrap card?

How do I place multiple images side by side in a Bootstrap Card?
It should be multiple pictures, but only one title header and description.
In my code, the images start crossing over and intersecting each other.
Eventually, I'd like to use an array of pictures (two or more) and combine them with JavaScript.
The card can be as wide as needed.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="well text-center">
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo">
</div>
</div>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card" style="width: 50rem;">
<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<div cardcheckbox id="checkboxdiv">
<input type="checkbox" class="cardcheckbox" id="checkid" align="right" onclick="toggleBoxVisibility()" />
</div>
<div class="well text-center">
<div class="col-md-12">Sister Properties:</div>
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo">
</div>
</div>
</div>
<!-- Card header -->
<div class="card-header" role="tab" id="headingOne1">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">
Tree
</a>
</div>
<!-- Card body -->
<div id="collapseOne1" class="collapse" role="tabpanel" aria-labelledby="headingOne1" data-parent="#accordionEx">
<div class="card-body">
Oak Tree with leaves in grassy picture with sunset
</div>
</div>
</div>
</div>
</div>

You might find Bootstrap's image-fluid class useful.
Images in Bootstrap are made responsive with .img-fluid.
max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
Responsive images
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="well text-center">
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo" class="img-fluid">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo" class="img-fluid">
</div>
</div>
</div>
Here's your second version with the checkbox.
You might consider using max-width instead of width to keep the card responsive.
.card {
max-width: 50rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<div cardcheckbox id="checkboxdiv">
<input type="checkbox" class="cardcheckbox" id="checkid" align="right" onclick="toggleBoxVisibility()" />
</div>
<div class="well text-center">
<div class="col-md-12">Sister Properties:</div>
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo" class="img-fluid">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo" class="img-fluid">
</div>
</div>
</div>
<!-- Card header -->
<div class="card-header" role="tab" id="headingOne1">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">Tree</a>
</div>
<!-- Card body -->
<div id="collapseOne1" class="collapse" role="tabpanel" aria-labelledby="headingOne1" data-parent="#accordionEx">
<div class="card-body">
Oak Tree with leaves in grassy picture with sunset
</div>
</div>
</div>
</div>
</div>

Hamburger drop-down menu not working when page is in "mobile" size on desktop

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>

Bootstrap 3 Vertical Alignment Across Multiple Rows and Columns

I am new to Bootstrap. I just started a project and came across a challenge regarding vertical alignment with Bootstrap's grid system. Hopefully this community of experts will be able to shed some light and assist with a solution.
To better illustrate the issue, I have taken 4 screenshots (links attached at the bottom) for each of the lg, md, sm, and xs scenarios. I hope the images make sense to you.
The problem is, while the lg scenario looks great and everything is aligned properly, as the viewport changes, the content of the 2 columns start to show misalignment.
Here is the HTML markup:
<div class="container">
<div class="row row-centered">
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="row row-centered">
<div class="hidden-xs hidden-sm hidden-md hidden-lg"></div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h2>HEADER NUMBER 1</h2>
</div>
<div class="hidden-xs hidden-sm hidden-md hidden-lg"></div>
</div>
<div class="row row-centered">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<div>
<p>Teaser number 1 - Lorem ipsum dolor sit, interdum consectetur elit. Donec interdum dapibus lectus rhoncus.</p>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
</div>
<div class="row row-centered">
<div class="col-sm-6 col-md-6 col-lg-6">
<img class="img-responsive" src="http://placehold.it/200x200&text=Square" alt="">
<h4>Sub-heading short</h4>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<img class="img-responsive" src="http://placehold.it/200x200&text=Square" alt="">
<h4>Sub-heading longer</h4>
</div>
</div>
<div class="row row-centered">
<div class="col-lg-12">
<div>
<p>Link to detailed page 1</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="row row-centered">
<div class="hidden-xs hidden-sm hidden-md hidden-lg"></div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h2>HEADER DIFFERENT LENGTH</h2>
</div>
<div class="hidden-xs hidden-sm hidden-md hidden-lg"></div>
</div>
<div class="row row-centered">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<div>
<p>Teaser number 2 - Lorem ipsum dolor sit amet. Donec interdum dapibus lectus eu rhoncus.</p>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
</div>
<div class="row row-centered">
<div class="col-sm-6 col-md-6 col-lg-6">
<img class="img-responsive" src="http://placehold.it/200x200&text=Square" alt="">
<h4>Sub-heading different</h4>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<img class="img-responsive" src="http://placehold.it/200x200&text=Square" alt="">
<h4>Sub-heading 4</h4>
</div>
</div>
<div class="row row-centered">
<div class="col-lg-12">
<div>
<p>Link to detailed page number 2</p>
</div>
</div>
</div>
</div>
</div>
</div>
I have not incorporated any custom CSS yet except for the .row-centered, which is as simple as this:
.row-centered {
text-align:center;}
What should I do to fix the problem? Thank you very much!
Here are the screenshots:
Example

Topgun, Hi there. To get this to stay inline with each other.
My approach is to adjust the title font size at 2 media breakpoints.
You can change this to suit what suits you, I went just a little smaller to show the effect here.
I also at a breakpoint add the height value to main text part you have too.
I used min-height here rather than a fixed height. Because when they stack on a small screen the text need room to expand down.
Your code had lost of extra divs and seemed like lots of hidden block padders.
I went through this and removed a lot just to pull it back to what is only needed here for this demo.
Go through the code and see the difference.
What I also added here was col-xs-12 into your img class.
As you will see now when resized down to a small screen size the image goes full width and does not stay to the left with a big space to the right.
To center the text you just need to use the class of text-center once in each of the 2 rows.
Hope that this gets you started for how you want it to look now.
Here is the Fiddle.
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.spacer {
margin-top: 2%;
margin-bottom: 2%;
}
#media(max-width:1200px) {
.adjust-fontsize{
font-size:2em;
font-weight: 700;
font-weight: 600;
}
}
#media(max-width:992px) {
.adjust-fontsize{
font-size:1.0em;
}
.row-height{
min-height:70px;
}
}
</style>
</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="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12 spacer"></div>
<div class="container col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 text-center">
<div class="row col-lg-12">
<h2 class="adjust-fontsize">HEADER NUMBER 1</h2>
</div>
<div class="row col-lg-12 row-height">
<p>Teaser number 1 - Lorem ipsum dolor sit, interdum consectetur elit.
Donec interdum dapibus lectus rhoncus.
</p>
</div>
<div class="row col-lg-12">
<div class="col-xs-12 col-sm-6">
<img class="col-xs-12 img-responsive" src="http://placehold.it/200x200&text=Square" alt="">
<h4>Sub-heading short</h4>
</div>
<div class="col-xs-12 col-sm-6">
<img class="col-xs-12 img-responsive" src="http://placehold.it/200x200&text=Square" alt="">
<h4>Sub-heading longer</h4>
</div>
</div>
<div class="row col-xs-12">
<p>Link to detailed page 1</p>
</div>
</div>
<div class=" col-xs-12 col-sm-6 col-md-6 col-lg-6 text-center">
<div class="row col-lg-12">
<h2 class="adjust-fontsize">HEADER DIFFERENT LENGTH</h2>
</div>
<div class="row col-xs-12 row-height">
<div class="col-xs-12">
<p>Teaser number 2 - Lorem ipsum dolor sit amet.
<br>Donec interdum dapibus lectus eu rhoncus.
</p>
</div>
</div>
<div class="row col-lg-12">
<div class="col-xs-12 col-sm-6">
<img class="col-xs-12 img-responsive" src="http://placehold.it/200x200&text=Square" alt="">
<h4>Sub-heading different</h4>
</div>
<div class="col-xs-12 col-sm-6">
<img class="col-xs-12 img-responsive" src="http://placehold.it/200x200&text=Square" alt="">
<h4>Sub-heading 4</h4>
</div>
</div>
<div class="row col-xs-12">
<p>Link to detailed page number 2</p>
</div>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>