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
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>
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>
I have one big menu that I need to divide into cols for mobile and desktop.
So I put put around it:
<div class="col-xl-12 col-md-12 col-6 first-set-skills">
Menu 1
</div>
<div class="col-xl-12 col-md-12 col-6 second-set-skills">
Menu 2
</div>
The problem is that I need both of them to act as one menu. Selecting one item from either of these should only display one result and one active menu item. But because I separated the menus, they show two active items in the menu:
Is there a way to make them both act as one menu, even though they are separated by divs ?
Here is the JSFiddle: https://jsfiddle.net/prozik/qLu9pfje/12/
Here is the bootstrap documentation for the nav (vertical) I followed: https://getbootstrap.com/docs/4.0/components/navs/
Here is the code:
<!-- menu 1 -->
<div class="col-xl-12 col-md-12 col-6">
<div class="nav flex-column nav flex-column nav-pills" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
</div>
<!-- menu 2 -->
<div class="col-xl-12 col-md-12 col-6">
<div class="nav flex-column nav flex-column nav-pills" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-about-tab" data-toggle="pill" href="#v-pills-about" role="tab" aria-controls="v-about-home" aria-selected="true">About</a>
<a class="nav-link" id="v-pills-company-tab" data-toggle="pill" href="#v-pills-company" role="tab" aria-controls="v-pills-company" aria-selected="false">Company</a>
<a class="nav-link" id="v-pills-carreers-tab" data-toggle="pill" href="#v-pills-carreers" role="tab" aria-controls="v-pills-carreers" aria-selected="false">Careers</a>
<a class="nav-link" id="v-pills-location-tab" data-toggle="pill" href="#v-pills-location" role="tab" aria-controls="v-pills-location" aria-selected="false">Location</a>
</div>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"> Home content </div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"> Profile content</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"> Message content </div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab"> Settings content</div>
<div class="tab-pane fade" id="v-pills-about" role="tabpanel" aria-labelledby="v-pills-about-tab"> About content</div>
<div class="tab-pane fade" id="v-pills-company" role="tabpanel" aria-labelledby="v-pills-company-tab-tab"> Company content</div>
<div class="tab-pane fade" id="v-pills-carreers" role="tabpanel" aria-labelledby="v-pills-carreers-tab"> Carreers content</div>
<div class="tab-pane fade" id="v-pills-location" role="tabpanel" aria-labelledby="v-pills-location-tab"> Location content</div>
</div>
There is a jQuery hack to get the desired output,
Add
var $ = jQuery;
$("#tabGroupTwo").children().click(function(e){
$("#tabGroupOne").children().each(function(f){
$(this).removeClass("active");
});
});
$("#tabGroupOne").children().click(function(e){
$("#tabGroupTwo").children().each(function(f){
$(this).removeClass("active");
});
})
And add id to nav-pills div. Check the snippet
var $ = jQuery;
$("#tabGroupTwo").children().click(function(e){
$("#tabGroupOne").children().each(function(f){
$(this).removeClass("active");
});
});
$("#tabGroupOne").children().click(function(e){
$("#tabGroupTwo").children().each(function(f){
$(this).removeClass("active");
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<!-- menu 1 -->
<div class="col-xl-12 col-md-12 col-6">
<div class="nav flex-column nav flex-column nav-pills" role="tablist" aria-orientation="vertical" id="tabGroupOne">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
</div>
<!-- menu 2 -->
<div class="col-xl-12 col-md-12 col-6">
<div class="nav flex-column nav flex-column nav-pills" role="tablist" aria-orientation="vertical" id="tabGroupTwo">
<a class="nav-link" id="v-pills-about-tab" data-toggle="pill" href="#v-pills-about" role="tab" aria-controls="v-about-home" aria-selected="true">About</a>
<a class="nav-link" id="v-pills-company-tab" data-toggle="pill" href="#v-pills-company" role="tab" aria-controls="v-pills-company" aria-selected="false">Company</a>
<a class="nav-link" id="v-pills-carreers-tab" data-toggle="pill" href="#v-pills-carreers" role="tab" aria-controls="v-pills-carreers" aria-selected="false">Careers</a>
<a class="nav-link" id="v-pills-location-tab" data-toggle="pill" href="#v-pills-location" role="tab" aria-controls="v-pills-location" aria-selected="false">Location</a>
</div>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"> Home content </div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"> Profile content</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"> Message content </div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab"> Settings content</div>
<div class="tab-pane fade" id="v-pills-about" role="tabpanel" aria-labelledby="v-pills-about-tab"> About content</div>
<div class="tab-pane fade" id="v-pills-company" role="tabpanel" aria-labelledby="v-pills-company-tab-tab"> Company content</div>
<div class="tab-pane fade" id="v-pills-carreers" role="tabpanel" aria-labelledby="v-pills-carreers-tab"> Carreers content</div>
<div class="tab-pane fade" id="v-pills-location" role="tabpanel" aria-labelledby="v-pills-location-tab"> Location content</div>
</div>
</div>
Below is my code. For some reason when I load the page the navbar shows the contents of "Home". When I click on the Menu tab every works properly. But for some reason when I click on the Scheme tab I only get the Home tab contents
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="menu-tab" data-toggle="tab" href="#menu" role="tab" aria-controls="menu" aria-selected="false">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" id="scheme-tab" data-toggle="tab" href="#scheme" role="tab" aria-controls="scheme" aria-selected="false">Scheme</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">home tab</div>
<div class="tab-pane fade" id="menu" role="tabpanel" aria-labelledby="menu-tab">
<div class="input-group mb-3">
<ul>
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" id="addItem" type="button">Add Item to Menu</button>
</div>
<input type="text" class="form-control" id="addItemInput" placeholder="Enter New Item Here" aria-label="" aria-describedby="basic-addon1">
<ul id="dynamic-list"></ul>
</ul>
</div>
</div>
<div class="tab-pane fade" id="scheme" role="tabpanel" aria-labelledby="scheme-tab">What?</div>
</div>
</div>
I feel like it must be something really simple, thanks in advance.
Your code looks fine to me, and should work. I suspect there is an issue with how you are loading your jQuery and Bootstrap JS and CSS files. Check the console to see if there are any errors.
Here is a working sample of your code - where I am simply using the latest jQuery & Bootstrap CDN files:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="menu-tab" data-toggle="tab" href="#menu" role="tab" aria-controls="menu" aria-selected="false">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" id="scheme-tab" data-toggle="tab" href="#scheme" role="tab" aria-controls="scheme" aria-selected="false">Scheme</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">home tab</div>
<div class="tab-pane fade" id="menu" role="tabpanel" aria-labelledby="menu-tab">
<div class="input-group mb-3">
<ul>
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" id="addItem" type="button">Add Item to Menu</button>
</div>
<input type="text" class="form-control" id="addItemInput" placeholder="Enter New Item Here" aria-label="" aria-describedby="basic-addon1">
<ul id="dynamic-list"></ul>
</ul>
</div>
</div>
<div class="tab-pane fade" id="scheme" role="tabpanel" aria-labelledby="scheme-tab">What?</div>
</div>
</div>
I am trying to put my card next to my navigation that is vertical, but it decides that it needs to go under. So how can I fix this solution? I've been spending hours on trying to fix this problem
Work:
<?php include 'includes/db.php'?>
<html>
<head>
<title>Admin Panel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="../bootstrap/fonts/css/font-awesome.min.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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<?php include 'includes/header.php';?>
<div class="col-lg-2">
<ul class="nav flex-column">
<li><a class="nav-link" href="#"><i class="fa fa-tachometer"></i> Dashboard</a></li>
<li><a class="nav-link" href="#new-items" data-toggle="collapse"><i class="fa fa-plus"></i> New</a>
<ul class="collapse" id="new-items">
<li class="nav-link"><a class="" href="#" style="text-decoration:none;"><i class="fa fa-pencil"></i> New Post</a></li>
<li class="nav-link"><a class="" href="#" style="text-decoration:none;"><i class="fa fa-edit"></i> New Category</a></li>
</ul>
</li>
<li><a class="nav-link" href="#"><i class="fa fa-list"></i> Posts</a></li>
<li><a class="nav-link" href="#"><i class="fa fa-tasks"></i> Categories</a></li>
<li><a class="nav-link" href="#"><i class="fa fa-comment"></i> Comments</a></li>
<li><a class="nav-link" href="#"><i class="fa fa-user"></i> Profile</a></li>
</ul>
</div>
<br/>
<div class="col-lg-8">
<div style="width:50px;height:50px;"></div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<div class="card-block">
<div class="col-xs-3 float-left"><i class="fa fa-signal" style="font-size:5em"></i></div>
<div class="col-xs-9 float-right">
<div style="font-size:2.5em">20</div>
<div style="">Posts</div>
</div>
</div>
</div>
<a href="#">
<div class="card-footer">
<div class="float-left">View Posts</div>
<div class="float-right"><i class="fa fa-arrow-circle-right"></i></div>
<div class="clearfix"></div>
</div>
</a>
</div>
<div class="card">
<div class="card-header">
<div class="card-block">
<div class="col-xs-3 float-left"><i class="fa fa-signal" style="font-size:5em"></i></div>
<div class="col-xs-9 float-right">
<div style="font-size:2.5em">20</div>
<div style="">Posts</div>
</div>
</div>
</div>
<a href="#">
<div class="card-footer">
<div class="float-left">View Posts</div>
<div class="float-right"><i class="fa fa-arrow-circle-right"></i></div>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</div>
<footer></footer>
</body>
</html>
If anyone can figure this out, it will be greatly appreciated Please also note that this is an administrator panel for a blog I am making (Custom CMS) so if you have any ideas on that as well, I will greatly appreciate it.
You could acheive this by Using css floating styles. I add a custom classes for both navigation and cards div and apply float:left property for both divs. Break(br) tag is removed. Immediate first child of card is empty, hence I made it to invisible.
Another method you can use float-left css classes for acheiving float:left css properties in both divs.
Please find the code below.
<html>
<head>
<title>Admin Panel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="../bootstrap/fonts/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<style>
.Cls_navigation,.Cls_card{float:left}
.Cls_card > div:first-child{display:none;}
</style>
</head>
<body>
<?php include 'includes/header.php';?>
<div class="col-lg-2 Cls_navigation">
<ul class="nav flex-column">
<li><a class="nav-link" href="#"><i class="fa fa-tachometer"></i> Dashboard</a></li>
<li><a class="nav-link" href="#new-items" data-toggle="collapse"><i class="fa fa-plus"></i> New</a>
<ul class="collapse" id="new-items">
<li class="nav-link"><a class="" href="#" style="text-decoration:none;"><i class="fa fa-pencil"></i> New Post</a></li>
<li class="nav-link"><a class="" href="#" style="text-decoration:none;"><i class="fa fa-edit"></i> New Category</a></li>
</ul>
</li>
<li><a class="nav-link" href="#"><i class="fa fa-list"></i> Posts</a></li>
<li><a class="nav-link" href="#"><i class="fa fa-tasks"></i> Categories</a></li>
<li><a class="nav-link" href="#"><i class="fa fa-comment"></i> Comments</a></li>
<li><a class="nav-link" href="#"><i class="fa fa-user"></i> Profile</a></li>
</ul>
</div>
<div class="col-lg-8 Cls_card">
<div style="width:50px;height:50px;"></div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<div class="card-block">
<div class="col-xs-3 float-left"><i class="fa fa-signal" style="font-size:5em"></i></div>
<div class="col-xs-9 float-right">
<div style="font-size:2.5em">20</div>
<div style="">Posts</div>
</div>
</div>
</div>
<a href="#">
<div class="card-footer">
<div class="float-left">View Posts</div>
<div class="float-right"><i class="fa fa-arrow-circle-right"></i></div>
<div class="clearfix"></div>
</div>
</a>
</div>
<div class="card">
<div class="card-header">
<div class="card-block">
<div class="col-xs-3 float-left"><i class="fa fa-signal" style="font-size:5em"></i></div>
<div class="col-xs-9 float-right">
<div style="font-size:2.5em">20</div>
<div style="">Posts</div>
</div>
</div>
</div>
<a href="#">
<div class="card-footer">
<div class="float-left">View Posts</div>
<div class="float-right"><i class="fa fa-arrow-circle-right"></i></div>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</div>
<footer></footer>
</body>