Tab panes losing width in Bootstrap 4 - html

I've created tabbed content in my project with three tabs. For each tab pane, the pane loses width. For example the first tab pane is the full 100% width, however each pane onwards loses 100-200px consecutively.
For example:
The first pane is 1140px (full width of the container)
The second pane is: 1004px width
The third pane is: 794px width
I've checked for missing divs and I don't believe the use of rows and columns within the tab panes is the cause of the issue. I've also tried setting width: 100% to the tab panes with no luck.
I can't understand why this is happening.
<section class="home-office-types">
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-tabs home-office-types__tabs" id="myTab" role="tablist">
<li class="nav-item home-office-types__tab">
<a class="nav-link home-office-types__tab-link active" id="managed-offices-tab" data-toggle="tab" href="#managed-offices" role="tab"
aria-controls="managed-offices" aria-selected="true">Serviced & managed offices</a>
</li>
<li class="nav-item home-office-types__tab">
<a class="nav-link home-office-types__tab-link" id="meeting-rooms-tab" data-toggle="tab" href="#meeting-rooms" role="tab"
aria-controls="meeting-rooms" aria-selected="true">Meeting Rooms</a>
</li>
<li class="nav-item home-office-types__tab">
<a class="nav-link home-office-types__tab-link" id="virtual-offices-tab" data-toggle="tab" href="#virtual-offices" role="tab"
aria-controls="virtual-offices" aria-selected="true">Virtual Offices</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="tab-content home-office-types__content" id="myTabContent">
<div class="tab-pane fade show active" id="managed-offices" role="tabpanel"
aria-labelledby="managed-offices-tab">
<div class="row">
<div class="col-lg-7 d-flex justify-content-start">
<ul>
<li>State of the art internet & phone packages</li>
<li>Fully furnished and ready for you to move in and make your home</li>
<li>No hidden costs - your monthly fee covers everything from all your utilities to cleaning</li>
<li>Great value and truly affordable prices</li>
<li>No long contracts - choose from a few days to as long as you want giving you total control of your business’ finances</li>
</ul>
</div>
<div class="col-lg-5 d-flex justify-content-end">
<img class="home-office-types__image img-fluid" src="https://placehold.co/304x304" alt="">
</div>
</div>
</div>
<div class="tab-pane fade" id="meeting-rooms" role="tabpanel" aria-labelledby="meeting-rooms-tab">
<div class="row">
<div class="col-lg-7 d-flex justify-content-start">
<ul>
<li>State of the art internet & phone packages</li>
<li>Fully furnished and ready for you to move in and make your home</li>
</ul>
</div>
<div class="col-lg-5 d-flex justify-content-end">
<img class="home-office-types__image img-fluid" src="https://placehold.co/304x304" alt="">
</div>
</div>
</div>
<div class="tab-pane fade" id="virtual-offices" role="tabpanel" aria-labelledby="virtual-offices-tab">
<div class="row">
<div class="col-lg-7 d-flex justify-content-start">
<ul>
<li>State of the art internet & phone packages</li>
</ul>
</div>
<div class="col-lg-5 d-flex justify-content-end">
<img class="home-office-types__image img-fluid" src="https://placehold.co/304x304" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Below is the JS Fiddle:
https://jsfiddle.net/graeme95/qo6tj819/2/

.tab-content {
width: 100%;
}
Also noticed that your grid only starts at lg. Mobile first!

Related

I don't know why my footer is not 100% wide with bootstrap 4.0

My footer is not getting 100% wide and i really don't know what is wrong. Maybe there's a problem with container nesting, but i don't know how to fix it properly. I've just started learning Bootstrap, so this is my first code with it.
<div class="container-fluid d-flex align-items-center justify-content-around">
<footer class="container-fluid align-items-center text-center">
<div class="row">
<div class="col-4">
<ul class="list-unstyled">
<li class="mb-2 font-weight-bolder">Links</li>
<li class="mb-2"><a class="text-reset" href="#">Home</a></li>
<li class="mb-2"><a class="text-reset" href="#">Cardápio</a></li>
<li class="mb-2"><a class="text-reset" href="#">Contato</a></li>
</ul>
</div>
<div class="col-8">
<ul class="list-unstyled">
<li class="mb-2 font-weight-bolder">Pizzas</li>
<li class="mb-2"><a class="text-reset" href="#">Tradicionais</a></li>
<li class="mb-2"><a class="text-reset" href="#">Nobres</a></li>
<li class="mb-2"><a class="text-reset" href="#">Doces</a></li>
</ul>
</div>
</div>
<p class="align-items-center">Pizzaria.com.br</p>
</footer>
</div>
Here is the website print
Any suggestions?
You can try this in your .css file
body{
margin:0;
padding:0;
}

Bootstrap Nav-pills not working correctly

