HTML rows displaying side-by-side rather than vertically within column - html

Should this div not display my two rows one on top of the other? or am I missing something?
the rows called 'tabs' and 'main' are displaying side-to-tide within the column('main' on the left), rather than tabs on top main below
Content div:
<div class='row content'>
<div class='col-12' style='display:flex; flex-direction:column; justify-content: center;'>
<div class='row tabs' style='align-items: flex-start; width:100%; '>
<ul class="nav nav-tabs" style='display:flex; flex-direction:row; position:absolute; right:0;'>
<li class="nav-item">
<a class="nav-link active" href="#">Posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Replies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Media</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">More</a>
</li>
</ul>
</div>
<div class='row main' style='min-height:100px; width:100%;'>{{user.username}} 's profile </div>
</div>
</div>
CSS:
.content{
width: 103.5%;
min-height:50%;
display:flex;
flex-direction: column;
justify-content: center;
align-items:center;
background-color: #F3D5AE;
}
.tabs{
position: relative;
top:0%;
}

If I'm understanding correctly you really just want something like shown below. I'd suggest getting more familiar with the different utility classes bootstrap provides to avoid repetitive (and in many cases unnecessary) styles since your usage of flex and position etc isn't correct and could make your output cleaner in the process. Cheers
.example {
background-color: #F3D5AE;
}
.example2 {
padding: 1rem;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row example'>
<div class='col-12'>
<ul class="nav nav-tabs justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Replies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Media</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">More</a>
</li>
</ul>
<div class="col-12 example2">
{{user.username}}'s profile
</div>
</div>
</div>

Related

Two row navigation, second row elements equal-width nav-justified

So trying to achieve responsive collapsible navigation with two rows, where first includes logo and language select and second row main links:
| |
| LOGO lang |
| link1 link2 link3 link4 |
jsfiddle snippet of progress so far
Cant get equal width for the main links, so that are distributed horizontally evenly on lg viewport and above. With the structure and classes am using links are stacked very tight.
Second row navigation:
<ul class="navbar-nav nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
Categories
</a>
<div class="dropdown-menu">
<a class="dropdown-item">Cat 1</a>
<a class="dropdown-item">Cat 2</a>
<a class="dropdown-item">Cat 3</a>
<a class="dropdown-item">Cat 4</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Live Auction</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a>
</li>
</ul>
Any ideas how to override classes or other solution? Thanks!
Specify the initial size of your flex items (li) to match content by changing the flex-basis from 0 to auto -- you can enable in Bootstrap 4 by using the flex-fill class. Add it to your HTML:
<li class="nav-item flex-fill">
<a class="nav-link" href="#">Live Auction</a>
</li>
Or add the property in your CSS:
.nav-justified li.nav-item {
/* ... */
flex-basis: auto;
}
Fiddle example: https://jsfiddle.net/wcj1gzr5/1/
To distribute flex items with an effect like justify-content: space-between the width of the div and ul which contain the flex items should expand their width (giving available space to distribute flex items). To do this, set min-width: 100%; on both elements to have them fill their containing element and then use justify-content on the ul to control spacing & positioning.
Fiddle example: https://jsfiddle.net/wcj1gzr5/2/
You can do this by adding width:100% to .navbar-collapse, .nav-pills. Below is the snippet for 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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.navbar-collapse,
.nav-pills {
width: 100% !important
}
header {
width: 100%;
background: #282828;
background-position-x: 0%;
background-position-y: 0%;
background-image: url("https://cdn.wallpapersafari.com/65/40/cJtjUm.jpg");
background-size: cover;
background-position: center;
}
/* center the logo */
.navbar {
justify-content: center;
}
/* in order to center the logo */
.navbar .navbar-toggler {
position: absolute;
right: 1rem;
top: 0.5rem;
}
/* center all navbar items */
.navbar-nav {
align-items: center;
}
/* since it's expanding at lg */
#media (min-width: 992px) {
/* in order to display in 2 rows */
.navbar-expand-lg {
flex-flow: column nowrap;
}
/* same logic as the navbar-toggler above */
.navbar-nav.upper-controls {
position: absolute;
right: 1rem;
top: 0.5rem;
font-size: 85%;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light">
<a href="#" class="navbar-brand">
CompanyLogo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav upper-controls">
<li class="nav-item">
<a class="nav-link" href="#">Language</a>
</li>
</ul>
<ul class="navbar-nav nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
Categories
</a>
<div class="dropdown-menu">
<a class="dropdown-item">Cat 1</a>
<a class="dropdown-item">Cat 2</a>
<a class="dropdown-item">Cat 3</a>
<a class="dropdown-item">Cat 4</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Live Auction</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
</body>
</html>

Bootstrap 4 tabs multi-level tablist with collapse is not working properly; more than one tab active at the same time

li.nav-item { display: block; width: 100%; position: relative; display: lock; min-height: 40px; line-height: 2.4; padding: 0; color: #f0f0f0; font-weight: 600; font-size: 16px; border-bottom: 1px solid #092a3b; background: #233d4a; margin: 0;
}
a {
display:block;
}
a.active {
background-color:red;
}
<ul>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">1</a>
<div id="collapseOne" class="collapse" data-parent="#Menu">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" data-parent="#collapseOne">
<a class="" data-toggle="tab" href="#One1">1.1</a>
</li>
<li class="nav-item" data-parent="#collapseOne">
<a class="" data-toggle="tab" href="#One2">1.2</a>
</li>
<li class="nav-item" data-parent="#collapseOne">
<a class="" data-toggle="tab" href="#One3">1.3</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">2</a>
<div id="collapseTwo" class="collapse" data-parent="#Menu">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="" data-toggle="tab" href="#Two1">2.1</a>
</li>
<li class="nav-item">
<a class="" data-toggle="tab" href="#Two2">2.2</a>
</li>
<li class="nav-item">
<a class="" data-toggle="tab" href="#Two3">2.3</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="tab" href="#Three">3</a>
</li>
<li class="nav-item">
<a class="" data-toggle="tab" href="#Four">4</a>
</li>
</ul>
I am struggling to achieve a multi level tablist menu with collapsible sub menus with Bootstrap 4. I need to use tabs and collapse at the same time. I have achieved to make the functionality (the right panes appearing and disappearing clicking the right links) work properly but there are more than one tab with the active class at the same time. I would like to know if there´s a way to make it work properly just with bootstrap 4 classes not adding more js/jquery code.
Here´s my codepen:
https://codepen.io/AlbertoAguado/pen/XqdmbK
The problem is combining tabs and collapse on the same parent level. Currently, 1&2 toggle tabs, and 3&4 toggle collapse. You need to make them all collapse with tabs inside (exactly like collapse 1&2), or make them all collapse items inside the #Menu.
Additionally, you need to hide any shown tabs when one of the collapse elements is hidden..
$('.collapse').on('hide.bs.collapse', function () {
$('.tab-content .show').removeClass('show');
})
https://codeply.com/go/Aq4zWAcUkX

Unordered-list inline vertical alignment and responsive spacing

I am trying to create a responsive navbar for mobile, but I am having trouble getting the link containers to resize properly. I also cannot seem to get the text to center itself vertically. I have tried using auto padding and margins in both cases, but they don't seem to be doing anything. I am using Bootstrap.
My questions are:
How do I center the text vertically within its container?
How do I get the width of each link's container to be the width of the text
How do I then get the spacing between each container to be the same, so that all together they fill the width of the screen?
HTML
<div class="container" id="nav-container-mobile">
<ul class="list-unstyled list-inline text-center d-flex" id="nav-list-mobile">
<li class="list-inline-item text-center nav-link-horizontal" id="nav-profile-link-mobile">
<a class="nav-link" href="#Profile">
<div class="nav-link-container-mobile">Profile</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-experience-link-mobile">
<a class="nav-link" href="#Experience">
<div class="nav-link-container-mobile">Experience</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-skills-link-mobile">
<a class="nav-link" href="#Skills">
<div class="nav-link-container-mobile">Skills</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-project-link-mobile">
<a class="nav-link" href="#project">
<div class="nav-link-container-mobile">Projects</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-contact-link-mobile">
<a class="nav-link" href="#Contact">
<div class="nav-link-container-mobile">Contact</div>
</a>
</li>
</ul>
</div>
CSS
#nav-container-mobile {
position: absolute;
width: 100%;
height: 70px;
padding: 0;
background: #292929;
z-index: 5;
}
#nav-list-mobile {
width: 100%;
height: 100%;
margin: 0;
vertical-align: middle;
}
.nav-link-horizontal {
height: 100%;
width: 15vw;
min-width: 50px;
}
.nav-link-container-mobile {
padding: auto;
height: 100%;
overflow-wrap: break-word;
}
.nav-link {
color: #aeaeae;
}
Any help or advice is appreciated.
JSFiddle
It would be simpler to use the Bootstrap 4 Nav Fill or Justify, and then just change the background color and other styles as needed.
https://www.codeply.com/go/WsWHHIfRlh
<div class="navbar navbar-expand navbar-dark" id="nav-container-mobile">
<div class="container-fluid">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
#nav-container-mobile {
width: 100%;
height: 70px;
padding: 0;
background: #292929;
z-index: 5;
}
.nav-link {
color: #aeaeae;
}

