I have one media query that kicks in without the width specified as a condition being met, even at 375px the media query takes over from the base CSS. The media query should take over from 660px. Here is my index.html page:
<!DOCTYPE html>
<html>
<head>
<title>Thames Accountants</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header-bg">
<header>
<button id="toggleButton" class="c-hamburger c-hamburger--rot">
<span>toggle menu</span>
</button>
<h1 class="logo">Thames Accountants</h1>
</header>
<p class="clear"></p>
<div class="ta-menu">
<nav>
<ul>
<li>Our Services</li>
<li>About Us</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
</div> <!-- end ta-menu div -->
<div class="intro">
<p>Personalised Accounting</p>
<button type="button" class="btn btn-info ta-button">Get In Touch</button>
<div><span class="glyphicon glyphicon-chevron-down ta-icon"></span></div>
</div>
</div> <!-- end header-bg div -->
<div class="container">
<a name="services"></a>
<div id="services" class="services">
<h2 class="services-title">Accountancy Services</h2>
<p class="bullet-points">Annual Accounts <span class="glyphicon glyphicon-ok"></span></p>
<p class="bullet-points">Book-Keeping <span class="glyphicon glyphicon-ok"></p>
<p class="bullet-points">Company Secretarial <span class="glyphicon glyphicon-ok"></p>
<p class="bullet-points">Management Accounts <span class="glyphicon glyphicon-ok"></p>
</div>
<div class="services">
<h2 class="services-title">Added Value Services</h2>
<p class="bullet-points">Business Valuations <span class="glyphicon glyphicon-ok"></span></p>
<p class="bullet-points">Business Plans <span class="glyphicon glyphicon-ok"></p>
<p class="bullet-points">Management Systems <span class="glyphicon glyphicon-ok"></p>
<p class="bullet-points">Strategic Planning <span class="glyphicon glyphicon-ok"></p>
</div>
<div class="services">
<h2 class="services-title">Start-up Services</h2>
<p class="bullet-points">Ready made company <span class="glyphicon glyphicon-ok"></span></p>
<p class="bullet-points">Limited Liability Partnership <span class="glyphicon glyphicon-ok"></p>
<p class="bullet-points">PLC formation <span class="glyphicon glyphicon-ok"></p>
</div>
<div class="services">
<h2 class="services-title">Taxation Services</h2>
<p class="bullet-points">Contractors and IR35 <span class="glyphicon glyphicon-ok"></span></p>
<p class="bullet-points">Payroll, PAYE Returns and RTI <span class="glyphicon glyphicon-ok"></p>
<p class="bullet-points">VAT <span class="glyphicon glyphicon-ok"></p>
</div> <!-- end services div -->
</div> <!-- end container div -->
<div class="testimonials">
<h1 class="testimonial-title">Testimonials</h1>
<div class="ta-container">
<blockquote><p class="ta-review">Thames Accountants changes lives. Thanks for NOT being another overpaid below average bookkeeper but a true personalised accounting department for our company. - S. Johnson</p></blockquote>
<blockquote><p class="ta-review">Thames Accountants changes lives. Thanks for NOT being another overpaid below average bookkeeper but a true personalised accounting department for our company. - S. Johnson</p></blockquote>
<blockquote><p class="ta-review">Thames Accountants changes lives. Thanks for NOT being another overpaid below average bookkeeper but a true personalised accounting department for our company. - S. Johnson</p></blockquote>
</div>
</div>
<footer>
<div class="row ta-row">
<div class="col-md-4 ta-about">
<h4>About TA</h4>
<p>We are an experienced accounting agency based in South East, London, UK. We work closely with our clients and act for a broad range of business and personal clients.</p>
</div>
<div class="col-md-4 ta-social">
<h4>Social</h4>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-linkedin"></i>
</div>
<div class="col-md-4 ta-pages">
<h4>Menu</h4>
<ul>
<li>Our Services</li>
<li>About Us</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</div>
</div> <!-- end row div -->
<div class="row ta-policies">
<div class="ta-center">
<div class="col-md-12">
<ul>
<li>Privacy Policy</li>
<li>Site terms</li>
</ul>
</div>
</div>
</div>
</footer>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
And this is my CSS media query
Media queries for wider screens
**********************************/
#media (min-width: 660px) {
/*Parallax image for home page*/
.header-bg {
background: radial-gradient(#252625, transparent 150%), url('./img/tower-bridge.jpg');
background-attachment: fixed;
background-size: cover;
background-position: center center;
height: 600px;
width: 100%;
}
.logo {
font-size: 2em;
margin: 3% 0 0 5%;
text-align: left;
}
.intro p {
font-size: 1.5em;
margin-top: 10%;
}
.ta-button {
font-size: 0.6em;
padding: 5px;
border-radius: 5px;
}
.services-title {
font-size: 1.5em;
}
.ta-menu {
font-size: 1.5em;
}
.testimonial-title {
font-size: 1.75em;
}
blockquote {
font-size: 1.2em;
border-left: 3px solid #fff;
}
.services p {
font-size: 1em;
}
.ta-icon {
margin-top: 0;
}
.c-hamburger {
display: none;
}
.intro p {
margin-top: 0;
font-size: 1.2em;
border: none;
}
}/*End media query # 460 px*/
Related
Below is the HTML and the CSS (used Bootstrap 5) for my home page layout. I have trouble filling the remaining space with the carousel and making the "Welcome" text along with the paragraph sit on top of the carousel.
If I give the carousel "vh-100" it will fill the rest of the space. But it would then push the footer out of the screen putting a vertical scroll bar. My aim is to show everything in the same view without adding a vertical scroll bar.
Hope somebody can help me what I'm trying to achieve.
#font-face {
font-family: "seaford";
src: url(../fonts/SeafordRg.ttf);
}
html {
position: relative;
min-height: 100%;
font-size: 14px;
font-family: seaford, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}
body {
margin-bottom: 60px;
font-family: seaford, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
}
/*css - for custom elements*/
.bg-join-newsletter {
background-color: #cbcbcb !important;
}
.carousel-item {
width: 100vw;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
opacity: 0.4 !important;
}
.item-1 {
background: url(../images/img1.jpg) no-repeat center center fixed;
}
.item-2 {
background: url(../images/img2.jpg) no-repeat center center fixed;
}
.item-3 {
background: url(../images/img3.jpg) no-repeat center center fixed;
}
/* media rules */
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - GCT.Web</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-dark border-bottom box-shadow">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">GCT.Web</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid carousel slide carousel-fade p-0 m-0 d-flex align-items-stretch" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner m-0 p-0">
<div class="carousel-item active item-1 h-100">
<div class="carousel-caption">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item item-2 h-100">
<div class="carousel-caption">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item item-3 h-100">
<div class="carousel-caption">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<main role="main" class="pb-3">
#RenderBody()
</main>
<footer class="border-top footer text-muted bg-dark">
<div class="container-fluid bg-join-newsletter">
<div class="container d-flex justify-content-center">
<form class="row align-items-center w-75">
<div class="col-auto text-black">
<label>Join our news letter</label>
</div>
<div class="col-4">
<label class="visually-hidden" for="subscribeEmail">Username</label>
<div class="input-group">
<input id="subscribeEmail" type="email" class="form-control" placeholder="Enter your email address" aria-label="Enter your email address" aria-describedby="basic-addon2">
</div>
</div>
<div class="col-auto">
<label class="visually-hidden" for="subscribeName">Name</label>
<input type="text" class="form-control" id="subscribeName" placeholder="Enter your name">
</div>
<div class="col-auto">
<button type="submit" class="btn btn-success">Subscribe</button>
</div>
</form>
</div>
</div>
<div class="container">
© 2022 - GCT.Web - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
I only can see the tab which is I made active by default. But when I click on other tabs, I can't see anything. They just won't open. What's my mistake here? Need your help.
I tried to find the solution on bootstrap documentation, but I didnt come across with something like this.
By the way I am just learning bootstrap. But it's like I am just copying and pasting, is this wrong? How should I learn this? It seems a bit harder than just css. Cause there are many classes that are written by default.. I don't want to memorize. So is it good that I copy and paste when I need?
body .container-fluid {
padding: 0; /* the left and right side of body was a bit empty. When i did margin:0 padding:0 for the body it didn't work, but on google developer tools I saw that container-fluid had padding right, and left. So making them 0.*/
}
body {
text-align: center;
}
.title-image {
width:100%;
}
.download-button {
margin: 15px 13px;
}
.big-heading {
font-family: "Montserrat", "sans-serif";
font-weight: bold;
font-size: 2.2rem;
line-height:1.5;
margin-top: 70px;
}
.first_part {
color: white;
background-color: #F27E48;
text-align: left;
}
.container-fluid {
padding: 3% 3% 6% 5% !important;
}
.navbar-brand {
font-family: 'Ubuntu', sans-serif;
}
#courses {
padding:50px 100px 50px;
background-color: azure;
}
#courses>p{ /*only for child p of courses id, not grandchild etc */
width:60%;
margin: 18px auto 24px;
}
.card-body p{
text-align: left;
}
#how {
padding:50px 70px 50px;
background-color: rgb(243, 243, 178);
}
#how img {
height:280px;
width:330px;
}
.row div {
margin-top:10px;
}
.outcome {
width:70%;
margin:20px auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Science Course Web Page</title>
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Noto+Serif&family=Ubuntu&display=swap" rel="stylesheet">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body>
<section class="first_part" >
<div class="container-fluid">
<!--all of element appeared when i wrote navbar-expand-lg-->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">
<i class="fab fa-python"> Python Bootcamp</i>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#courses">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#how">How We Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#outcomes">Outcomes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6"> <!-- so it will fill 50% of width on screen of laptops, and bigger screens-->
<h1 class="big-heading">Download the best Python bootcamp on your device, and start to study now.</h1>
<button type="button" class="btn btn-lg btn-outline-danger download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-lg btn-light btn-outline-primary download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="image.jpg" alt="classroom-image">
</div>
</div>
</div>
</section>
<!-- Courses -->
<section id="courses">
<h2>Our Course Options</h2>
<p>All of our programs provide job guarantee. No matter where you live, and what nationality you are. Our proven system works all around the world.</p>
<div class="row">
<!-- for laptops and bigger screens one row takes 33.3% of total width, for small screens it takes 50% -->
<div class="col-lg-4 col-sm-6">
<div class="card">
<div class="card-header">
<h3>Online Program</h3>
</div>
<div class="card-body">
<h4>100$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>5 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>Must be finished in 6 months</p>
<button class="btn btn-lg btn-outline-dark col-12">Sign Up</button>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="card">
<div class="card-header">
<h3>Full Time Program</h3>
</div>
<div class="card-body">
<h4>250$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>20 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>2 months</p>
<button class="btn btn-lg btn-outline-secondary col-12">Sign Up</button>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header">
<h3>Part Time Program</h3>
</div>
<div class="card-body">
<h4>175$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>10 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>4 months</p>
<button class="btn btn-lg btn-outline-dark col-12">Sign Up</button>
</div>
</div>
</div>
</div>
</section>
<!-- How we work -->
<section id="how">
<h2>How We Work</h2>
<div class="row">
<div class="col-lg-4 col-sm-6">
<p>One-on-one mentorship and guidance.</p>
<img src="coding.jpg" alt="coding-image">
</div>
<div class="col-lg-4 col-sm-6">
<p>Study schedules that fit with your life.</p>
<img src="clock.jpg" alt="coding-image">
</div>
<div class="col-lg-4">
<p>In-person meetups, workshops.</p>
<img src="meetup.jpg" alt="meetup-image">
</div>
</div>
</section>
<!-- Outcomes -->
<section id="outcomes">
<div class="outcome">
<!-- Tabs navs -->
<ul class="nav nav-tabs nav-justified" id="ex1" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="ex3-tab-1" data-mdb-toggle="tab" href="#ex3-tabs-1" role="tab" aria-controls="ex3-tabs-1" aria-selected="true">Full Time Program</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="ex3-tab-2" data-mdb-toggle="tab" href="#ex3-tabs-2" role="tab" aria-controls="ex3-tabs-2" aria-selected="false">Part Time Program</a>
</li>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="ex3-tab-3" data-mdb-toggle="tab" href="#ex3-tabs-3" role="tab" aria-controls="ex3-tabs-3" aria-selected="false">Online Program</a>
</li>
</ul>
<!-- Tabs Content-->
<div class="tab-content" id="ex2-content">
<div
class="tab-pane fade show active"
id="ex3-tabs-1"
role="tabpanel"
aria-labelledby="ex3-tab-1"
>
<p>$70,000</p>
<p>Median pay rate graduates reported earning.</p>
<p>80%</p>
<p>Employed in-field within 90 days of graduation.</p>
</div>
<div
class="tab-pane fade"
id="ex3-tabs-2"
role="tabpanel"
aria-labelledby="ex3-tab-2"
>
<p>$60,000</p>
<p>Median pay rate graduates reported earning.</p>
<p>75%</p>
<p>Employed in-field within 110 days of graduation.</p>
</div>
<div
class="tab-pane fade"
id="ex3-tabs-3"
role="tabpanel"
aria-labelledby="ex3-tab-3"
>
<p>$40,000</p>
<p>Median pay rate graduates reported earning.</p>
<p>65%</p>
<p>Employed in-field within 150 days of graduation.</p>
</div>
</div>
</div>
</section>
</body>
</html>
Example in Bootstrap5 docs says to use: data-bs-toggle, you have data-mdb-toggle. That should fix it for all your nav-links.
<a class="nav-link active" id="ex3-tab-1" data-bs-toggle="tab" href="#ex3-tabs-1" role="tab" aria-controls="ex3-tabs-1" aria-selected="true">Full Time Program</a>
https://getbootstrap.com/docs/5.0/components/navs-tabs/#base-nav
You have not added the javascript to do so.
Add this javascript to your code.
var triggerTabList = [].slice.call(document.querySelectorAll("#ex1 li a"));
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl);
triggerEl.addEventListener("click", function (event) {
event.preventDefault();
tabTrigger.show();
});
});
Documentation: https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior
Codepen: https://codepen.io/manaskhandelwal1/pen/eYdLYdN
The script tag for bootstrap javascript should be added after the body tag and not in the head tag, sometimes this will also create problems.
And you don't have to learn any bootstrap classes, gradually you will learn them automatically.
If you want any other help comment it here I will help you as soon as possible 😃.
Everything is going great, but I don't see this right and left arrors in my slide show. What should I do to fix it? I did the exactly what is in bootstrap documentation. I tried to look at on google, but couldn't find anything related to this issue. I need your help with this issue, please.
(it still doesnt upload my post, so filling the blanks)
body .container-fluid {
padding: 0; /* the left and right side of body was a bit empty. When i did margin:0 padding:0 for the body it didn't work, but on google developer tools I saw that container-fluid had padding right, and left. So making them 0.*/
}
body {
text-align: center;
}
.title-image {
width:100%;
}
.download-button {
margin: 15px 13px;
}
.big-heading {
font-family: "Montserrat", "sans-serif";
font-weight: bold;
font-size: 2.2rem;
line-height:1.5;
margin-top: 70px;
}
.first_part {
color: white;
background-color: #F27E48;
text-align: left;
}
.container-fluid {
padding: 3% 3% 6% 5% !important;
}
.navbar-brand {
font-family: 'Ubuntu', sans-serif;
}
#courses {
padding:50px 100px 50px;
background-color: azure;
}
#courses>p{ /*only for child p of courses id, not grandchild etc */
width:60%;
margin: 18px auto 24px;
}
.card-body p{
text-align: left;
}
#how {
padding:50px 70px 50px;
background-color: rgb(243, 243, 178);
}
#how img {
height:280px;
width:330px;
}
.row div {
margin-top:10px;
}
.outcome {
width:70%;
margin:20px auto;
background-color: rgb(236, 223, 223) ;
border-radius: 8px;
}
.big {
font-weight: bold;
font-size: 2rem;
font-family: 'Noto Serif', serif;
}
#outcomes {
padding:50px 70px 50px;
}
#outcomes a{
border:1px solid black;
border-radius: 10px;
}
#outcomes a:hover {
color: white;
background-color: gray;
}
.student-image {
height: 350px;
width: 450px;
}
#comments {
padding: 50px 70px 50px;
background-color: azure;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Science Course Web Page</title>
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Noto+Serif&family=Ubuntu&display=swap" rel="stylesheet">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body>
<section class="first_part" >
<div class="container-fluid">
<!--all of element appeared when i wrote navbar-expand-lg-->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">
<i class="fab fa-python"> Python Bootcamp</i>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#courses">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#how">How We Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#outcomes">Outcomes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#comments">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6"> <!-- so it will fill 50% of width on screen of laptops, and bigger screens-->
<h1 class="big-heading">Download the best Python bootcamp on your device, and start to study now.</h1>
<button type="button" class="btn btn-lg btn-outline-danger download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-lg btn-light btn-outline-primary download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="image.jpg" alt="classroom-image">
</div>
</div>
</div>
</section>
<!-- Courses -->
<section id="courses">
<h2>Our Course Options</h2>
<p>All of our programs provide job guarantee. No matter where you live, and what nationality you are. Our proven system works all around the world.</p>
<div class="row">
<!-- for laptops and bigger screens one row takes 33.3% of total width, for small screens it takes 50% -->
<div class="col-lg-4 col-sm-6">
<div class="card">
<div class="card-header">
<h3>Online Program</h3>
</div>
<div class="card-body">
<h4>400$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>5 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>6 months</p>
<button class="btn btn-lg btn-outline-dark col-12">Sign Up</button>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="card">
<div class="card-header">
<h3>Full Time Program</h3>
</div>
<div class="card-body">
<h4>1300$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>20 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>2 months</p>
<button class="btn btn-lg btn-outline-secondary col-12">Sign Up</button>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header">
<h3>Part Time Program</h3>
</div>
<div class="card-body">
<h4>700$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>10 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>4 months</p>
<button class="btn btn-lg btn-outline-dark col-12">Sign Up</button>
</div>
</div>
</div>
</div>
</section>
<!-- How we work -->
<section id="how">
<h2>How We Work</h2>
<div class="row">
<div class="col-lg-4 col-sm-6">
<p>One-on-one mentorship and guidance.</p>
<img src="coding.jpg" alt="coding-image">
</div>
<div class="col-lg-4 col-sm-6">
<p>Study schedules that fit with your life.</p>
<img src="clock.jpg" alt="coding-image">
</div>
<div class="col-lg-4">
<p>In-person meetups, workshops.</p>
<img src="meetup.jpg" alt="meetup-image">
</div>
</div>
</section>
<!-- Outcomes -->
<section id="outcomes">
<div class="outcome">
<!-- Tabs navs -->
<ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="fulltime-tab" data-bs-toggle="tab" href="#fulltime" role="tab" aria-controls="fulltime" aria-selected="true">Full Time Program</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="parttime-tab" data-bs-toggle="tab" href="#parttime" role="tab" aria-controls="parttime" aria-selected="false">Part Time Program</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="online-tab" data-bs-toggle="tab" href="#online" role="tab" aria-controls="online" aria-selected="false">Online Program</a>
</li>
</ul>
<!-- Tabs Content-->
<div class="tab-content" id="myTab-content">
<div
class="tab-pane fade show active"
id="fulltime"
role="tabpanel"
aria-labelledby="fulltime-tab"
>
<p class="big">$70,000</p>
<p class="small">Median pay rate graduates reported earning.</p>
<p class="big">80%</p>
<p class="small">Employed in-field within 90 days of graduation.</p>
</div>
<div
class="tab-pane fade"
id="parttime"
role="tabpanel"
aria-labelledby="parttime-tab"
>
<p class="big">$60,000</p>
<p class="small">Median pay rate graduates reported earning.</p>
<p class="big">75%</p>
<p class="small">Employed in-field within 110 days of graduation.</p>
</div>
<div
class="tab-pane fade"
id="online"
role="tabpanel"
aria-labelledby="online-tab"
>
<p class="big">$40,000</p>
<p class="small">Median pay rate graduates reported earning.</p>
<p class="big">65%</p>
<p class="small">Employed in-field within 150 days of graduation.</p>
</div>
</div>
</div>
</section>
<!-- Comments -->
<section id="comments">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<p>I took the fulltime program course. It was amazing. Up to date curriculum, and the best instructors in their field</p>
<img src="student1.jpg" class="student-image" alt="student-photo">
<em>Selena, Miami</em>
</div>
<div class="carousel-item">
<p>I took the part time program course, and I got full stack python developer job only in 20 days within graduation.</p>
<img src="student2.jpg" class="student-image" alt="student-photo">
<em>Anna, Moscow</em>
</div>
<div class="carousel-item">
<p>This course made me job ready. Don't waste time with other time wasting courses. This is what you have been looking for!</p>
<img src="student3.jpg" class="student-image" alt="student-photo">
<em>Taylor, Paris</em>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</section>
</body>
</html>
Background colour and button colour are white.
Either add a background color, like this:
#comments {
background-color: #ff0000;
}
Codepen: https://codepen.io/manaskhandelwal1/pen/yLaxyyV
or change the colour of the buttons, like this:
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}
For more info: https://stackoverflow.com/a/49017805/11171286
Codepen: https://codepen.io/manaskhandelwal1/pen/qBaMEdK
I have commented out the bug(with #characters) in the navigation part of the code where I am getting the issue. Try removing the .navbar-brand as mentioned in the comment and you will get to see.
I'm curious to know that what's happening under the hood when navbar-brand is assigned to its(element with .nav-tabs) adjacent element which conflicting with it
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="author" content="NeelDUnstoppable" />
<meta name="description" content="A rough template for html page created just for enhancing and getting a precise grip over the rules" />
<title>html template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<div class="nav" role="navigation">
<!-- ######## Remove the .navbar-brand class from the below <a> element and the .nav-tabs class in <ul> element works completely fine ######### -->
Blasting off with bootstrap
<ul class="nav nav-tabs">
<li role="presentation" class="active">Tickets</li>
<li role="presentation">Stations</li>
<li role="presentation">About</li>
</ul>
</div>
<div class="container">
<div class="row well well-lg">
<div class="col-md-6">
<h2>The Fastest way to space</h2>
<p class="lead">Make your way to space in the comfort of your own rocket, elevator or transporter.</p>
<button type="button" class="btn btn-lg btn-default">Take the Tour</button>
<button type="button" class="btn btn-lg btn-primary">Book Tickets Now</button>
</div>
<div class="col-md-6 hidden-sm hidden-xs">
<img src="images/img-header.jpg" alt="Blasting off" title="Blasting off image"/>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row text-center features">
<div class="col-sm-4 col-xs-10 col-xs-offset-1 col-sm-offset-0">
<i class="glyphicon glyphicon-briefcase"></i>
<h3>Book Today</h3>
<p>Even if you're traveling tomorrow, you can still get tickets today. We have a number of conveniently located ports around teh globe to service everyone</p>
</div>
<div class="col-sm-4 col-xs-6">
<i class="glyphicon glyphicon-random"></i>
<h3>Go Anywhere</h3>
<p>If you need to get to space today, why not try out a transporter? Despite the claims, there are have been no deaths in the last 6weeks!</p>
</div>
<div class="col-sm-4 col-xs-6">
<i class="glyphicon glyphicon-send"></i>
<h3>RocketBus®</h3>
<p>For cheapest fares, catch the next RocketBus® to the stars. Cheaper on you wallet, and easiest way to make friends</p>
</div>
</div>
</div>
<div class='footer'>
<div class='container'>
<div class='row'>
<div class='col-sm-4 col-md-3 col-xs-6'>
<h4>Who We Are</h4>
<p><i>Blasting Off With Bootstrap</i> is the fastest way to space. <a href='#'>Book your ticket today</a>!</p>
<p><a href='#'>More About Us <i class='glyphicon glyphicon-arrow-right'></i></a></p>
</div>
<div class='col-sm-2 col-xs-6 col-md-offset-1'>
<h4>Links</h4>
<ul class='list-unstyled'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Tickets</a></li>
<li><a href='#'>Stations</a></li>
</ul>
</div>
<div class='clearfix visible-xs'></div>
<div class='col-sm-2 col-xs-6'>
<h4>Stay in Touch</h4>
<ul class='list-unstyled'>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Facebook</a></li>
</ul>
</div>
<div class='col-sm-4 col-md-3 col-md-offset-1 col-xs-6'>
<h4>Contact Us</h4>
<ul class='list-unstyled'>
<li><i class='glyphicon glyphicon-globe'></i> Orlando, FL<li>
<li><i class='glyphicon glyphicon-phone'></i> 1-555-blast-off<li>
<li><i class='glyphicon glyphicon-envelope'></i> <a href='mailto:#'>blastingoff#codeschool.com</a><li>
</ul>
<p>Blasting Off With Bootstrap ©2214.</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</body>
</html>
The related .css file:
.features .glyphicon {
font-size: 32px;
}
.row {
margin-bottom: 20px;
}
.quote {
background-color: #444;
color: #e1e1e1;
}
.quote blockquote {
border: none;
margin: 0;
}
.quote footer {
color: #c1c1c1;
}
section, header {
background-color: #fff;
}
body {
}
.footer {
padding: 20px 0;
}
/*
#demo-nav {
display: none;
}
.show-nav #demo-nav {
display: block;
}
*/
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 200px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 200px;
}
.footer {
color: #efefef;
background-color: #333;
}
.footer a {
color: #9af7fe;
}
#media only screen and (max-width: 768px) {
body { margin-bottom: 400px; }
.footer { height: 400px; }
}
Im working on this html5 , using css, and my website works fine on chrome and firefox, but not in IE 10. Nothing written on css file applies on IE.
My website still remains locally and unfinished,but its driving me crazy as i tried so many answers to fix IE like html5shiv, and so on...
I checked on the validator also, and i only get errors of not recognized bootstrap attributes.
i would love if someone can get a look on my code
body {
background-color: #D1E0B2;
}
header,
section,
footer,
aside,
nav,
main,
article,
figure {
display: block;
}
.fotos {
max-width: 100%;
height: auto;
}
.carousel-inner > .item > img {
max-width: 100%;
height: 360px;
margin: 0 auto;
}
.tres-colunas {
display: block;
width: 360px;
height: 170px;
vertical-align: middle;
border-bottom: 1px dashed #929493;
border-top: 1px dashed #929493;
margin: 10px;
padding-top: 8px;
float: left;
}
h3 {
font-size: 1.6em;
margin-top: 0;
}
.button-home {
float: right;
background-color: #A2BF4D;
border-radius: 6px;
color: #fff;
font-family: 'Arial';
font-size: 18px;
text-decoration: none;
cursor: pointer;
border: 1px solid #C2E066;
}
.button-home:hover {
float: right;
background-color: #9BB352;
border-radius: 6px;
color: #fff;
font-family: 'Arial';
font-size: 18px;
text-decoration: none;
cursor: pointer;
border: 1px solid #C2E066;
}
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="pt" />
<meta name="description" content=' - ' />
<meta name="keywords" content=', ' />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<title>Yeshiva Or Israel College</title>
<script>
document.createElement("myHero")
</script>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="shortcut icon" href="logo.png" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="myStyle.css" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<a>
<img src="tres_rgb.jpg" alt="Logo Da Yeshiva" width="1130" height="145" />
</a>
<ul class="nav nav-tabs">
<li class="active">Home
</li>
<li>Nossa filosofia
</li>
<li>Os Rabinos
</li>
<li>Campus
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Arquivos
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Videos
</li>
<li>Fotos
</li>
<li>Textos
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Links Associados
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Camp Hashivenu
</li>
<li>Site Rav Karaguilla
</li>
<li>Canal do Rav Passy
</li>
</ul>
</li>
<li>Faça Parte
</li>
<li>Contato
</li>
</ul>
<p> <b> Yeshivá Or Israel College. </b><i> Educando com amor.</i>
</p>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="carrosel_danca.jpg" alt="Dança dos Bachurim" />
<div class="carousel-caption">
<h3>União</h3>
<p>Alunos da Yeshivá dançando no páteo.</p>
</div>
</div>
<div class="item">
<img src="carrosel_shabat.jpg" alt="Um Shabat Especial" />
<div class="carousel-caption">
<h3>Um Shabat Especial</h3>
<p>A experiencia de Shabatot na Yeshivá eh algo especial.</p>
</div>
</div>
<div class="item">
<img src="carrosel_havdala_rs.jpg" alt="Havdala" />
<div class="carousel-caption">
<h3>Alegria no Judaismo</h3>
<p>Momentos especiais e inesqueciveis</p>
</div>
</div>
<div class="item">
<img src="carrosel_estudo_fora.JPG" alt="Estudo ao ar livre" />
<div class="carousel-caption">
<h3>Estudo da Torá</h3>
<p>Estudo da Torá em alto nivel.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="tres-colunas">
<div class="col-sm-3 col-md-6 col-lg-4">
<img src="revista.png" alt="Revista Chai Or Israel" width="100" height="150" />
</div>
<div class="col-sm-9 col-md-6 col-lg-8">
<h3> Revista Chai </h3>
<p>A cada ano são lançadas novas revistas da Yeshivá ricas em conteudo e qualidade. Clique aqui para assinar a sua:</p>
</div>
<button class="button-home">Assinar</button>
</div>
<div class="tres-colunas">
<div class="col-sm-3 col-md-6 col-lg-4">
<img src="calendario.png" alt="calendario" width="100" height="150" />
</div>
<div class="col-sm-9 col-md-6 col-lg-8">
<h3> Novidades por aqui </h3>
<p>Fique por dentro dos novos eventos e acontecimentos.</p>
<span style="padding:25px"> </span>
</div>
<button class="button-home">Confira</button>
</div>
<div class="tres-colunas">
<div class="col-sm-3 col-md-6 col-lg-4">
<img src="livro-dessler.jpg" alt="Livros da Yeshivá" width="100" height="150" />
</div>
<div class="col-sm-9 col-md-6 col-lg-8">
<h3> Livros da Yeshivá </h3>
<p>A Yeshivá já publicou dezenas de livros. Venha conhecer quais!</p>
<span style="padding:25px"> </span>
</div>
<button class="button-home">De uma olhada</button>
</div>
</div>
</body>
</html>
, im not loading the images, if its necessary tell me...
check if other browser are showing it correctly or not like(chrome ,firefox etc) also check if this happens only in your laptop/pc or every laptop/pc.
if it is happening only in your pc/laptop then there might be a chance that your IE has not enabled the style sheet option. I also had the same problem.
To fix this issue use the following steps:--
1.Start regedit.exe.
2.Go to HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main.
3.Double-click Use StyleSheets (or create this value of type String if it doesn't exist).
4.To allow style sheets, set StyleSheets to yes; to disallow, set it to no.
Click OK.
5.Close regedit.
6.Restart Internet Explorer (IE).
do reply if this help you or not..
I'm on Windows 8.1 using IE11 with the same issue. This is how I fixed it:
On your computer search for "regedit.exe" (go to the start menu and click on the search button on the top-right corner of the screen).
Once regedit opens up, on the left column click on "HKEY_CLASSES_ROOT" and then on ".css"On the right column double-click on "Content Type". This will open up a dialog box.
In the dialog box change "value data" to "text/css".
Click "Ok" and that's it.
I hope this helps other people out there.
Can you check the same thing on server cause respond.js works only on server.
Can you try loading the style sheet first by typing the below link in the address bar
http://localhost:paortnumber/path of your css folder/myStyle.css
Please let me know what you find?