I am using one main nav-menu and then a second nav-menu, the content for all these are within the same div.
Once I enter the page, Profile is active on default which is correct, I can then enter Test which then becomes active, as expected.
However, once I click on Edit both Edit and the last nav-item inside the Main Nav-menu is active.
Edit then remains active, despite clicking on Profile or Test. This means I have to refresh the page to remove the active-state and in order to see the content inside Edit again.
Any suggestions on what's wrong with this structure?
<div class="container">
<!-- Second Nav-menu -->
<div class="col-lg-4">
<div class="container-fluid">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a href="#" data-target="#edit" data-toggle="pill" class="nav-link edit">
<span>Edit info</span>
</a>
</li>
</ul>
</div>
</div>
<!-- End of second Nav-Menu -->
<!-- Main Nav-menu -->
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a href="#profile" data-target="#profile" data-toggle="pill" class="nav-link active show profile">
<span>Profile</span></a>
</li>
<li class="nav-item">
<a href="#test" data-target="#test" data-toggle="pill" class="nav-link test">
<span>Test</span></a>
</li>
</ul>
<!-- End of main Nav-menu -->
<!-- Tab content -->
<div class="tab-content">
<div class="tab-pane" id="edit" name="edit">
<div class="col-md-12">
<h2>Edit-tab</h2>
</div>
</div>
<div class="tab-pane active show" id="profile">
<div class="col-md-12">
<h3>Profile-tab</h3>
</div>
</div>
<div class="tab-pane" id="test">
<div class="col-md-12">
<h2>Test-tab</h2>
</div>
</div>
</div>
<!-- Tab content end-tag -->
</div>
In BS4 a button becomes active when the ACTIVE class is added to it.
Inside the nav tag, the "profile" button is activated by default and when you press the "test" button, "profile" button turns off, assigning the ACTIVE class to test. In this way you can show which menu is active each time.
However "Edit info" is in another nav, where this button is the only element. That's why you have no way to turn it off since there is no other button that turns on and off the previous one.
This operation is typical of the navs in BS4 and is done automatically by means of a javascript code.
To turn off ACTIVE you must delete the ACTIVE class.
The simplest thing is to do it by means of a javascript that is activated when an event occurs.
I leave you an example where when pressing the button "shutdown" the javascritp is activated and the ACTIVE class is eliminated.
This can be associated with a button or any other event that calls this function.
The code could be the following
<div class="container">
<!-- Second Nav-menu -->
<div class="col-lg-4">
<div class="container-fluid">
<ul id="1" class="nav nav-pills nav-justified">
<li class="nav-item">
<a href="#" data-target="#edit" data-toggle="pill" class="nav-link edit">
<span>Edit info</span>
</a>
</li>
</ul>
<a href="#" data-target="#edit" data-toggle="pill" class="nav-link apagar">
<span>apagar</span>
</a>
</div>
</div>
<!-- End of second Nav-Menu -->
<!-- Main Nav-menu -->
<ul id="2" class="nav nav-pills nav-justified">
<li class="nav-item">
<a href="#profile" data-target="#profile" data-toggle="pill" class="nav-link active show profile">
<span>Profile</span>
</a>
</li>
<li class="nav-item">
<a href="#test" data-target="#test" data-toggle="pill" class="nav-link test">
<span>Test</span>
</a>
</li>
</ul>
<!-- End of main Nav-menu -->
<!-- Tab content -->
<div class="tab-content">
<div class="tab-pane" id="edit" name="edit">
<div class="col-md-12">
<h2>Edit-tab</h2>
</div>
</div>
<div class="tab-pane active show" id="profile">
<div class="col-md-12">
<h3>Profile-tab</h3>
</div>
</div>
<div class="tab-pane" id="test">
<div class="col-md-12">
<h2>Test-tab</h2>
</div>
</div>
</div>
<!-- Tab content end-tag -->
</div>
<script>
$(function() {
$(".apagar").click(function() {
$(".edit").removeClass('active');
});
});
</script>
Good luck

Is it possible to have a navbar on bootstrap cards when they are dynamically created?

