need your help. I am trying to create a collapsing navigation bar for our project website in school. Since I am just starting to learn bootstrap, I can not see what have I done wrongfully.
Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="../css/bootstrap.min.css" rel="stylesheet" />
<link href="../css/mystyle.css" rel="stylesheet" />
<title></title>
</head>
<body>
<div class="container">
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<a class="navbar-brand" href="#">Viking's Pawnshop</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right" style="margin-right: 20px">
<li>Home</li>
<li>Services</li>
<li>Contact Us</li>
<li>Login</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="slide_cont">
<div class="slide">
<div class="1">
</div>
<div class="2">
</div>
<div class="3">
</div>
</div>
<div class="arrows">
<img src="../images/left.png" id="lft">
<img src="../images/right.png" id="ryt">
</div>
</div>
</div>
</div>
<div class="row" style="text-align: justify;">
<div class="col-md-4">
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="col-md-4">
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="col-md-4">
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
</body>
</html>
Requires JavaScript plugin
Check the Documentation: Navbar
You need to include both jQuery and (at the least) the collapse.js plugin or the full bootstrap.js for your collapsing nav to function. See What's Included
jQuery required Please note that all JavaScript plugins require jQuery
to be included, as shown in the starter template. Consult our
bower.json to see which versions of jQuery are supported.
Also.
align is deprecated, see W3C Specs.
Since you're placing the nav inside of a container, you can use container-fluid inside the navbar so there isn't any overflow on the navbar-right links. See this Example.
You're missing the .navbar-header class.
Working Example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Viking's Pawnshop</a>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>Services
</li>
<li>Contact Us
</li>
<li>Login
</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-12">
<div class="slide_cont">
<div class="slide">
<div class="1">
</div>
<div class="2">
</div>
<div class="3">
</div>
</div>
<div class="arrows">
<img src="http://placehold.it/150x150" id="lft">
<img src="http://placehold.it/150x150" id="ryt">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="col-md-4">
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="col-md-4">
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Related
With Vuejs and Bootstrap v5.0.1 I make image at left and text right aligned and with code :
<div class="d-flex">
<div class="float-start">
<img class=" item_image_left_aligned" :src="itemDetailsImage.url" >
</div>
<div class="float-end">
<div v-html="itemDetails.description"></div>
</div>
</div>
I have text aligned at right, but I got empty space under image if text is long.
How can I fill area under image with text ?
Thanks in advance!
Since you are looking for a floating solution, you don't need the d-flex. Only make the image floating left, not the text.
Not sure what your item_image_left_aligned class does.
<div>
<div class="float-start">
<img class="item_image_left_aligned" :src="itemDetailsImage.url" />
</div>
<div>
<div v-html="itemDetails.description"></div>
</div>
</div>
is this what you are looking for. I have added h-100 bootstrap class to the image.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
<div class="float-start">
<img class=" item_image_left_aligned h-100 " width="100" src="https://dummyimage.com/100x100/000/fff" >
</div>
<div class="float-end">
<div v-html="itemDetails.description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
I am using a bootstrap 4 card:
<div class="card" style="height:"500px;width:100px">
<div class="card-body">
<div class="top-portion">
This portion can span from one to many lines.
</div>
<div class="content" style="overflow-y">
....
....
</div>
</div>
</div>
I need the ".content" div to occupy the remaining vertical space and be scrollable when needed. I know that I am supposed to put "max-height:..." at its style.
However, the problem is that I do not know the exact value to put because the ".top-portion" section varies in height.
<div class="card" style="height:500px; width:100px;overflow: hidden;">
<div class="card-body d-flex flex-column">
<div class="top-portion mb-auto">
This portion can span from one to many lines.
</div>
<div class="content" style="overflow-y:auto;max-height: 200px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
use this code for your card. and "top-portion" height never disturb content. I have use "mb-auto" it means margin-bottom:auto; if you want to put content area bottom of card.
here is my code.
<header class="navbar-inverse navbar-fixed-top wet-asphalt">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse">
Call now!
</button>
</div>
<div class="collapse **navbar-collapse**">
<ul class="nav navbar-nav navbar-right" style="margin-top:0px;">
<li>9XXXXXXXXX</li>
<li>mail us</li>
</ul>
</div>
</div>
</header>
<header class="navbar navbar-inverse wet-asphalt" role="banner" style="margin-top: -46px; border-radius:0px;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="margin-top: 25px;">
<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"><img src="images/logo.png" alt="logo"></a>
</div>
<div class="collapse **navbar-collapse**">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About Us</li>
</ul>
</div>
</div>
</header>
When I click on second header menu, while viewing this on a Mobile device. It triggers both navbar-collapse. When I remove navbar-collapse class from first header it disappears.
I dont want the class to be removed from my first header too and also dont want it to collapse.
Please help me to sort out. I am new with Bootstrap.
If you're trying to keep the links in the first navbar exposed at all times while keeping the standard collapse function for the section just use two separate navbars but remove the collapse function (the navbar-header section) from the first. Then you can surround both navs with the navbar-fixed-top class.
*The only CSS that needs to be applied is to keep your first navs links inline on device sizes.
Working Example:
body {
padding-top: 120px;
}
.navbar-inverse.navbar-top ul > li {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar-fixed-top">
<div class="navbar-inverse navbar-static-top navbar-top">
<div class="container">
<ul class="nav navbar-nav pull-right">
<li>123 456-7890
</li>
<li>Mail Us
</li>
</ul>
</div>
</div>
<div class="navbar navbar-inverse 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">
<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="#">
<img src="http://placehold.it/50x25/fff/fff">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About Us
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
This is happening because their data-target are same. Give them both different, for example data-target=".navbar-collapse-1" and data-target=".navbar-collapse-2"
And each data-target should point to the corresponding container class. First div will have first class <div class="collapse navbar-collapse-1"> and second one should have the other one <div class="collapse navbar-collapse-2">
Here's your working code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="navbar-inverse navbar-fixed-top wet-asphalt">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
Call now!
</button>
</div>
<div class="collapse navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" style="margin-top:0px;">
<li>9XXXXXXXXX</li>
<li>mail us</li>
</ul>
</div>
</div>
</header>
<header class="navbar navbar-inverse wet-asphalt" role="banner" style="margin-top: 150px; border-radius:0px;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-2" style="margin-top: 25px;">
<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"><img src="images/logo.png" alt="logo"></a>
</div>
<div class="collapse navbar-collapse-2">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About Us</li>
</ul>
</div>
</div>
</header>
I have hunted high and low and I am 90% convinced my problem stems from floating elements and that the answer to my problem is the proper application of clear.
Unfortunately I am not well versed enough in CSS to know where to apply the fix and hacking at it doesn't seem to be getting me there, can someone help?
I want the well to expand to encompass my BootStrap column elements and their children.
I have the following HTML in a CodePen if you want to take a look at it live:
<div class="container-fluid">
<div class="well">
<div class="col-md-1">
<button type="button" class="btn btn-success" ng-click="upVote(vote)"><i class="fa fa-2x fa-thumbs-up"></i></button>
<button type="button" class="btn btn-danger" ng-click="downVote(vote)"><i class="fa fa-2x fa-thumbs-down"></i></button>
</div>
<div class="col-md-10">
<label> Sample title field</label>
<div class="basic-panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>
<div class="col-md-1" style="text-align: center;">
<div>Score</div>
<span class="badge" style="font-size: 42px !important;">42</span>
</div>
</div>
</div>
The problem here is that you do not include a row element to hold all of the col div's.
So all you need to do is add the class row to the same div that your class well is in.
Like so:
<div class="container-fluid">
<div class="well row">
<div class="col-md-1">
<button type="button" class="btn btn-success" ng-click="upVote(vote)"><i class="fa fa-2x fa-thumbs-up"></i></button>
<button type="button" class="btn btn-danger" ng-click="downVote(vote)"><i class="fa fa-2x fa-thumbs-down"></i></button>
</div>
<div class="col-md-10">
<label> Sample title field</label>
<div class="basic-panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>
<div class="col-md-1" style="text-align: center;">
<div>Score</div>
<span class="badge" style="font-size: 42px !important;">42</span>
</div>
</div>
Here is a Bootply to give you a visual.
Now since a row can only hold up to 12 columns.. you won't be able to add any more col inside that row since 1 + 10 + 1 = 12... you will have to create another row unless of course you make your current col's smaller.
Hope this helps!
So I have this problem, where I have my navigation bar that respondes to screen sizes.
All looks fine, but I need it to be sticky. Whenever I do this, It floats on top of my first hero picture, and with a section of about 40-50px at the top that I can't get rid of.
If someone could please give me a hand with this. It has been doing my head in for 2 weeks now.
Here is the JSfiddle: http://jsfiddle.net/fxar8/
<header>
<nav class="clearfix">
<ul class="clearfix">
<li>Home</li>
<li>Teaching and Learning</li>
<li>News and Events</li>
<li>Contact</li>
<li>Home</li>
<li>Home</li>
</ul>
Menu
</nav>
</header>
<div class="hero-image first">
<h1 class="big">Sample Text</h1>
</div>
<section id="content">
<div class="container">
<section id="grid" class="clearfix">
<div class="grid-6">
<h1>About Us</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Read More</p>
</div>
</section>
</div>
</section>
<a name="tl"><div class="hero-image second"></a>
<h1 class="big">Sample Text</h1>
</div>
<section id="content">
<div class="container">
<section id="grid" class="clearfix">
<div class="grid-4">
<h1>Teaching & Learning</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="grid-2">
<img src="images/tl.jpg" />
</div>
</section>
</div>
</section>
<a name="ne"><div class="hero-image third"></a>
<h1 class="big">Sample Text</h1>
</div>
<section id="content">
<div class="container">
<section id="grid" class="clearfix">
<div class="grid-2">
<img src="images/ne.jpg" />
</div>
<div class="grid-4">
<h1>News and Events</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</section>
</div>
</section>
<a name="contact"><div class="hero-image fourth"></a>
<h1 class="big">Sample Text</h1>
</div>
<section id="content">
<div class="container">
<section id="grid" class="clearfix">
<div class="grid-2">
<center><img src="images/2501.jpg" class="rounded" /></center>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="grid-2">
<center><img src="images/2502.jpg" class="rounded" /></center>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="grid-2">
<center><img src="images/2503.jpg" class="rounded" /></center>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</section>
</div>
</section>
<footer class="grid-full">
<p>© BHS 2014.</p>
<p class="right"> Designed by Begintoend</p>
</footer>
Cheers in advanced
So basically you have to modify a few things, because 'Teaching an Learning' doesnt fit.
// This is to fit longer text (Teaching and Learning)
// + padding so it looks nicer
nav a {
min-width: 150px;
padding: 0 15px;
}
// Total width needs to be adjusted
// because we increased the size of navbar (Teaching..)
nav ul {
width: 1000px;
}
// The gap was caused by h1 element's top margin inside hero
.big {
margin-top: 0;
}
Also don't forget to adjust viewports - widths at which to transofrm the menu, since the menus' width has increased