Can I make the Bootstrap 4 navbar switch to a column instead of collapsing?

I would prefer that all my menu items remain visible at all times, and simply switch from a centered row formation into a centered column when the screen size is too small.
<div style="position: sticky; top: 0px;">
<!--<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar9">
<span class="navbar-toggler-icon"></span>
</button> this is the fricking collapse button -->
<div class="navbar-collapse collapse" id="navbar10">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link" href="#">aaa</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">bbb</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ccc</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ddd</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">eee</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ffff</a>
</li>
</ul>
</div>
</div>
You can use the regular bootsrap class used to build your layout and drop the collapsing navbar classes: see https://getbootstrap.com/docs/4.0/utilities/flex/
Flex
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
example with :flex-md-row class (play snippet in fullpage and resize windows to see it toggling row/column. You can try also flex-lg-row if you think it turns into column too late.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar " id="navbar10">
<ul class="navbar-nav nav-fill w-100 flex-md-row">
<li class="nav-item">
<a class="nav-link" href="#">aaa</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">bbb</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ccc</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ddd</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">eee</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ffff</a>
</li>
</ul>
</div>
</div>
Using CSS media queries, you can set specific break-points to change your elements. In this example, if the window is less than 480px then we can adjust the width to 100%.
(To see it in action, click run > full page > then resize window)
.navTitle {
width: 20%;
float: left;
background-color: lightGrey;
outline: 1px solid black;
}
#media screen and (max-width: 480px) {
.navTitle {
width: 100%;
}
}
<div class="navTitle">
<p>Section 1</p>
</div>
<div class="navTitle">
<p>Section 2</p>
</div>
<div class="navTitle">
<p>Section 3</p>
</div>
<div class="navTitle">
<p>Section 4</p>
</div>
<div class="navTitle">
<p>Section 5</p>
</div>

