I have the following code:
<?php
$page_title = 'Welcome to JPR Technology';
include('./includes/header.html');
?>
<body>
<div class="d-flex align-items-start mt-5 ms-5">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true"><i class="fa fa-home"></i> Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false"><i class="fa fa-calculator"></i> Calculator</button>
<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false"><i class="fa fa-calendar"></i> Date Form</button>
<button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false"><i class="fa fa-database"></i> Register</button>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active ms-5" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" data-toggle="button">
<img class="d-block mx-auto mb-4" src="./assets/home.svg" alt="" width="72" height="57">
<h4>Home Page</h4>
<p>Welcome to JPR Technology Projects Ltd.</p>
<?php
include('./includes/footer.php');
?>
</div>
<div class="tab-pane fade ms-5" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" data-toggle="button">
<img class="d-block mx-auto mb-4" src="./assets/calculator.svg" alt="" width="72" height="57">
<?php
include('./calculator.php');
?>
</div>
<div class="tab-pane fade ms-5" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" data-toggle="button">
<img class="d-block mx-auto mb-4" src="./assets/calendar.svg" alt="" width="72" height="57">
<?php
include('./dateform.php');
?>
</div>
<div class="tab-pane fade ms-5" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" data-toggle="button">
<img class="d-block mx-auto mb-4" src="./assets/database.svg" alt="" width="72" height="57">
<?php
include('./register.php');
?>
</div>
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="http://localhost:8082/bootstrap-5.0.0-beta2/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
This is how my screen looks like initially:
enter image description here
But when I navigate from tab to tab, the previous page does not clear properly:
enter image description here
Fix your bootstrap links
<?php
$page_title = 'Welcome to JPR Technology';
include('./includes/header.html');
?>
<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<body>
<div class="d-flex align-items-start mt-5 ms-5">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true"><i class="fa fa-home"></i> Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false"><i class="fa fa-calculator"></i> Calculator</button>
<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false"><i class="fa fa-calendar"></i> Date Form</button>
<button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false"><i class="fa fa-database"></i> Register</button>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active ms-5" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" data-toggle="button">
<img class="d-block mx-auto mb-4" src="./assets/home.svg" alt="" width="72" height="57">
<h4>Home Page</h4>
<p>Welcome to JPR Technology Projects Ltd.</p>
<?php
include('./includes/footer.php');
?>
</div>
<div class="tab-pane fade ms-5" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" data-toggle="button">
<img class="d-block mx-auto mb-4" src="./assets/calculator.svg" alt="" width="72" height="57">
<?php
include('./calculator.php');
?>
</div>
<div class="tab-pane fade ms-5" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" data-toggle="button">
<img class="d-block mx-auto mb-4" src="./assets/calendar.svg" alt="" width="72" height="57">
<?php
include('./dateform.php');
?>
</div>
<div class="tab-pane fade ms-5" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" data-toggle="button">
<img class="d-block mx-auto mb-4" src="./assets/database.svg" alt="" width="72" height="57">
<?php
include('./register.php');
?>
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
Related
I am using a bootstrap collapse functionality to show/hide some statistics, opens like a charm, but when closing, it does no animation and the arrow does not turn back down. What am I missing?
<div class="columna">
<section class="stadisticCard">
<div class="card chart-card">
<div class="card-body pb-0">
<h5 class="card-title font-weight-bold">Amount of food wasted each season in Spain</h5>
<p class="card-text float-left">Spanish Government • 2020</p>
<div class="float-right">
<button class="botonExpandir collapsed" type="button" data-toggle="collapse" data-target="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">
<i class="bi bi-arrow-up-circle"></i>
</button>
</div>
</div>
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card-body">
<ul class="nav nav-tabs nav-fill mb-3" id="pills-tab1" role="tablist">
<li class="nav-item ms-0" role="presentation">
<a class="linkStadisticas nav-link active" id="pills-home-tab1" data-toggle="pill" href="#pills-home1" role="tab" aria-controls="pills-home1" aria-selected="true">Statistics</a>
</li>
<li class="nav-item">
<a class="linkStadisticas nav-link" id="pills-profile-tab1" data-toggle="pill" href="#pills-profile1" role="tab" aria-controls="pills-profile1" aria-selected="false">Information</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="pills-tabContent1">
<div class="tab-pane fade show active" id="pills-home1" role="tabpanel" aria-labelledby="pills-home-tab1">
<canvas id="lineChart" class="lineChart" width="100%" height="100%"></canvas>
</div>
<div class="tab-pane fade" id="pills-profile1" role="tabpanel" aria-labelledby="pills-profile-tab1">
<p class=" textoStadisticas font-small text-muted mx-1">
Information about the statistics
</p>
</div>
</div>
</div>
</div>
</section>
</div>
You have to target [aria-expanded="true"] / [aria-expanded="false"] for expand/collapse Icon UI:
.botonExpandir[aria-expanded="true"] i::before {
content: "\f13a";
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<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="columna">
<section class="stadisticCard">
<div class="card chart-card">
<div class="card-body pb-0">
<h5 class="card-title font-weight-bold">Amount of food wasted each season in Spain</h5>
<p class="card-text float-left">Spanish Government • 2020</p>
<div class="float-right">
<button class="botonExpandir collapsed" type="button" data-toggle="collapse" data-target="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">
<i class="bi bi-arrow-down-circle"></i>
</button>
</div>
</div>
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card-body">
<ul class="nav nav-tabs nav-fill mb-3" id="pills-tab1" role="tablist">
<li class="nav-item ms-0" role="presentation">
<a class="linkStadisticas nav-link active" id="pills-home-tab1" data-toggle="pill" href="#pills-home1" role="tab" aria-controls="pills-home1" aria-selected="true">Statistics</a>
</li>
<li class="nav-item">
<a class="linkStadisticas nav-link" id="pills-profile-tab1" data-toggle="pill" href="#pills-profile1" role="tab" aria-controls="pills-profile1" aria-selected="false">Information</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="pills-tabContent1">
<div class="tab-pane fade show active" id="pills-home1" role="tabpanel" aria-labelledby="pills-home-tab1">
<canvas id="lineChart" class="lineChart" width="100%" height="100%"></canvas>
</div>
<div class="tab-pane fade" id="pills-profile1" role="tabpanel" aria-labelledby="pills-profile-tab1">
<p class=" textoStadisticas font-small text-muted mx-1">
Information about the statistics
</p>
</div>
</div>
</div>
</div>
</section>
</div>
My tab panels have problem with content width - it doesnt work with columns - it can't divide a tab-pane as col-md-7 and col-md-5 (look at screen below). I dont know how to make it works.
<div class="container py-5">
<div class="row py-3">
<div class="col-lg-12">
<div class="card h-100">
<div class="card-header py-3"><b>Działalność</b> | Zarządzanie</div>
<div class="card-body">
<div id="zarzadzanie" class="zarzadzanie d-flex align-items-start">
<div class="nav flex-column nav-pills me-5" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active my-2" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">
Podstawowe</button>
<button class="nav-link my-2" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">
Kolorystyka</button>
<button class="nav-link my-2" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">
Adresy</button>
<button class="nav-link my-2" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">
Historia</button>
</div>
<!-- TAB-CONTENT -->
<div class="tab-content" id="v-pills-tabContent">
<!-- Ustawienia 1 --->
<div class="tab-pane fade show active pt-2" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<div class="row pb-2">
<div class="col-md-7">
<p>Tabs can be used to contain </p>
</div>
<div class="col-md-5">dsdas</div>
</div>
</div>
<!-- Ustawienia 2 --->
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
</div>
<!-- Ustawienia 3 --->
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
</div>
<!-- Ustawienia 4 --->
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
</div>
<!-- END TAB-CONTENT-->
</div>
<!-- </> END TAB-CONTENT-->
</div>
</div>
</div>
</div>
</div>
</div>
I would be very grateful for your help guys.
Problem on image
I added w-100 to every parent and it works. To the tab-content and the tab-pane
Dear users once again need help from stackoverflow.
I'am trying to create navigation responsive menu that changes on mobile screens dynamicly.
First stage is XL ( navigation is on left )
Second is MD ( navigation is on left, but with icons/no-text )
Third SM ( navigaton is on top only icons with wrap )
Something like this:
X,1,2,3,4,5
6,7,8,9,10
Here is my example.gif, but as you can see on SM(small devices) list-group-horizontal is overflowing over the border.
Link to Gif : https://ibb.co/zZ2ctM1
Link2: Example.Gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>xProfile</title>
<link href="https://xkp.ftp.sh/inc/css/bootstrap.css" rel="stylesheet">
<link href="https://xkp.ftp.sh/inc/css/fontawesome/css/all.min.css" rel="stylesheet">
<link href="https://xkp.ftp.sh/inc/css/datatables/datatables.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid flex-grow-1 py-1">
<div class="card">
<div class="row">
<div class="d-flex flex-column">
<div class="list-group list-group-flush d-none d-md-block" id="myList">
<a class="list-group-item list-group-item-action" data-toggle="list" href="#adm"><span><i class="far fa-gem mr-4 pr-3"></i></span>admn</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#general"><span><i class="far fa-gem mr-4 pr-3"></i></span>Информация</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#change-email"><span><i class="fas fa-laptop mr-4 pr-3"></i></span>Промяна на имейл</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#change-password"><span><i class="fas fa-bomb mr-4 pr-3"></i></span>Промяна на парола</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#change-details"><span><i class="fas fa-code mr-4 pr-3"></i></span>Промяна на детайли</a>
<br>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#create-new-user"><span><i class="fas fa-cogs mr-4 pr-3"></i></span>Създай акаунт</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#view-users"><span><i class="fas fa-laptop mr-4 pr-3"></i></span>Всички потребители</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#last-regs"><span><i class="fas fa-laptop mr-4 pr-3"></i></span>Последно регистрирани</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#last-logins"><span><i class="fas fa-laptop mr-4 pr-3"></i></span>Последно влезли</a>
</div>
<div class="list-group list-group-flush list-group-horizontal d-flex flex-fill justify-content-center d-xs-block d-sm-block d-md-none " >
<a class="list-group-item list-group-item-action " data-toggle="list" href="#adm">A</a>
<a class="list-group-item list-group-item-action " data-toggle="list" href="#general">1</a>
<a class="list-group-item list-group-item-action " data-toggle="list" href="#change-email">2</a>
<a class="list-group-item list-group-item-action " data-toggle="list" href="#change-password">3</a>
<a class="list-group-item list-group-item-action " data-toggle="list" href="#change-details">4</a>
<a class="list-group-item list-group-item-action " data-toggle="list" href="#create-new-user">5</a>
<a class="list-group-item list-group-item-action " data-toggle="list" href="#view-users">6</a>
<a class="list-group-item list-group-item-action " data-toggle="list" href="#last-regs">7</a>
<a class="list-group-item list-group-item-action " data-toggle="list" href="#last-logins">8</a>
<a class="list-group-item list-group-item-action " data-toggle="list" href="#">9</a>
<a class="list-group-item list-group-item-action " data-toggle="list" href="#">10</a>
<a class="list-group-item list-group-item-action " data-toggle="list" href="#">11</a>
</div>
</div>
<div class="col border border-primary ">
<div class="tab-content">
<div class="tab-pane fade" id="adm"><hr class="border-light m-0">
<div class="card-body pb-2">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-link active border border-primary" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true"> <i style="font-size:18px" class="fas fa-info-circle"></i> Последно влезли </a>
<a class="nav-link border border-primary border-left-1" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false"> <i class="fas fa-at"></i> Последно регистрирани</a>
<a class="nav-link border border-primary border-left-1" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false"> <i class="fas fa-key"></i> Всички потребител </a>
<a class="nav-link border border-primary border-left-1" id="nav-contact-tab" data-toggle="tab" href="#" role="tab" aria-controls="nav-contact" aria-selected="false"> <i class="fas fa-paint-roller"></i> Добави потребител</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">.1..</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">.2..</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">..3.</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="general"><hr class="border-light m-0">
<div class="card-body pb-2">
User Info
</div>
</div>
<div class="tab-pane fade" id="change-email"><hr class="border-light m-0">
<div class="card-body pb-2">
Change Email form
</div>
</div>
<div class="tab-pane fade" id="change-password"><hr class="border-light m-0">
<div class="card-body pb-2">
Change Password
</div>
</div>
<div class="tab-pane fade" id="change-details"><hr class="border-light m-0">
<div class="card-body pb-2">
Change user details
</div>
</div>
<div class="tab-pane fade" id="create-new-user"><hr class="border-light m-0">
<div class="card-body pb-2">
CrtNewUser Table
</div>
</div>
<div class="tab-pane fade" id="view-users"><hr class="border-light m-0">
<div class="card-body pb-2">
VwAllusRs Table
</div>
</div>
<div class="tab-pane fade" id="last-regs"><hr class="border-light m-0">
<div class="card-body pb-2">
LastReguSr Table
</div>
</div>
<div class="tab-pane fade active show" id="last-logins"><hr class="border-light m-0">
<div class="card-body pb-2">
<div class="table-responsive">
<table id="example2" class="table small table-hover table-border responsive nowrap" width="100%">
<thead class="thead-dark">
<tr>
<th class="desktop mobile-l mobile-p tablet-p tablet-l" data-priority="-1">ип</th>
<th class="desktop mobile-l mobile-p tablet-p tablet-l" data-priority="-1">име</th>
<th class="desktop mobile-l mobile-p tablet-p tablet-l" data-priority="-1">имейл</th>
<th class="desktop">дата</th>
<th class="none">№</th>
</tr>
</thead><tbody>
<tr>
<td>192.167.0.1</td>
<td>asd</td>
<td>asd#abv.bg</td>
<td>19-21-12</td>
<td>231</td>
</tr><tr>
<td>192.2.0.1</td>
<td>zxc</td>
<td>zxc#abv.bg</td>
<td>19-21-12</td>
<td>31</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr> </div>
<!-- xxxxxxxxxxxxxxxxxxxxx -->
<!-- Footer -->
<!-- xxxxxxxxxxxxxxxxxxxxx -->
<footer class="text-center">
<div class="container">
<div class="row">
<div class="col-12">
<p>Copyright © Мартин Бориславов Борисов. All rights reserved.</p>
<p>privacy policy - Политика за поверителност</p>
<p>terms of service - Условия за ползване</p>
<p><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png" /></a><br />
This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.</p>
</div>
</div>
</div>
</footer>
<script src="https://xkp.ftp.sh/inc/js/jquery/jquery.min.js"></script>
<script src="https://xkp.ftp.sh/inc/js/bootstrap.min.js"></script>
<script src="https://xkp.ftp.sh/inc/js/datatables/datatables.min.js"></script>
</body>
</html>
I am having issues with my grid in bootstrap. I am trying to create a nav with side by side and an image. The image on the left and text on the right with the nav on the top. I tried using
<div class="row">
<div class="col">
But it doesn't work to give me my desired result.
My desired result:
.
My code:
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<h1 class="text-center">About Me</h1>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a aria-controls="nav-info" aria-selected="true" class="nav-item nav-link active" data-toggle="tab" href="#nav-info" id="nav-info-tab" role="tab"><i class="fas fa-info"></i> General Info</a> <a aria-controls="nav-experience" aria-selected="false"
class="nav-item nav-link" data-toggle="tab" href="#nav-experience" id="nav-experience-tab" role="tab"><i aria-hidden="true" class="fa fa-user"></i> Experience</a> <a aria-controls="nav-education" aria-selected="false" class="nav-item nav-link" data-toggle="tab"
href="#nav-education" id="nav-education-tab" role="tab"><i aria-hidden="true" class="fa fa-university"></i> Education</a> <a aria-controls="nav-work" aria-selected="false" class="nav-item nav-link" data-toggle="tab" href="#nav-work" id="nav-work-tab"
role="tab"><i aria-hidden="true" class="fa fa-book"></i> Work</a>
</div>
</nav>
<div class="row">
<div class="col">
<div class="tab-content" id="nav-tabContent">
<div class="col-sm-6">
<div class="text-center"><img alt="avatar edgaraxe" class="img-fluid rounded-circle wow fadeIn" data-wow-delay="1s" src="http://icons.iconseeker.com/png/fullsize/black-power-emoticons/anger-512x512.png"></div>
</div>
</div>
<div aria-labelledby="nav-info-tab" class="tab-pane fade show active" id="nav-info" role="tabpanel">
</div>
<div aria-labelledby="nav-experience-tab" class="tab-pane fade" id="nav-experience" role="tabpanel">
<i class="fas fa-language"></i> <b>Languages</b>
<div aria-labelledby="nav-education-tab" class="tab-pane fade" id="nav-education" role="tabpanel">
<i class="fas fa-university"></i> <b>Alma mater</b><br>
</div>
<div aria-labelledby="nav-work-tab" class="tab-pane fade" id="nav-work" role="tabpanel">
<i class="fas fa-briefcase"></i> <b>Freelancer.com</b><br>
</div>
</div>
</div>
</div>
Here, working code with image on the left and text on the right with the nav on the top:
<div class="container">
<h1 class="text-center">About Me</h1>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a aria-controls="nav-info" aria-selected="true" class="nav-item nav-link active" data-toggle="tab" href="#nav-info" id="nav-info-tab" role="tab"><i class="fas fa-info"></i> General Info</a> <a aria-controls="nav-experience" aria-selected="false"
class="nav-item nav-link" data-toggle="tab" href="#nav-experience" id="nav-experience-tab" role="tab"><i aria-hidden="true" class="fa fa-user"></i> Experience</a> <a aria-controls="nav-education" aria-selected="false" class="nav-item nav-link" data-toggle="tab"
href="#nav-education" id="nav-education-tab" role="tab"><i aria-hidden="true" class="fa fa-university"></i> Education</a> <a aria-controls="nav-work" aria-selected="false" class="nav-item nav-link" data-toggle="tab" href="#nav-work" id="nav-work-tab"
role="tab"><i aria-hidden="true" class="fa fa-book"></i> Work</a>
</div>
</nav>
<div class="tab-content" style="display: inline-block" id="nav-tabContent">
<div class="row">
<div class="col-6">
<img alt="avatar edgaraxe" class="img-fluid rounded-circle wow fadeIn" data-wow-delay="1s" src="http://icons.iconseeker.com/png/fullsize/black-power-emoticons/anger-512x512.png">
</div>
<div class="col-6">
<div aria-labelledby="nav-info-tab" class="tab-pane fade show active" id="nav-info" role="tabpanel">
</div>
<div aria-labelledby="nav-experience-tab" class="tab-pane fade" id="nav-experience" role="tabpanel">
<i class="fas fa-language"></i> <b>Languages</b>
</div>
<div aria-labelledby="nav-education-tab" class="tab-pane fade" id="nav-education" role="tabpanel">
<i class="fas fa-university"></i> <b>Alma mater</b><br>
</div>
<div aria-labelledby="nav-work-tab" class="tab-pane fade" id="nav-work" role="tabpanel">
<i class="fas fa-briefcase"></i> <b>Freelancer.com</b><br>
</div>
</div>
</div>
</div>
</div>
plunker: http://plnkr.co/edit/i4YBtRTL6QCUhjoWboNq?p=preview
I have a little problem here, trying to design a profile but can't get bootstrap 4 tabs to work. Here's the profile page code.
#extends('layouts.core')
#section('content')
<div class="content">
<div class="row profile-content">
<div class="col-sm-3">
<h2>Profile Information</h2>
<ul class="list-group">
<li class="list-group-item">
Name : {{$post->name}}
</li>
<li class="list-group-item">
Email : {{$post->email}}
</li>
<li class="list-group-item">
Verified :
#if($post->email_verified_at)
Yes
#else
No
#endif
</li>
</ul>
</div>
<div class="col-md">
<h2>Posted Products</h2>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab"
data-toggle="pill" href="#pills-home" role="tab"
aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab"
data-toggle="pill" href="#pills-profile" role="tab"
aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab"
data-toggle="pill" href="#pills-contact" role="tab"
aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home"
role="tabpanel" aria-labelledby="pills-home-tab">
#foreach($query as $row)
<div class="product-card" role="tab">
<div class="card">
<div class="card-head">
<img class="card-img-top"
src="/storage/products/{{$row->image}}"
alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">
<a href="/product/{{$row->unique_id}}">
{{$row->name}}
</a>
</h5>
<p class="card-text">{{$row->price}}$</p>
<p class="card-text">
#if($row->stock==0)
<span style="color:red;">
Not Available
</span>
#else
Stock : {{$row->stock}}
#endif
</p>
</div>
<div class="card-body text-center">
<a href="/product/{{$row->unique_id}}"
class="btn btn-primary">
<i class="fas fa-info-circle mr-2"></i>
Details
</a>
#if(Auth::user())
#if(!$row->stock==0)
<a href="/add/{{$row->unique_id}}/1"
class="btn btn-success mr-2">
<i class="fas fa-cart-plus mr-2"></i>
Add To Cart
</a>
#endif
#endif
</div>
#if(Auth::user()->is_admin || $row->by == Auth::user()->email)
<form class='col text-center p-0'
action="{{ action('PostsController#destroy' , $row->id)}}"
onsubmit="return confirm('Are you sure you want to delete ?');" class="text-right" method="POST">
<a class="btn btn-danger w-100">
<i class="fas fa-trash-alt" style="color:white;"></i>
<input type='submit' class='none' name="_method" value="Delete">
</a>
{{ csrf_field() }}
</form>
#endif
</div>
</div>
#endforeach
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel"
aria-labelledby="pills-profile-tab">
AAAAAAAAAAAAAAAAAA
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel"
aria-labelledby="pills-contact-tab">
...
</div>
</div>
<div class="links">
{{$query->links()}}
</div>
</div>
</div>
#endsection
The javascript just appends the content from the other tabs to this current page. I dont know what's the deal. I want the first tab to display the user posts and when i will click on the second tab i want it to replace everything that's showing currently.