I'm working on a website where I have multiple cards representing a product. I want to have tabs on the top of each card so that the user can see more details; however, when I try doing this, no matter which card I click the tab on, only the very first one changes. I think it is because of the id and aria-controls is the same on each one due to the loop, but I do not know how to fix this. Please help.
UPDATE:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="card border-dark mb-3 mx-auto text-center" *ngFor="let p of products">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id='product-tab' data-toggle='tab' role="tab" aria-controls="product" aria-selected="true" href="#product">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" id='user-tab' data-toggle='tab' role="tab" aria-controls="user" aria-selected="false" href="#user">User</a>
</li>
<li class="nav-item">
<a class="nav-link" id='details-tab' data-toggle='tab' role="tab" aria-controls="details" aria-selected="false" href="#details">Details</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="product" role="tabpanel" aria-labelledby="product-tab">
<h5 class="card-title">{{p.name}}</h5>
<div role="separator" class="dropdown-divider"></div>
<h6 class="card-subtitle">
<i>{{p.location}} | {{p.quantity}} available</i>
<br>
<small class="text-muted">Uploaded {{p.datePosted | date}}</small>
</h6>
<div role="separator" class="dropdown-divider"></div>
<p class="card-text">{{p.description}}</p>
</div>
<div class="tab-pane fade" id="user" role="tabpanel" aria-labelledby="user-tab">
<h5 class="card-title">{{p.userName}}</h5>
<hr>
<h6 class="card-subtitle">
Contact Information:
</h6>
{{p.phone | phone}} {{p.email}}
<hr>
<h6 class="card-subtitle">
Bell Id:
</h6>
{{p.employeeNumber}}
</div>
<div class="tab-pane fade" id="details" role="tabpanel" aria-labelledby="details-tab">{{p.datePosted}}</div>
</div>
</div>
<div class="card-footer">
<button type="button" class="btn btn-outline-primary" (click)='rejectProduct(p.id)' [routerLink]="['/admin/products']">REJECT</button>
<button type="button" class="btn btn-outline-primary" (click)='approveProduct(p.id)' [routerLink]="['/admin/products']">APPROVE</button>
</div>
</div>
First, remember to include the Bootstrap javascript files if you have not done so already (they are not present in your code example).
Assuming you have the correct Bootstrap files linked, you'll need to give your elements unique IDs on each loop so that your tabs will call the correct tab pane content. To do this, simply declare a variable in the script that generates the cards and append it to the ID in each loop (e.g. id="product-tab-0", id="product-tab-1", etc.).

What is wrong with my Bootstrap data-toggle implementation?

So I'm trying to implement a data toggle using bootstrap 4.2.1. Following the documentation, I came up with the following code:
<div class="container">
<div class="row bottom-section position-relative">
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link nav-team active text-center" id="team-tab" data-toggle="tab" data-target="#team" aria-controls="team" role="tab" aria-selected="true">Team</a>
</li>
<li class="nav-item">
<a class="nav-link nav-individual text-center" id="individual-tab" data-toggl="tab" data-target="#individual" aria-controls="individual" role="tab" aria-selected="false">Individual</a>
</li>
</ul>
<div class="bottom-section-content col-sm-12">
<div class="tab-content">
<div class="tab-pane active" id="team" role="tabpanel" aria-labelledby="team-tab"><p>asd</p></div>
<div class="tab-pane" id="individual" role="tabpanel" aria-labelledby="individual-tab"><p>sad</p></div>
</div>
</div>
</div>
</div>
I cant't figure out what is wrong, it should be working like this. Am I missing something with the bootstrap js?
I used your code and found that if you are using 4.1.3, this implementation will not work with your current HTML. You have to upgrade your JS to Bootstrap 4.2.1.
Use: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js
Also #elveti is right you misspelled data-toggle.
Working Example using (4.2.1): https://codepen.io/brooksrelyt/pen/zeNVxo

how to style a nav bar, logo and title in angular bootstrap 4 web app?

Im trying to make the top of the webpage so its a grid of ratio 3:6 with the section on the left being a square image. and the section on the right being split horizontally in 2 with the top half being a bar with the title and the bottom half a naviagtion bar. this is my code. unfortuanetly the title is not appearing at all, and the image is appearing on top of the navigation bar and also not filling the width of the screen. Im really not sure what the problem. any help would be great! thanks
<div class="col-sm-6 col-md-3 col-lg-3 col-xl-3">
<img ng-src="img/sky-logo.jpg" width="200px"/>
</div>
<div class="col-sm-6 col-md-9 col-lg-9 col-xl-9 ">
<div id="top">
<div class="container">
<div class="clearfix">
<div class="pull-center"><title> title </title></div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#link1">link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link2">link 2</a>
</li>
</ul>
</nav>
</div>
<div ng-view></div>
</body>
for title you should use headings instead as <title> tag defines a title in the browser toolbar and should be placed in <head></head>
for layout that you described you can try the following code
<div class="col-sm-12">
<!-- for ratio 3:6 -->
<div class="col-sm-4">
<img ng-src="img/sky-logo.jpg" style="width:200px" />
</div>
<!-- for ratio 3:6 -->
<div class="col-sm-8">
<!-- top half -->
<div class="col-sm-12">
<div id="top">
<div class="container">
<div class="clearfix">
<div class="pull-center">title</div>
</div>
</div>
</div>
</div>
<!-- bottom half -->
<div class="col-sm-12">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#link1">link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link2">link 2</a>
</li>
</ul>
</nav>
</div>
</div>
</div>