I'm learning to use bootstrap 5, so bear with me if this question seems a bit basic!
I'm toying around with tabs to generate tabbable panes of local content. I've used the code provided in the documentation here :
https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
And it works perfectly. It responds well also to justify-content, so the tabs are easy to center or distribute. Exactly what I am looking for.
But, I can't make them split with auto margins (mr-auto and ml-auto) so that, for example, the first two tabs will be aligned on the left and the last one on the right. When I include them in the ul tag, it is just ignored (while the justify-content work just fine)
I'm looking to do something like in the flex documentation :
https://getbootstrap.com/docs/4.0/utilities/flex/#auto-margins
or in Wikipedia where the article and talk tabs are on the left, and the read, edit and history are on the right.
How could I do that?
Change your last li like :
<li class="nav-item ms-auto" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
In Bootstrap 5,
t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
s - for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
e - for classes that set margin-right or padding-right in LTR, margin-left or padding-* left in RTL
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element
For More Info : here
Related
I have a mdb navbar in my Angular app but the height of the navbar seems to flip to a bigger one randomly when reloading the page (Sometimes it keeps height, some other time it has increased height). Also, as soon as I open the developer console in Chrome the size adjusts back to normal which makes it hard to find the issue.
The following screenshots show 1.) how it should look like all the time and 2.) how it is displayed sometimes when I refresh the page:
My navbar is in a separated Angular component which I add to the app.component.html as it shows here:
<app-header></app-header>
<div class="d-flex p-2 justify-content-center">
<router-outlet></router-outlet>
</div>
The header itself is also pretty simple and looks almost like the provided example of mdb
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo" [containerInside]="false">
<mdb-navbar-brand>
<a class="navbar-brand" [routerLink]="'/dashboard'">Admin Console</a>
</mdb-navbar-brand>
<links>
<ul class="navbar-nav mr-auto">
<li class="nav-item" routerLinkActive="active">
<a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/dashboard'">Dashboard</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/todo'">Users</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/todo'">A</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/todo'">B</a>
</li>
</ul>
<span class="fill-remaining-space"></span>
<ul class="navbar-nav ml-auto">
<li *ngIf="!authService.isLoggedIn" class="nav-item">
<a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/sign-in'">Login</a>
</li>
<li *ngIf="authService.isLoggedIn" class="nav-item">
<a class="nav-link waves-light" mdbWavesEffect (click)="this.authService.signOut()">Logout</a>
</li>
</ul>
</links>
</mdb-navbar>
I tried adding sticky-top as Sideclass which seems to improve the behavior when fixed content is inside the router-outlet. But as soon as I navigate to a component which feeds something more dynamic like a table into the router-outlet it happens again like shown here:
Any idea how to keep the navbar from growing?
Thank you!
This seems to be a bug in the component but I found out how to work around.
Apparently the div injected into nav has a style with is used for controllig the height when drop-down is active. This height is meant to be increased only in case of an active drop-down but in my case it got increased sporadically. So I used this CSS to limit the max-height of the navbar when it is not in drop-down mode:
:host ::ng-deep mdb-navbar nav div :not(.show) {
max-height: 40px !important;
}
I am using Boostrap 4. I have a simple 4 tab horizontal navigation. On big screens, it should display like this: "Some text [font-awesome-icon]" x 4 tabs. On small screens, it should display like this: "[font-awesome-icon]". The display part works, however, on large screen the font-awesome-icon always shows on the second line. Here is what I see;
This is my html;
<!-- Nav tabs -->
<ul class="nav nav-tabs ">
<!-- profile -->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" nowr>
<span class="d-none d-md-block">Some text
</span>
<i class="fas fa-id-card">
</i>
</a>
</li>
<!-- profile image -->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile-image"><i class="fas fa-images"></i></a>
</li>
<!-- password -->
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#password"><i class="fas fa-unlock-alt"></i></a>
</li>
<!-- timezone -->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#timezone"><i class="fas fa-clock"></i></a>
</li>
</ul>
I have tried nowrap in all locations like UL, LI, A, SPAN but no luck. I have also moved the fa-clock part to inside the span, however, then the entire text and tab disappear on small screens.
Any help appreciated.
To stop making your id card from moving to next line, float your "Some text" to left.
<li class="nav-item" >
<a class="nav-link" data-toggle="tab" href="#profile" nowr>
<span style="float:left;" class="d-none d-md-block">Some text
</span>
<i class="fas fa-id-card">
</i>
</a>
</li>
base on my question, Basically I want to make my webpage like below:
The red box means that the div that can scrollable and the div size is according to the content size. Meanwhile, The main background (that man)and the navbar is fixed and no scrollable.
Below is my current code:
<body id="header">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: black;">
<a class="navbar-brand" style = "font-weight: 600; font-family: Arial, Helvetica, sans-serif;" href="#">Dr. Lim Wee Chai</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" style = "font-weight: 600; font-family: Arial;" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" style = "font-weight: 500;" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" style = "font-weight: 500;" href="#">Philosophies & Values</a>
</li>
<li class="nav-item">
<a class="nav-link" style = "font-weight: 500;" href="#">Lifestyle</a>
</li>
<li class="nav-item">
<a class="nav-link" style = "font-weight: 500;" href="#">Top Glove</a>
</li>
<li class="nav-item">
<a class="nav-link" style = "font-weight: 500;" href="#">Future Vision</a>
</li>
<li class="nav-item">
<a class="nav-link" style = "font-weight: 500;" href="#">Videos</a>
</li>
</ul>
</div>
</nav>
<br>
</body>
Can anyone help me to solve this?
In CSS3, the flex properties can be usefull to achieve this. Bootstrap 4 makes great use of this in the flex utility classes. To assemble this setup, the simplest form I've found so far:
<div class="container d-flex h-100">
<div class="my-component d-flex mx-auto align-self-center flex-column">
<!-- some scrollable content -->
</div>
</div>
This is demonstrated in this fiddle.
To explain all these classes let's break it down:
Make sure html, body have height: 100%;. This is required to generate a full height body. In turn the browser can now use this height to vertically center content
.container or .container-fluid with .d-flex and .h-100 will make use of this body height to also stretch over the height of the screen.
.my-component now has a height: 50vh and width: 50vw; which is viewport height and -width and makes this component responsive. Also overflow-y: auto; to make it scrollable. Feel free to adjust this to your liking with media queries and so on.
It has also .d-flex to enable .mx-auto (horizontal center), .align-self-center (vertical center) and .flex-column to align the content properly
None of these utility classes can be omitted as they all work together.
Hopefully this is like you requested as the content of your "wrapper" isn't clear from the question.
I have tried using class row over this div but could not shift tabs in next line..
<div class="navwrap">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" *ngFor="let menu of menudata; let i=index">
<a class="nav-link" (click)="changecategory(i,menu.id)" [class.active]="menu.isSelected" data-toggle="tab" role="tab">{{menu.name}}</a>
</li>
</ul>
</div>
How to shift remaining tags in other line?
Current Image tabs
Add 'flex-wrap' Class with nav, So you can move tab in new line
<div class="navwrap">
<ul class="nav nav-tabs flex-wrap" role="tablist">
<li class="nav-item" *ngFor="let menu of menudata; let i=index">
<a class="nav-link" (click)="changecategory(i,menu.id)" [class.active]="menu.isSelected" data-toggle="tab" role="tab">{{menu.name}}</a>
</li>
</ul>
</div>
Use flexbox
Using flexbox you can fix your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions.
I've already checked:
Display inline-block image link with horizontal scroll
Bootstrap row with horizontal scroll
but both of them didn't really solve my problem.
What I have done:
I am using a free bootstrap template (sb-admin 2, which can be found here: http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/index.html), more precisely I am actually working on the "chat" panel.
The original chat layout is:
What I am trying to accomplish is adding a "user list" below the "chat" text, and to accomplish such I've already made the entire server logic and, in order to be able to show / hide the chats, I'm using bootstrap's tabs : http://getbootstrap.com/javascript/#tabs (because it's way easier to control the entire flow of the chat).
In order to don't post the entire source code of the entire project (over 100k lines of code), I've replicated my proble, on a fiddle in order to post it.
The relevant part of the testing I've done is this one (it contains some twig and i'm politely asking you to ignore it, it won't be in the tags because I don't have any issue with twig):
<div class="panel-body">
<div class="span11">
<div class="row-fluid">
<div class="col-lg-12">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span>
</a>
</li>
<li role="presentation" class="active">
<a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span>
</a>
</li>
<li role="presentation" class="active">
<a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span>
</a>
</li><li role="presentation" class="active">
<a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span>
</a>
</li>
<li role="presentation" class="active">
<a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span>
</a>
</li>
<li role="presentation" class="active">
<a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span>
</a>
</li>
<li role="presentation" class="active">
<a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span>
</a>
</li>
<li role="presentation" class="active">
<a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span>
</a>
</li>
</ul>
</div>
</div>
</div>
This is what I've tried after reading all the posts about being able to scroll horizontally a set of elements, therefore what I did is:
create a container (span11)
create a fluid row (row-fluid)
create a col-lg-12 element (to fill the row)
parse inside it the entire set of elements (all <ul> <li>, all tabs).
What I was expecting was having a div with 100% width with a scrollable bar with the elements inside it, like this:
http://jsfiddle.net/zLez4drz/
(warning: fiddle taken from another question where I took the informations from)
While my output is this one instead:
<-- by setting height 50px
<-- by setting height 100px
In a nutshell, the elements are being printed on two (or multiple) rows according to the device (or resolution), while I want them to be all printed inline and able to scroll horizontally regardless the amount of <li>s inside the parent container.
Fiddle to work on:
http://jsfiddle.net/b7ghL587/1/
My questions:
Why is it happening? Is there any way to solve it or am I supposed to don't use lists at all and rewrite the javascript part?
Can the rest of the DOM influence this?
You can't scroll elements that are floated.You need to override some Bootstrap default code:
.nav-tabs > li {
float:none;
display:inline-block;
}
Here is a working fiddle.