I'm using <ul class="nav nav-tabs">, wrapped within a container, and by design when the break point, marked by the end of the container is reached, it wraps around to a new line. How can I prevent this from happening so that everything stays inline and I can scroll horizontally instead?
Edit: Included code
<div class="jumbotron border">
<div class="row">
<div class="col">
<img src="image.jpg" alt="Placeholder for image">
</div>
</div>
<div class="row">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</div>
Use flex-nowrap class for the list. Use d-flex also if the ul is not already flex,
Related
Here is my code (only body)
<body>
<div class="container-fluid">
<div class="row">
<ul class="nav justify-content-center nav-tabs">
<li class="nav-item">
<a class="nav-link" href="/home.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/login.php">Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout.php">Log Out</a>
</li>
</ul>
</div>
</div>
</body>
Display :
I can however , center ul when i place ul within a column. Is there a specific reason why my above code could not center ul
EDIT :
If i remove row from the code, I could use justify-content-center on ul.My question however still stands as I could not explain the behavior when row is present
<body>
<div class="container-fluid">
<ul class="nav justify-content-center nav-tabs">
<li class="nav-item">
<a class="nav-link" href="/home.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/login.php">Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout.php">Log Out</a>
</li>
</ul>
</div>
</body>
Try this instead,
First Method
please add flex-basis:100%; to for align <ul> center.
ul{
flex-basis:100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body>
<div class="container-fluid">
<div class="row">
<ul class="nav nav-tabs justify-content-center">
<li class="nav-item">
<a class="nav-link" href="/home.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/login.php">Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout.php">Log Out</a>
</li>
</ul>
</div>
</div>
</body>
Second Method
please add justify-content-center to row class to align <ul> center instead of adding to <ul> tag.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body>
<div class="container-fluid">
<div class="row justify-content-center">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="/home.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/login.php">Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout.php">Log Out</a>
</li>
</ul>
</div>
</div>
</body>
The ul itself is not centered, so using .justify-content-center will center its child li elements only inside the ul, while it itself remains on the left. Add .justify-content-center to the ul's parent element (the row div) and it should work.
try this,
<div class="row">
<ul class="nav justify-content-center nav-tabs" style="display: flex; justify-content: center;">
<li class="nav-item">
<a class="nav-link" href="/home.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/login.php">Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout.php">Log Out</a>
</li>
</ul>
</div>
I'm working on a internal website for the company I work for and my manager wants me to have the Menu as a jsp include page instead of it being coded into the page like this(which works).
<head>
<title>SomeCompany Intranet</title>
<jsp:include page="/jsp/head.jsp"/>
</head>
<body style="min-height: 75rem; padding-top:110px;">
<jsp:include page="/jsp/header.jsp"/>
<div class="sidenav">
<div class="nav flex-column nav-pills" aria-orientation="vertical">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link disabled">Marketing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/AA.jsp">Agent Access</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="${pageContext.request.contextPath}/jsp/marketing/ItemsCatalog.jsp">Promotional Items Catalog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/OrderForm.jsp">Catalog Order Form</a>
</li>
<li class="nav-item">
<a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/TravelForm.jsp">Travel Form</a>
</li>
<li class="nav-item">
<a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/TuitionAssi.jsp">Tuition Assistance Form</a>
</li>
</ul>
</div>
</div>
<div class="mainHeader">
<h1>PROMOTIONAL ITEMS CATALOG</h1>
</div>
<div class="tab-content main1">
<iframe src="${pageContext.request.contextPath}/pdf/PromotionalCatalog 01-20.pdf" width="100%"
height="100%"></iframe>
</div>
He wants it to look more like this.
<head>
<title>SomeCompany Intranet</title>
<jsp:include page="/jsp/head.jsp"/>
</head>
<body style="min-height: 75rem; padding-top:110px;">
<jsp:include page="/jsp/header.jsp"/>
<div class="sidenav">
<jsp:include page="/jsp/marketing/TestMenu.jsp"
</div>
<div class="mainHeader">
<h1>PROMOTIONAL ITEMS CATALOG</h1>
</div>
<div class="tab-content main1">
<iframe src="${pageContext.request.contextPath}/pdf/PromotionalCatalog 01-20.pdf" width="100%" height="100%"></iframe>
</div>
</body>
This is the TestMenu.jsp
<div class="nav flex-column nav-pills" aria-orientation="vertical">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link disabled">Marketing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/AA.jsp">Agent Access</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="${pageContext.request.contextPath}/jsp/marketing/ItemsCatalog.jsp">Promotional Items Catalog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/OrderForm.jsp">Catalog Order Form</a>
</li>
<li class="nav-item">
<a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/TravelForm.jsp">Travel Form</a>
</li>
<li class="nav-item">
<a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/TuitionAssi.jsp">Tuition Assistance Form</a>
</li>
</ul>
</div>
My nav pills go active but they don't take me to the actual pages. But if I remove the active from the TestMenu the links work. It's such a small thing that I'm trying to accomplish which is highlighting the proper pills and I just need help figuring it out. Or at least point me in the right direction.
Even though I'm in the 2020 Corporate Calendar page it shows Project Team Guidelines highlighted.
I am trying to make divs inline in the card box and doing it also. But text is being vertically centered next to. can not managed the make the text start the top.
<div class="card text-left">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</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>
</div>
<div class="card-body">
<div class="d-inline"><img src="{{$estate->image}}" id="image"></div>
<div class="d-inline">{{$estate->building_name}}</div>
</div>
</div>
Try to use d-inline for to make image and text side by side. But this time text is being vertically aligned.
You have to use d-inline-flex and align-top
<div class="card-body">
<div class="d-inline-flex"><img src="{{$estate->image}}" id="image"></div>
<div class="d-inline-flex align-top">{{$estate->building_name}}</div>
</div>
I can't get the "about me" "contact" and "portfolio" all on to stay on the same line as the my name section, even though they are on the same div. And I can't use positioning because this bootstrap.
How can I solve this?
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid border" style="overflow:visible">
Vamsi Krishna Pappusetti
<ul class="nav row justify-content-end" id="navbar">
<li class="nav-item">
<a class="nav-link " href="#">About Me</a>
</li>
<li class="nav">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
</ul>
</div>
Here's one idea:
I made the container <div> into a nav row, with p-0 and m-0 to clear padding and margins.
I made the "name" link into a nav-link so it's padding is the same as other links.
I set ml-auto on the <ul> to align it to the right side.
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="nav row border container-fluid p-0 m-0">
Vamsi Krishna Pappusetti
<ul class="nav ml-auto">
<li>
<a class="nav-link" href="#">About Me</a>
</li>
<li>
<a class="nav-link" href="#">Contact</a>
</li>
<li>
<a class="nav-link" href="#">Portfolio</a>
</li>
</ul>
</div>
You have to combine "nameBlock" and "navbar" into a row div and use ml-auto (Margin utilities) in Bootstrap 4 to align navbar to end.
Code: https://codepen.io/1412108/pen/BVLRRP
Bootstrap 4 Margin Utilities
Here you can see what it looks like right now.
What it looks like now
How do I get the nav to appear on the right side of the screen while making it be on the same line as the copyright? I cannot seem to get anything to work that I have seen on here so far.
Here is my current code:
<div class="container-fluid footer">
<div class="spacer"></div>
<div class="container">
<h5 style="display: inline">Copyright © 2017 Custom Prop Shop</h5>
<ul class="nav flex-column flex-sm-row justify-content-end pull-right">
<li class="nav-item">
<a class="nav-link" href="request-estimate.html">Request an Estimate</a>
</li>
<li class="nav-item">
<a class="nav-link" href="our-work.html">Our Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="our-clients.html">Our Clients</a>
</li>
<li class="nav-item">
<a class="nav-link" href="our-story.html">Our Story</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
<div class="spacer"></div>
</div>
CSS is only controlling color of the text/background and the font-size for this part.
I think the easiest way would be to make the container d-flex, and then use my-auto to vertically center the h5...
<div class="container d-flex justify-content-between">
<h5 class="my-auto">Copyright © 2017 Custom Prop Shop</h5>
<ul class="nav flex-column flex-sm-row">..</ul>
</div>
https://www.codeply.com/go/1WWhy3uP9C
You can use something like this
<div class="container-fluid footer">
<div class="spacer"></div>
<div class="container">
<div class="row">
<div class="col">
<h5 style="display: inline">Copyright © 2017 Custom Prop Shop</h5>
</div>
<div class="col">
<ul class="nav flex-column flex-sm-row justify-content-end pull-right">
<li class="nav-item">
<a class="nav-link" href="request-estimate.html">Request an Estimate</a>
</li>
<li class="nav-item">
<a class="nav-link" href="our-work.html">Our Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="our-clients.html">Our Clients</a>
</li>
<li class="nav-item">
<a class="nav-link" href="our-story.html">Our Story</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</div>
<div class="spacer"></div>
</div>
You can reference Bootstrap Grid Options over here https://v4-alpha.getbootstrap.com/layout/grid/#grid-options
add float: left on the h5.
or float: right on the ul