How can I give spacing to each and every buttons in the bootstrap 5 navbar, as you can see here, each and every buttons is closer to itself, but I don't like that, so how can I gives these buttons a space?
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<div class="navbar-nav">
<a class="nav-item btn btn-primary" href="#">Home</a>
<a class="nav-item btn btn-primary" href="#">Features</a>
<a class="nav-item btn btn-primary" href="#">Pricing</a>
<a class="nav-item btn btn-primary" href="#">Disabled</a>
</div>
</div>
</nav>
Add Bootstrap classes mx-lg-2 mx-0 my-lg-0 my-2 to all buttons.
Explanation:
mx-lg-2 mx-0 will add left and right margins on screens ≥ 992px
my-lg-0 my-2 will add top and bottom margins on screens < 992px
See the snippet below.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<div class="navbar-nav">
<a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Home</a>
<a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Features</a>
<a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Pricing</a>
<a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Disabled</a>
</div>
</div>
</nav>
Related
I'm using Bootstrap 4 to create my responsive site, and I'm using its responsive Navbar component based on this Bootstrap documentation. The navbar works fine in desktop but in mobile it breaks and I can't figure out why.
This is what's happening:
This is what I need:
My code:
<nav class="navbar navbar-expand-lg nl-navbar navbar-light">
<a class="navbar-brand" href="#">
<img src="#" alt="Logo" class="col-lg-7 col-md-6
col-sm-5 col-5"/>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarTogglerDemo02">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto nl-navbar-ul">
<li class="nav-item active">
<a class="nav-link mr-3" href="#">Link 1</a>
</li>
<li class="nav-item active">
<a class="nav-link mr-4" href="#">Link 2</a>
</li>
<li class="nav-item active">
<a class="nav-link mr-4" href="#">Link 3</a>
</li>
<button class="btn my-2 my-sm-0 nl-btn-nav-secondary" type="button" data-
toggle="modal" data-target="#"
id="#">Btn Here</button>
</ul>
</div>
</nav>
Use float:right property on class="navbar-toggler" and apply display:block propert on nav tag
I'm using Bootstrap4 and I want to have collapsible menu on mobile that is full width and a different colour to my navbar.
I have set a background color on navbar-collapse - so far so good. The problem is that the navbar has a padding which means that the collapseible also is subject to the padding. If I over-ride the padding of the navbar class then brand and burger menu are not aligned correctly.
This is my mark-up:
<nav class="navbar bg-light navbar-light floating navbar-expand-sm cm-navbar" id="mj-topbar">
<div class="container">
<a class="navbar-brand nb-brand" href="/index.php">My Brand</a>
<button type="button" class="navbar-toggler nb-hamburger-button" data-toggle="collapse" data-target="#collapseCoreNav" aria-controls="collapseCoreNav" aria-expanded="true" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span></button>
<div class="navbar-collapse collapse show" id="collapseCoreNav" style="">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="btn_ tdbLink fa-angle-right_ nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="btn_ tdbLink fa-angle-right_ nav-link" href="/login.php">Login</a>
</li>
</ul>
</div>
</div>
</nav>
This must be available out of the box without me hack the css?
To get this, don't use the default bg-light class - it applies !important which we want to avoid...
We can get this using a simple media query for this?
working snippet:
nav {
background-color: lightpink
}
#media screen and (max-width:595px) {
nav {
background-color: lightgreen
}
}
<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>
<nav class="navbar navbar-light floating navbar-expand-sm cm-navbar" id="mj-topbar">
<div class="container">
<a class="navbar-brand nb-brand" href="/index.php">My Brand</a>
<button type="button" class="navbar-toggler nb-hamburger-button" data-toggle="collapse" data-target="#collapseCoreNav" aria-controls="collapseCoreNav" aria-expanded="true" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span></button>
<div class="navbar-collapse collapse show" id="collapseCoreNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="btn_ tdbLink fa-angle-right_ nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="btn_ tdbLink fa-angle-right_ nav-link" href="/login.php">Login</a>
</li>
</ul>
</div>
</div>
</nav>
<s
I'd like to make my bootstrap navbar RTL. That is the logo in the right and the links flow from right to left. I have tried different tricks but none of they works. Here is the code I have right now:
<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-dark float-right">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<div class="collapse navbar-collapse" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</div>
</nav>
How can I fix this code to implement RTL navbar?
You just need to add a direction to your NAV:
nav {direction: rtl;}
This is an working example based on your CODE
https://jsfiddle.net/Mohcinbn/7b6wa8rL/
If you just want to invert, so just change the order of the navbar-brand element
In the first example, in <a class="nav-brand"> is before <button> and <ul> with links, so the brand is on the left.
In second example, the <a class="nav-brand"> is after <button> and <ul> with links, so the brand now is on the right.
Examples :
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Logo on the left -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar on left</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</nav>
<!-- Logo on the right -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
<a class="navbar-brand" href="#">Navbar on right</a>
</nav>
Here you have more details : https://getbootstrap.com/docs/4.1/components/navbar/#toggler
One approach is using class justify-content-end (Read more here about justify-content-) on the collapsing navbar and play with the order- classes for keeps things nicely ordered when the navbar is collapsed / not collapsed. Check next example:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
<span class="navbar-toggler-icon"></span>
</button>
Logo
<div class="navbar-collapse collapse order-2 order-sm-1 justify-content-end">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</div>
</nav>
UPDATE: Show another alternative with a navbar that never collapses to a button. In this case, you need to use class navbar-expand on the <nav> element in replace of class navbar-expand-sm and avoid to change order of the elements depending on the screen size. Check next example:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<nav class="navbar fixed-top navbar-expand navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
<span class="navbar-toggler-icon"></span>
</button>
Logo
<div class="navbar-collapse collapse order-1 justify-content-end">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</div>
</nav>
Based on #Guilherme answer that's how it worked for me. His answer didn't work for me because the "navbar-toggler" button is still on the left and the "Brand" name going down when you open the toggler button. so this answer is going to fix these thing too.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar on right</a>
<div class="collapse navbar-collapse text-right" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Use style attributes are not enough for RTL languages and also if you are not familiar to CSS codes, changing bootstrap by yourself is a daunting task!
I suggest you use a Right to Left framework forked from bootstrap, for example:
RTLCSS Bootstrap (WebSite - Github)
I'm using Bootstrap 4. I'd like the navbar-brand item (which is just a text element) to be on the far right. The menu (as normal) defaults to the left.
I've tried applying ml-auto, mx-auto, mr-auto, pull-right, etc. Nothing does what I want.
mx-auto was nice for the small screen. It put the navbar-brand centered when the hamburger menu is there. However, I need something that works when the regular menu is there.
Here is my code:
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu">
BSB Feedback
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="mainNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item homeLink">
<a class="nav-link" href="/">
<span aria-hidden="true" class=" fa fa-spacer-right fa-home"></span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/">Give Feedback</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/managefeedback/">Manage Feedback</a>
</li>
</ul>
</div>
</nav>
You can use the order-last class. However, you'll probably want the brand to be still first/top on mobile screens, so you can use order responsively like this...
navbar-brand order-md-last
https://www.codeply.com/go/Vq7ajCEfsg
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu">
BSB Feedback
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="mainNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item homeLink">
<a class="nav-link" href="/">
<span aria-hidden="true" class=" fa fa-spacer-right fa-home"></span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/">Give Feedback</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/managefeedback/">Manage Feedback</a>
</li>
</ul>
</div>
</nav>
More on Bootstrap ordering
An alternate option is to use flex-row-reverse responsively on the parent navbar. This will switch the order of the brand and nav links, but only on the non-mobile menu.
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu flex-md-row-reverse">
...
</nav>
And, if you want to keep the brand and toggler centered on mobile, you can wrap them in another div and still center with mx-auto: https://www.codeply.com/go/xXBdCHGAAN
Related:
Bootstrap 4 align navbar items to the right
Use .justify-content-md-end
<nav class="navbar navbar-expand navbar-dark bg-info">
<div class="container justify-content-md-end">
<a class="navbar-brand" href="#">Brand</a>
</div>
</nav>
how to put the navbar-brand on the right?
Add the order-md-last class to it (additionally to mx-auto that you experimented with).
That ordering class re-orders the element on screens that are medium (md) or larger. On smaller screens, no re-ordering happens and your mx-auto class gets applied.
Here's the code snippet with that order class applied:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu">
BSB Feedback
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="mainNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item homeLink">
<a class="nav-link" href="/">
<span aria-hidden="true" class=" fa fa-spacer-right fa-home"></span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/">Give Feedback</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/managefeedback/">Manage Feedback</a>
</li>
</ul>
</div>
</nav>
I'm trying to let users get informed to enable javascript for better use of the website to I want the message placed above the navigation bar using bootstrap, but instead, they stack upon one another. Don't mind how I describe this.
I want them to be placed in this manner:
But they stack on top of each other this way:
Using Bootstrap 4, please any ideas?
Here's some section of the code
<html>
...
<body>
<noscript class='bg-danger text-light py-2 text-center d-block fixed-top mb-4' style='z-index: 9999;'>Enable javascript to use App better.</noscript>
<header class='navbar fixed-top navbar-expand-lg navbar-light bg-light'>
<div class='container'>
...
</div>
</header>
...
</body>
</html>
In the code below the div parts:
<div class='bg-danger text-light py-2 text-center mb-0'>Enable javascript to enhance this App.</div>
would need to be replaced with noscript. The div is just for easy testing/visibility.
To make the whole thing work, you move everything into a div with the fixed-top class and then add your noscript line followed by the navbar code.
Then you'll also need to add something like style="margin-top: 120px;" to the main container that would follow the fixed-top div to push the main content down.
Click the "run code snippet" button below and expand to full page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="fixed-top">
<div class='bg-danger text-light py-2 text-center mb-0'>Enable javascript to enhance this App.</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-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="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
<p style="margin-top: 120px;">first line of text</p>