I am learning Bootstrap v5.0. I am trying to create a webpage with Bootstrap. I need a help now. I am trying to make a bottom space between two columns on small screens. For Big screen my design is as I need.
I need help on Education section of my code.
* {
/* margin: 0;
padding: 0;
box-sizing: border-box; */
font-family: 'Open Sans', sans-serif;
color: #ffffff;
}
/* ==================== Header ==================== */
header {
background: #9b59b6;
}
.header-title-box {
background: #8e44ad;
}
/* ==================== About Container ==================== */
.about-container {
background: #2ecc71;
}
/* ==================== Education Container ==================== */
.education-container {
background: #34e7e4;
}
/* ==================== Header ==================== */
/* ==================== Header ==================== */
/* ==================== Header ==================== */
/* ==================== Header ==================== */
/* ==================== Header ==================== */
<!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.0">
<link rel="shortcut icon" type="images/png" href="./images/favicon.jpg">
<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">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css">
<title>Project Finishing</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
</head>
<body>
<!-- =================================== Header =================================== -->
<header id="home">
<div class="container-fluid">
<div class="row vh-100">
<div class="col-md-9 m-auto py-4 text-white text-center header-title-box">
<p class="display-1">Dabananda Mitra</p>
<h6>Studying Computer Science and Engineering at ISTT</h6>
<h6>Dream: Software Engineer at Google, USA</h6>
</div>
</div>
</div>
</header>
<!-- =================================== Navbar Section =================================== -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navMenu" aria-expanded="false" aria-controls="navMenu" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav m-auto text-uppercase">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Packages
</li>
<li class="nav-item">
Reviews
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Education
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</div>
</nav>
<!-- =================================== About =================================== -->
<div class="about-container py-5" id="about">
<div class="container">
<div class="row align-items-center d-flex justify-content-center">
<div class="col-md-8">
<p class="display-5">Dabananda Mitra</p>
<p class="text-muted">Student | Software Engineer | YouTuber</p>
<p class="mt-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium cumque quas ex consequuntur nostrum ipsam placeat minus, nisi expedita et nihil laborum cupiditate, incidunt doloribus amet laudantium nemo dicta eaque.</p>
<p class="mt-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium cumque quas ex consequuntur nostrum ipsam placeat minus, nisi expedita et nihil laborum cupiditate, incidunt doloribus amet laudantium nemo dicta eaque.</p>
<p class="mt-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium cumque quas ex consequuntur nostrum ipsam placeat minus, nisi expedita et nihil laborum cupiditate, incidunt doloribus amet laudantium nemo dicta eaque.</p>
</div>
<div class="col-md-4">
<img class="img-fluid rounded-circle border border-light" src="./images/Dabananda_Mitra-removebg-preview.png" alt="Dabananda Mitra">
</div>
</div>
</div>
</div>
<!-- =================================== Education =================================== -->
<div class="education-container py-5" id="education">
<div class="container">
<p class="display-4 text-center">Education</p>
<hr class="mb-5" style="height: 2px; width: 50%; text-align: center; margin: auto;">
<div class="row my-5">
<div class="col-md-4 d-flex align-items-center justify-content-center m-auto" style="border-radius: 50%; background-color: #3c40c6; height: 200px; width: 200px;">
<p class="display-6">BSc</p>
</div>
<div class="col-md-8 card m-auto" style="background: #3c40c6;">
<div class="card-body">
<h5 class="card-title">Institute of Science Trade & Technology</h5>
<hr>
<h6 class="card-subtitle mb-5">2020 - 2024</h6>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem non recusandae architecto dolores atque est, quisquam minus tempora, libero soluta distinctio, natus nostrum veniam reprehenderit neque unde totam! Suscipit dolor harum vero, quas ea iusto in cumque mollitia doloremque ad ipsam ab repudiandae autem debitis soluta molestias nostrum neque corrupti!</p>
</div>
</div>
</div>
<div class="row my-5">
<div class="col-md-4 d-flex align-items-center justify-content-center m-auto" style="border-radius: 50%; background-color: #3c40c6; height: 200px; width: 200px;">
<p class="display-6">HSC</p>
</div>
<div class="col-md-8 card m-auto" style="background: #3c40c6;">
<div class="card-body">
<h5 class="card-title">Agricultural University College</h5>
<hr>
<h6 class="card-subtitle mb-5">2016 - 2018</h6>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem non recusandae architecto dolores atque est, quisquam minus tempora, libero soluta distinctio, natus nostrum veniam reprehenderit neque unde totam! Suscipit dolor harum vero, quas ea iusto in cumque mollitia doloremque ad ipsam ab repudiandae autem debitis soluta molestias nostrum neque corrupti!</p>
</div>
</div>
</div>
<div class="row my-5">
<div class="col-md-4 d-flex align-items-center justify-content-center m-auto" style="border-radius: 50%; background-color: #3c40c6; height: 200px; width: 200px;">
<p class="display-6">SSC</p>
</div>
<div class="col-md-8 card m-auto" style="background: #3c40c6;">
<div class="card-body">
<h5 class="card-title">Balijuri F.M. High School</h5>
<hr>
<h6 class="card-subtitle mb-5">2011 - 2016</h6>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem non recusandae architecto dolores atque est, quisquam minus tempora, libero soluta distinctio, natus nostrum veniam reprehenderit neque unde totam! Suscipit dolor harum vero, quas ea iusto in cumque mollitia doloremque ad ipsam ab repudiandae autem debitis soluta molestias nostrum neque corrupti!</p>
</div>
</div>
</div>
</div>
</div>
<!-- =================================== Header =================================== -->
<!-- =================================== Header =================================== -->
<!-- =================================== Header =================================== -->
<!-- =================================== Header =================================== -->
<!-- =================================== Header =================================== -->
<!-- =================================== Header =================================== -->
<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>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</body>
</html>
Here is Images:
On big screen it is ok
But on small screen I want a space here
How can I do that?
Moreover, you can use the calc function inside the style attribute such as margin-bottom:calc(20vh - 10%)
So what you want to use is mx-auto my-5
<div class="col-md-4 d-flex align-items-center justify-content-center my-5 mx-auto" style="border-radius: 50%; background-color: #3c40c6; height: 200px; width: 200px;">
<p class="display-6">BSc</p>
</div>
you just add a bootstrap class
<div class="col-md-8 card m-auto my-5" style="background: #3c40c6">
<div class="card-body">
<h5 class="card-title">Agricultural University College</h5>
<hr />
<h6 class="card-subtitle mb-5">2016 - 2018</h6>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Exercitationem non recusandae architecto dolores atque est,
quisquam minus tempora, libero soluta distinctio, natus nostrum
veniam reprehenderit neque unde totam! Suscipit dolor harum
vero, quas ea iusto in cumque mollitia doloremque ad ipsam ab
repudiandae autem debitis soluta molestias nostrum neque
corrupti!
</p>
</div>
</div>
Related
Im working on a program that consists of a webpage generated with cards. I want to make it so when you click on one of the cards a modal pops up but Im having some difficulty. The overlay part works whenever one of the cards is pressed but the modal wont appear.
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Fish</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<script defer src="script.js"></script>
<script src="https://kit.fontawesome.com/c502137733.js"></script>
</head>
<body class="bg-warning">
<div class="container-fluid">
<div class="row">
<div class="col-12 jumbotron mb-3 team-heading bg-primary">
<h1 class="text-center text-warning" style="font-family: 'Times New Roman', Times, serif;">Fish</h1>
</div>
</div>
</div>
<div class="openmodal" data-modal-target="#modal">Open Modal</div>
<div class="modal" id="modal">
<div class="modal-header">
<div class="title">Example Modal</div>
<button data-close-button class="close-button">×</button>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse quod alias ut illo doloremque eum ipsum obcaecati distinctio debitis reiciendis quae quia soluta totam doloribus quos nesciunt necessitatibus, consectetur quisquam accusamus ex, dolorum, dicta vel? Nostrum voluptatem totam, molestiae rem at ad autem dolor ex aperiam. Amet assumenda eos architecto, dolor placeat deserunt voluptatibus tenetur sint officiis perferendis atque! Voluptatem maxime eius eum dolorem dolor exercitationem quis iusto totam! Repudiandae nobis nesciunt sequi iure! Eligendi, eius libero. Ex, repellat sapiente!
</div>
</div>
<div id="overlay"></div>
<div class="container">
<div class="row">
{{ team }}
</div>
</div>
</body>
</html>`
i tried to create an accordian where click in heading a paragraph will appear and plus icon also disappear and minus icon appear.i set style.display to change between block and none and use if else to match paragraph. I take elements by classname and access element by a for loop. The idea is to change between 2 state of p (p is hide then plus icon is block and p is block plus icon is hide and minus icon is block)
var block = document.getElementsByClassName("block")
var p = document.getElementsByClassName("content")
var plus = document.getElementsByClassName("plus")
var minus = document.getElementsByClassName("minus")
for (let i = 0; i < block.length; i++) {
block[i].addEventListener('click', function () {
if (p[i].style.display == "none") {
p[i].style.display = "block"
plus[i].style.display = "none"
minus[i].style.display = "block"
}
else if (p[i].style.display == "block") {
p[i].style.display = "none"
plus[i].style.display = "block"
minus[i].style.display = "none"
}
})
}
.block {
display: block;
}
* {
font-family: "Verdana";
font-size: 15px;
}
.hide {
display: none;
}
.header:hover {
cursor: pointer;
background: grey;
}
.header {
padding: 20px;
background: #cccccc;
display: flex;
justify-content: space-between;
align-items: center;
}
<!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.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="/howto/accordion/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<title>Document</title>
</head>
<body>
<div class="block">
<div class="header">
<p class="title">Section 1</p>
<span class="plus"><i class="fa-solid fa-plus"></i></span>
<span class="hide minus"><i class="fa-solid fa-minus"></i></span>
</div>
<p class="content hide">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
perferendis qui assumenda at blanditiis dolore nesciunt modi quis alias
nihil adipisci fugiat architecto, dicta unde, molestias totam delectus
quam magni!
</p>
</div>
<!-- <div class="block">
<div class="header">
<p class="title">Section 2</p>
<i class="fa-solid fa-plus"></i>
<i class="fa-solid fa-minus"></i>
</div>
<p class="hide">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
perferendis qui assumenda at blanditiis dolore nesciunt modi quis alias
nihil adipisci fugiat architecto, dicta unde, molestias totam delectus
quam magni!
</p>
</div>
<div class="block">
<div class="header">
<p class="title">Section 3</p>
<i class="fa-solid fa-plus"></i>
<i class="fa-solid fa-minus"></i>
</div>
<p class="hide">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
perferendis qui assumenda at blanditiis dolore nesciunt modi quis alias
nihil adipisci fugiat architecto, dicta unde, molestias totam delectus
quam magni!
</p>
</div> -->
<script src="js2.js"></script>
</body>
</html>
You're checking against the element's style.display property but at no point are you actually setting those properties. style refers to the inline styles on the element, but you're adding adding a class (in this case show or hide).
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
You are on the right track though. I've updated your code below. Maybe you could improve it further by:
Making use of classList.toggle rather than adding/removing
Only toggling the container rather than each element individually
EDIT: The original question did not specify jquery. Updated.
var block = $(".block")
block.on('click', function() {
var p = $(this).children('p')
var plus = $(this).find('.plus')
var minus = $(this).find('.minus')
if (p.hasClass('hide')) {
p.removeClass('hide')
plus.addClass('hide')
minus.removeClass('hide')
} else {
p.addClass('hide')
plus.removeClass('hide')
minus.addClass('hide')
}
})
* {
font-family: sans-serif;
}
.hide {
display: none;
}
.header {
padding: 20px;
background: #cccccc;
display: flex;
justify-content: space-between;
align-items: center;
}
.block {
margin: 0 0 1rem 0
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
<div class="header">
<p class="title">Section 1</p>
<span class="plus">++</span>
<span class="hide minus">--</span>
</div>
<p class="content hide">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia perferendis qui assumenda at blanditiis dolore nesciunt modi quis alias nihil adipisci fugiat architecto, dicta unde, molestias totam delectus quam magni!
</p>
</div>
<div class="block">
<div class="header">
<p class="title">Section 2</p>
<span class="plus">++</span>
<span class="hide minus">--</span>
</div>
<p class="content hide">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia perferendis qui assumenda at blanditiis dolore nesciunt modi quis alias nihil adipisci fugiat architecto, dicta unde, molestias totam delectus quam magni!
</p>
</div>
<div class="block">
<div class="header">
<p class="title">Section 3</p>
<span class="plus">++</span>
<span class="hide minus">--</span>
</div>
<p class="content hide">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia perferendis qui assumenda at blanditiis dolore nesciunt modi quis alias nihil adipisci fugiat architecto, dicta unde, molestias totam delectus quam magni!
</p>
</div>
I would like to ask if on how to change my background when landing on a page. This is what it should like when the user tries to attempt to go on a page that needs to have an active session.
However, I want to hide the background. I want to show only the sweet alert pop up.
this is my page file.
index.php
<?php
include 'includes/connection.php';
if(!isset($_SESSION['student_id'])){
echo '<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>';
echo '<script type="text/javascript">';
echo 'setTimeout(function () {
swal({
title: "Access Failed",
text: "You are not yet logged in! Redirecting to Login...",
icon: "warning",
button: false,
timer: 2000
}).then(function(result) {
window.location = "Login.php?login=notactive";
});';
echo '}, 300);</script>';
// echo "<script>alert('You are not logged in!'); location.href='Login.php';</script>";
}
else{
$expire = 365*24*3600; // We choose a one year duration
setcookie(session_name(),session_id(),time()+$expire);
// echo "<script>alert('You are already Logged in!'); location.href='Home.php';</script>";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Repository Home</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" href="files/Images/logoapp.png">
<link rel="stylesheet" href="css/style.css">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
</head>
<body id="panel">
<!-- Navbar Header -->
<nav class="navbar fixed-top navbar-expand-sm navbar-custom">
<img src="#" class="img-responsive" width="35" height="35"> | Repo </img>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarmenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" role="button" ><i class="fa fa-bars" aria-hidden="true" style="font-size: 25px; margin: 0 auto;"></i></span>
</button>
<div id="navbarmenu" class="collapse navbar-collapse">
<ul class="navbar-nav justify-content-center" style="width: 100%">
<li class="nav-item active px-3">
<i class="fas fa-home"></i> Home
</li>
<ul class="nav navbar-nav">
<li class="nav-item dropdown px-3">
<i class="fas fa-laptop"></i> Research Repository
</li>
</ul>
<!-- <li id="irene"class="nav-item px-3">
Repository Management
</li> -->
<li id="irene"class="nav-item px-3">
</i> Request Form Management
</li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item dropdown px-3 mr-3">
<a class="nav-link text-nowrap" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user"></i> <?php include 'helper/current_user.php'; ?>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#"><i class="fas fa-user-cog"></i> Edit Profile</a>
<a class="dropdown-item" href="#"><i class="fas fa-user-lock"></i> Edit Password</a>
<a class="dropdown-item" href="logout_student.php"><i class="fas fa-sign-out-alt"></i> Logout</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-sm" style="padding-top: 100px;">
<div class="container-sm text-center">
<div class="col-sm">
<span id="HeaderBanner"> EMPOWERING WHAT'S NEXT </span>
</div>
</div>
<div class="container-fluid" style="height: auto;width: 100%;">
<div class="row">
<div id="IntroductionParagraph" class="col-sm" style="margin-top: 50px;">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia at aspernatur veniam odit autem, earum explicabo maxime facilis molestiae hic quidem. Laboriosam dolores accusantium consequuntur, odio nulla in deserunt necessitatibus?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum ducimus laudantium labore corporis voluptatem distinctio est praesentium ex. Sed est excepturi quidem labore blanditiis error voluptatibus facilis ipsum nemo consequatur?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo culpa, totam alias voluptatum aperiam libero ipsa voluptatem perspiciatis. Quas doloremque dolore reiciendis tenetur accusantium ullam corporis adipisci natus officiis non?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum, repudiandae sint consectetur eius nostrum exercitationem quidem magnam ratione obcaecati maiores iure voluptatum laudantium minus nulla illo. Perferendis eligendi nam aspernatur.
</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime eius facere vitae corrupti adipisci, inventore minima laudantium quibusdam ad quas natus consequatur laborum qui dolor assumenda id nostrum sed ea.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam aperiam enim quod quae minus et perferendis magni eius, quibusdam est consequatur ab facilis nihil odit atque doloribus nesciunt ipsum. Maxime.
</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime eius facere vitae corrupti adipisci, inventore minima laudantium quibusdam ad quas natus consequatur laborum qui dolor assumenda id nostrum sed ea.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam aperiam enim quod quae minus et perferendis magni eius, quibusdam est consequatur ab facilis nihil odit atque doloribus nesciunt ipsum. Maxime.
</p>
</div>
<div class="col-sm">
<img src="https://i.ibb.co/mbPvK7Q/women-inoff.png" class="img-responsive" style="width: 100%; height: auto;">
</div>
</div>
</div>
</div>
<!-- #START# -----------ADDING OF MODAL ------------------# -->
<!-- Large modal -->
<script type="text/javascript" src="./js/responsive_modal.js">
</script>
<!-- #END# -------------ADDING OF MODAL ------------------# -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</body>
</html>
Thank you so much.
You have to add the following CSS
<style type="text/css">
.swal-overlay {
background-color: rgba(0,0,0, 1);
}
</style>
Also, set the following options to prevent closing the modal on click or Esc key press.
swal({
closeOnClickOutside: false,
closeOnEsc: false,
title: "Access Failed",
.... rest of your code
Without the options closeOnClickOutside: false and closeOnEsc: false, The page will be visible again if the user clicks outside the modal window (Sweet Alert) or press the Esc key.
By the way, I'd recommend using a PHP code checking for the active session (whether logged in or not) and redirect the user, rather than using the Javascript). Anyone with javascript disabled on their browser still can view the page content.
Change the .swal-overlay class background-color property value
from
background-color: rgba(0,0,0,.4);
to background-color: rgba(0,0,0,1);
.swal-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
font-size: 0;
overflow-y: auto;
background-color: rgba(0,0,0,1);
z-index: 10000;
pointer-events: none;
opacity: 0;
transition: opacity .3s;
}
background color should be set while initializing the sweetalert
$(".swal-overlay").css({"background-color":rgba(0, 0, 0, 1);});
https://stackoverflow.com/a/52143162/1351883
I have a lot of trouble with my slider arrows as I am following along with a tutorial on youtube. Instead of going next to the picture and testimonial, it goes on the top. It didn't happen this way at first, but then I had a problem with glider.js, so I rewrote the code, and then the flaw appeared
HTML Code
<section class="testimonials-section">
<div class="wrapper">
<h2>Testimonials</h2>
<div class="testimonials container">
<div class="testimonials">
<div class="testimonial">
<div class="slide-container">
<div class="content">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga.
Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a.
Quidem, deleniti provident.
</p>
<div class="name">
<strong>Darlene Richards,</strong> Amazon
</div>
</div>
<img src="images/testimonial1.png" alt="">
</div>
</div>
<div class="testimonial">
<div class="slide-container">
<div class="content">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga.
Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a.
Quidem, deleniti provident.
</p>
<div class="name">
<strong>Peter Williams,</strong> Louis Vuitton
</div>
</div>
<img src="images/testimonial3.png" alt="">
</div>
</div>
<div class="testimonial">
<div class="slide-container">
<div class="content">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga.
Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a.
Quidem, deleniti provident.
</p>
<div class="name">
<strong>Tara Green,</strong> Ferrari
</div>
</div>
<img src="images/testimonial2.png" alt="">
</div>
</div>
</div>
<span class="slider-prev">
<img src="images/left-arrow.svg" alt="">
</span>
<span class="slider-next">
<img src="images/right-arrow.svg" alt="">
</span>
</div>
</div>
</section>
CSS Code
.slider-prev,
.slider-next {
position: absolute;
top: 68px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.06);
border-radius: 50%;
cursor: pointer;
}
.slider-next {
right: 0;
}
This is because of how the css position property works more info
Try add this line and see if it helps:
edit use .testimonials.container selector not .testimonials
.testimonials.container {
position: relative;
}
I am having some difficulty implementing togglable tabs with bootstrap, I have triple checked the documentation and various working demos around and can't still get it to work
I am actually using Material Design for Bootstrap to implement it but it shouldn't affect the code from what I've looked
$('#toggle-tabs a').click(function(e) {
e.preventDefault()
$(this).tab('show')
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" id="toggle-tabs">
<div class="row">
<div class="col-md-2 scrollbarlook" id="categorias">
<ul class="nav nav-tabs md-pills pills-secondary" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#test1" role="tab"><br> test1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#test2" role="tab"><br> test2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#test3" role="tab"><br> test3</a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Tab panels -->
<div class="tab-content vertical">
<!--Panel 1-->
<div class="tab-pane fade in show active" id="test1" role="tabpanel">
<br>
<p>Teste 1</p>
</div>
<!--/.Panel 1-->
<!--Panel 2-->
<div class="tab-pane fade in" id="test2" role="tabpanel">
<br>
<p>Teste 2. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!--/.Panel 2-->
<!--Panel 3-->
<div class="tab-pane fade in" id="test3" role="tabpanel">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!--/.Panel 3-->
</div>
</div>
</div>
</div>
Change jquery file order
$('#toggle-tabs a').click(function(e) {
e.preventDefault()
$(this).tab('show')
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js"></script>
<div class="container-fluid" id="toggle-tabs">
<div class="row">
<div class="col-md-2 scrollbarlook" id="categorias">
<ul class="nav nav-tabs md-pills pills-secondary" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#test1" role="tab"><br> test1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#test2" role="tab"><br> test2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#test3" role="tab"><br> test3</a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Tab panels -->
<div class="tab-content vertical">
<!--Panel 1-->
<div class="tab-pane fade in show active" id="test1" role="tabpanel">
<br>
<p>Teste 1</p>
</div>
<!--/.Panel 1-->
<!--Panel 2-->
<div class="tab-pane fade in" id="test2" role="tabpanel">
<br>
<p>Teste 2. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!--/.Panel 2-->
<!--Panel 3-->
<div class="tab-pane fade in" id="test3" role="tabpanel">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!--/.Panel 3-->
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid" id="toggle-tabs">
<div class="row">
<div class="col-md-2 scrollbarlook" id="categorias">
<ul class="nav nav-tabs md-pills pills-secondary" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#test1" role="tab"><br> test1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#test2" role="tab"><br> test2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#test3" role="tab"><br> test3</a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Tab panels -->
<div class="tab-content vertical">
<!--Panel 1-->
<div class="tab-pane fade in show active" id="test1" role="tabpanel">
<br>
<p>Teste 1</p>
</div>
<!--/.Panel 1-->
<!--Panel 2-->
<div class="tab-pane fade in" id="test2" role="tabpanel">
<br>
<p>Teste 2. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!--/.Panel 2-->
<!--Panel 3-->
<div class="tab-pane fade in" id="test3" role="tabpanel">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!--/.Panel 3-->
</div>
</div>
</div>
</div>
You need to close ) at the end of your script.
Also, it will be much better if you can make it more specific like,
$('#toggle-tabs li a').click(function(e) {