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>
Related
I'm using Bootstrap I have coded this:
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-5 mb-md-5 mb-sm-5 mb-5">
<div class="slider-slick-img container">
<div class="slider-for">
IMAGE GOES HERE
</div>
<div class="slider-nav mt-5">
<div class="item px-2">
THUBMNAIL GOES HERE
</div>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-12 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-5 mb-md-5 mb-sm-5 mb-5">
<div class="">
CONTENT GOES HERE
...
</div>
</div>
</div>
</div>
And the result of this code goes here:
As you can see it separates the columns of images and the column of contents (product title, product description & etc).
However they are both placed in one row class.
So how to properly place them together in one row as the expected result shows here?
Expected Result:
UPDATE #1
If I remove col-lg-12 col-md-12 col-sm-12 from <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-5 mb-md-5 mb-sm-5 mb-5"> of the images column & content column, and also add col-6 instead of col-12 to both column classes, this result will appears:
However, as you can see, the content looks thinner and still have differences with the Expected Result image.
So how to solve this issue?
You're repeating the classes and simply complicated everything here, you have to define where you want break to full row it'll automatically break at that screen size, you needn't explicitly add another class, adding too many classes will confuse you and anyone who has to understand the code later. https://getbootstrap.com/docs/4.0/layout/grid/
<header>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</header>
<div class="container">
<div class="row">
<div class="col-sm-6 ">
<div class="">
<h1>
Cat
</h1>
<p>
The cat is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family.
</p>
</div>
</div>
<div class="col-sm-6 ">
<div class="slider-slick-img container">
<div class="slider-for">
<img src="https://static.toiimg.com/photo/msid-67586673/67586673.jpg?3918697" width="100%" />
</div>
<div class="slider-nav mt-5">
<div class="item px-2">
<img src="https://static.toiimg.com/photo/msid-67586673/67586673.jpg?3918697" width="100px" />
</div>
</div>
</div>
</div>
</div>
</div>
In both of your columns you have added the class col-12 which means that by default those columns will take all the row UNTIL you reach the first breakpoint which in this case would be col-sm. In order to fix this you have to specify col-6 instead of col-12 and if you check it in a screen size smaller than sm you'll notice each column is taking up to 6 places in the grid layout.
<!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.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="slider-slick-img container">
<div class="slider-for">
IMAGE GOES HERE
</div>
<div class="slider-nav mt-5">
<div class="item px-2">
THUBMNAIL GOES HERE
</div>
</div>
</div>
</div>
<div class="col-6">
CONTENT GOES HERE
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
Putting the div with content first and the one with the image after appears to mirror this layout correctly.
To define columns of equal width nothing more is needed than using class .col on each of them, as per official documentation (Bootstrap 5.0)
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
<div class="">
CONTENT GOES HERE
...
</div>
</div>
<div class="col">
<div class="">
IMAGE GOES HERE
</div>
<div class="">
<div class="">
THUBMNAIL GOES HERE
</div>
</div>
</div>
</div>
</div>
Remove container class applied with slider-slick-img. It is not needed. And kindly share the link to your code where we can check with actual content(images and add to cart box). Else, with these texts, it is working fine here.
You should not set 12 on lg screen for both div,
set 8,4 on xl,lg
set 6,6 on md
and set 12,12 on sm.
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 mb-xl-0 mb-lg-5 mb-md-5 mb-sm-5 mb-5">
<div class="slider-slick-img container">
<div class="slider-for">
IMAGE GOES HERE
</div>
<div class="slider-nav mt-5">
<div class="item px-2">
THUBMNAIL GOES HERE
</div>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-8 col-md-6 col-sm-12 col-12 mb-xl-0 mb-lg-5 mb-md-5 mb-sm-5 mb-5">
<div class="">
CONTENT GOES HERE
...
</div>
</div>
</div>
</div>
I solved your issue by opting for full responsive col's using grid system as shown in my code.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<div class="">
CONTENT GOES HERE
...
</div>
</div>
<div class="col">
<div class="">
IMAGE GOES HERE
</div>
<div class="">
<div class="px-2">
THUBMNAIL GOES HERE
</div>
</div>
</div>
</div>
</div>
You should also include the meta tag "viewport" for your html code to be processed correctly by the browser.
<meta name="viewport" content= "width=device-width, initial-scale=1.0", shrink-to-fit=no">
You can try putting this in the section of your work.
Straight to the point...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="galary.css">
<link rel="stylesheet" href="https://cdn.usebootstrap.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>image galary</title>
</head>
<body>
<!-- Nav head bar -->
<nav class="navbar navbar-default darkblue">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#buttoncollapse" 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>
<div class="container">
<div class="navbar-header">
IMGS
</div>
<div class="collapse navbar-collapse" id="buttoncollapse">
<ul class="nav navbar-nav">
<li> About us </li>
<li> contact </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> Log in </li>
<li> Sign up</li>
</ul>
</div>
</div>
</nav>
<Div class="container">
<div class="jumbotron">
<h1>The Image Gallery</h1>
<p>A bunch of beautiful images </p>
</div>
</Div>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="http://i.imgur.com/qK42fUu.jpg">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 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-md-4 col-xs-12 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>
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 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-md-4 col-xs-12 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-md-4 col-xs-12 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>
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 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-md-4 col-xs-12 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-md-4 col-xs-12 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=1456">
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdn.usebootstrap.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
In the code above every row has 3 pictures and each row I have implemented the div class "row" however when reaching the small size each row does not take 6 columns. The first row has two pictures of 6 columns, however, the second row has one picture of 6 columns. This happens repeatedly with the 3rd row having 2 pictures of 6 columns and the 4th row have 1 picture of 6 columns.
However, when taking away the row class for each row it works perfectly fine??
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script src="https://cdn.usebootstrap.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></script><link href="https://cdn.usebootstrap.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="http://i.imgur.com/qK42fUu.jpg">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 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-md-4 col-xs-12 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-md-4 col-xs-12 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-md-4 col-xs-12 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-md-4 col-xs-12 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-md-4 col-xs-12 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-md-4 col-xs-12 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-md-4 col-xs-12 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=1456">
</div>
</div>
</div>
If someone could enlighten me that would be great.
Thanks all
Your Bootstrap CSS does not load... Please try below 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.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="http://i.imgur.com/qK42fUu.jpg">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 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-md-4 col-xs-12 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-md-4 col-xs-12 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-md-4 col-xs-12 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-md-4 col-xs-12 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-md-4 col-xs-12 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-md-4 col-xs-12 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-md-4 col-xs-12 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=1456">
</div>
</div>
</div>
</body>
</html>
Change your Bootstrap CSS with this CSS
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
how do I achive this in bootstrap. I have a 3 column and want to stay 3 column be it on mobile or desktop.
<div class="container">
<div>
<h1>Example - 3 column div</h1>
<div class="row">
<div class="col-xs-6 col-sm-4">First</div>
<div class="col-xs-6 col-sm-4">Second</div>
<div class="col-xs-6 col-sm-4">Third</div>
</div>
</div>
on desktop
First | Second | Third
on mobile it become like this
First | Second
| Third
I want to achieve this on desktop and mobile
First | Second | Third
Here are the fiddle -> https://jsfiddle.net/y28ugzp6/
Just use one class col-xs-4.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div>
<h1>Example - 3 column div</h1>
<div class="row">
<div class="col-xs-4 ">First</div>
<div class="col-xs-4">Second</div>
<div class="col-xs-4">Third</div>
</div>
</div>
<!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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<p>You can define it using md,sm and xs</p>
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4" style="background-color:lavender;">Java</div>
<div class="col-md-4 col-sm-4 col-xs-4" style="background-color:lavenderblush;">PHP</div>
<div class="col-md-4 col-sm-4 col-xs-4" style="background-color:lavender;">JQuery</div>
</div>
</div>
</body>
</html>
Set all div's classes to col-xs-4:
<div class="col-xs-4">First</div>
<div class="col-xs-4">Second</div>
<div class="col-xs-4">Third</div>
Better is #Arkej.
But
You can also do like this:
<div class="container">
<div>
<h1>Example - 3 column div</h1>
<div class="row">
<div class="col-xs-4 col-md-4 col-sm-4">First</div>
<div class="col-xs-4 col-md-4 col-sm-4">Second</div>
<div class="col-xs-4 col-md-4 col-sm-4">Third</div>
</div>
</div>
</div>
I have two fixed rows.In first one there is a image and in second one there is a menu bar. when i am trying to add next row (which will contain another image file) below that two fixed row, the image file overrides to the first row (fixed row). Someone please help me!
Thank You.
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top" style="width:100%">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="img-responsive" src="images/logo.png"></div>
</div>
<div class="row" >
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<ul class="nav nav-tabs navbar-inverse">
<li style="margin-right:15px">Home</li>
<li style="margin-right:15px">Our AIMS</li>
<li style="margin-right:15px">Mission</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="img-responsive" src="images/sideImg.jpg" alt="save humanity">
</div>
</div>
</div>
</body>
</html>
Since the container of the first two rows is fixed, it is out of the normal flow of the document. You will need to add padding-top to the third div/row which is > the height of the first two rows/container.
HTML
<div class="third-row"> <!-- Add custom div wrapping the container -->
<div class="container">
CSS
.third-row {
padding-top: 150px;
}
Output:
.third-row {
padding-top: 150px;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top" style="width:100%">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="img-responsive" src="http://placehold.it/100x100">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<ul class="nav nav-tabs navbar-inverse">
<li style="margin-right:15px">Home
</li>
<li style="margin-right:15px">Our AIMS
</li>
<li style="margin-right:15px">Mission
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="third-row">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="img-responsive" src="http://placehold.it/1200x300" alt="save humanity">
</div>
</div>
</div>
</div>
</body>
</html>
Try as following example .
HTML
<div class="row custom">
</div>
CSS
.custom{
//your codes
}
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>