CSS float-right not working in Bootstrap 4 Navbar [duplicate]

This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 1 year ago.
I'm trying to get my nav links to float to the right of my navbar, but I can't get it to work. I've tried using the ".float-right", "float-xs-right", and "justify-content-end" bootstrap 4 class, along with using "float: right !important;" in my CSS file, and it still won't work.
Here is the HTML for the navbar of my website:
<div id="navbar" class="navbar navbar-fixed-top">
<div class="container">
<div class="row">
<div class="navbar-brand">
<img src="images/logo.png" width="88px">
Scervino Lawn Service
</div>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact</a>
</li>
</ul>
</div>
</div>
</div>
And here is the CSS:
#navbar {
box-shadow: 0px 0px 11px #000;
padding: 0;
}
#navbar .navbar-brand {
font-size: 1.6em;
font-weight: bold;
color: #9CCC58;
}
I'm relatively new to the Bootstrap 4 framework, so it's possible that I might just be making a dumb mistake, but hopefully someone can help me. :(
Bootstrap 5 (update 2021)
The Bootstrap 5 Navbar still uses flexbox, but the concept of right and left, have changed to start and end for new RTL support. Therefore, the class names have changed...
float-right --> float-end
float-left --> float-start
ml-* --> ms-*
pl-* --> ps-*
mr-* --> me-*
pr-* --> pe-*
BUT, remember floats don't work with flexbox. The best approach for right alignment in the Navbar is to use ms-auto (margin-left: auto) or justify-content-end.
See this question for details
Bootstrap 4
The original answer no longer works in Bootstrap 4, and it's not good practice to use Bootstrap's .row in the navbar component. The .row should only be used for grid columns.
Now that Bootstrap 4 is flexbox, one way to align navbar components is using the auto-margin utility classes, such as ml-auto which is a shortcut for CSS margin-left:auto. This can be used to push the nav to the right...
https://www.codeply.com/go/ZAGhCX5lpq
<div id="navbar" class="navbar navbar-expand navbar-fixed-top">
<div class="container">
<div class="navbar-brand">
<img src=".." width="88px">
Scervino Lawn Service
</div>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact</a>
</li>
</ul>
</div>
</div>
Or the flexbox utils like justify-content-between can be used on the container inside the navbar...
<div id="navbar" class="navbar navbar-expand navbar-fixed-top">
<div class="container justify-content-between">
<div class="navbar-brand">
<img src=".." width="88px">
Scervino Lawn Service
</div>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact</a>
</li>
</ul>
</div>
</div>
Just notice that in this case justify-content-between works because there are only 2 navbar components (navbar-brand and nav).
You can use .justify-content-between on the parent .row to move the flex children to the far edges of the row.
#navbar {
box-shadow: 0px 0px 11px #000;
padding: 0;
}
#navbar .navbar-brand {
font-size: 1.6em;
font-weight: bold;
color: #9CCC58;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="navbar" class="navbar navbar-fixed-top">
<div class="container">
<div class="row justify-content-between">
<div class="navbar-brand">
<img src="images/logo.png" width="88px">
Scervino Lawn Service
</div>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact</a>
</li>
</ul>
</div>
</div>
I tried with Bootstrap 4.0.0 Alpha 6 and it works, here's the example: https://repl.it/JwMq/0
I just added this:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"/>
And a extra </div>