/    Sign up×
Community /Pin to ProfileBookmark

Bootstrap 5 overwrites my SCSS and carousel is not working.

Copy linkTweet thisAlerts:
Nov 05.2021

Hi,
I need to use bootstrap to create a carousel that has some content in it. I have created the first slide and then I added the CSS bootstrap link and the js one.

After adding the bootstrap CSS link my SCSS become a mess, the content of the slide was not in the same position the text change weight and size, and margins and paddings were changed. I do have my sccs linked under the bootstrap CSS but for some reason, the bootstrap still overwrites my scss.

Also, for some reason the carousel does not work at all, I have created a second slide and it just places it under the first one. I have uses the bootstrap classes to overwrite some styles placing the slide content where I wanted but it works like in the tutorial that I have followed and the buttons (carousel controls) do not work. This is the tutorial link
https://www.youtube.com/watch?v=ku_97a6Bgkg&t=174s

This is my code from the index.html page

“`
<!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″ />

<!– Bootstrap CSS –>
<!– <link
href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css”
rel=”stylesheet”
integrity=”sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6″
crossorigin=”anonymous”
/> –>

<link rel=”stylesheet” href=”style/style.css” />
<script defer src=”index.js”></script>

<script
src=”https://kit.fontawesome.com/6528d97294.js”
crossorigin=”anonymous”
></script>

<title>Cosmos</title>
</head>
<body>
<!– Nav bar ——————————- –>
<nav class=”nav-bar”>
<div class=”nav-logo”>
<a href=”#”>
<img src=”img/cosmos-logo.png” alt=”Cosmos Logo” />
</a>
</div>
<div class=”nav-links”>
<ul>
<button class=”close-menu-btn”><i class=”fas fa-times”></i></button>
<a href=”#”><li>Home</li></a>
<a href=”#”><li>Projects</li></a>
<a href=”#”><li>Services</li></a>
</ul>
</div>
<div class=”nav-menu-btn”>
<button class=”open-menu-btn”>
<i class=”fas fa-bars”></i>
</button>
</div>
</nav>
<!– Nav bar ——————————- –>

<!– Header ——————————- –>
<header class=”header”>
<div id=”myCarousel” class=”carousel slide” data-ride=”carousel”>
<div class=”carousel-inner”>
<div class=”carousel-item active”>
<div class=”header-image”>
<div class=”header-img-info”>
<h3>Enceladus</h3>
<p>The Saturn System</p>
<p>Distance: 95 AU</p>
<p>Population: 3920</p>
</div>
</div>
<div class=”header-card”>
<div class=”header-card-arrow”></div>
<div class=”header-card-content”>
<div class=”header-card-top”>
<h2>Enceladus</h2>
<div class=”header-card-description”>
<p>
Is the sixth-largest moon of Saturn. It is about a tenth
of Saturn’s largest moon, Titan.
</p>
<p>
Explore this amazing cosmic marvel in a safe and fast trip
with our aerospace company.
</p>
</div>
</div>
<div class=”header-card-footer”>
<div class=”card-price”>
<p>999.990 &euro;</p>
<p>one way ticket</p>
</div>
<div class=”card-button”>
<button class=”card-buy-button”>Buy</button>
</div>
</div>
</div>
</div>
</div>
<div class=”carousel-item”>
<div class=”header-image”>
<div class=”header-img-info”>
<h3>Enceladus</h3>
<p>The Saturn System</p>
<p>Distance: 95 AU</p>
<p>Population: 3920</p>
</div>
</div>
<div class=”header-card”>
<div class=”header-card-arrow”></div>
<div class=”header-card-content”>
<div class=”header-card-top”>
<h2>Enceladus</h2>
<div class=”header-card-description”>
<p>
Is the sixth-largest moon of Saturn. It is about a tenth
of Saturn’s largest moon, Titan.
</p>
<p>
Explore this amazing cosmic marvel in a safe and fast trip
with our aerospace company.
</p>
</div>
</div>
<div class=”header-card-footer”>
<div class=”card-price”>
<p>999.990 &euro;</p>
<p>one way ticket</p>
</div>
<div class=”card-button”>
<button class=”card-buy-button”>Buy</button>
</div>
</div>
</div>
</div>
</div>
<a
href=”#myCarousel”
class=”carousel-control-prev carousel-arrow”
role=”button”
data-slide=”prev”
>
<span class=”sr-only”>Previous</span>
<span class=”carousel-control-prev-icon” aria-hidden=”true”></span>
</a>
<a
href=”#myCarousel”
class=”carousel-control-next carousel-arrow”
role=”button”
data-slide=”next”
>
<span class=”sr-only”>Previous</span>
<span class=”carousel-control-next-icon” aria-hidden=”true”></span>
</a>
</div>
</div>
</header>
<!– Header ——————————- –>

<!– BOOTSTRAP ——————————- –>
<script
src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”
integrity=”sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf”
crossorigin=”anonymous”
></script>
</body>
</html>
“`

to post a comment
CSSJavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@codyhillauthorNov 05.2021 — @RaulRogojan#1639065 Also the scss code here:
``<i>
</i>.carousel {
width: 100%;
height: auto;
@include flex(none, column, center, center);
background: blue;
}

.carousel-inner {
width: 100%;
height: auto;
@include flex(none, column, center, center);
background: red;
}

.header {
position: relative;
width: 100%;
height: auto;
padding: 0 0 25px 0;
@include flex(wrap, column, center, center);
background: green;

@media (min-width: 768px) {
padding: clamp(35px, 10vw, 85px) 0 clamp(25px, 8vw, 65px) 0;
}

.carousel-controls {
position: absolute;
width: 100%;
height: 100%;
@include flex(none, row, space-between, flex-start);
margin-top: 50%;
padding: 2%;
z-index: 10;

.carousel-arrow {
width: 50px;
height: 50px;
border-radius: 100vh;
background-color: $primary;
@include flex(none, row, flex-start, center);
font-size: $font-size-xl;
color: white;

@media (min-width: 410px) {
width: 40px;
height: 40px;
font-size: $font-size-l;
}
@media (min-width: 768px) {
width: 70px;
height: 70px;
font-size: $font-size-3xl;
}
@media (min-width: 1000px) {
width: 90px;
height: 90px;
font-size: $font-size-4xl;
}
}
.carousel-left-arrow i {
position: absolute;
top: calc(50% - 1px);
left: calc(50% - 0px);
transform: translate(-50%, -50%);

@media (min-width: 768px) {
top: calc(50% - 1px);
left: calc(50% - 3px);
}
}
.carousel-right-arrow i {
position: absolute;
top: calc(50% - 1px);
left: calc(50% + 2px);
transform: translate(-50%, -50%);

@media (min-width: 768px) {
top: calc(50% - 1px);
left: calc(50% + 2px);
}
}
}

.carousel-item {
position: relative;
margin: auto 0;
width: 100%;
min-height: 560px;
background-color: white;
@include flex(none, column, center, center);

@media (min-width: 768px) {
width: 70%;
}

@media (min-width: 1200px) {
@include flex(none, row, center, flex-start);
}

.header-image {
width: 100%;
max-width: 635px;
min-height: 415px;
padding: 20px 0 0 10px;
background-image: url(../img/enceladus.jpg);
background-position: top right;
background-size: cover;
background-repeat: no-repeat;

@media (min-width: 1300px) {
max-width: 735px;
}

.header-img-info {
color: white;
font-size: $font-size-l;

h3 {
text-transform: $text-transform;
}
}
}
}
.header-card {
width: 100%;
@include flex(none, column, center, center);

@media (min-width: 1200px) {
@include flex(none, row, center, center);
width: auto;
margin-left: -20px;
}

.header-card-arrow {
position: relative;
width: 0px;
height: 0px;
bottom: -10px;
margin-top: 10px;
border-bottom: 30px solid $primary-light;
border-left: 30px solid transparent;
border-right: 30px solid transparent;

@media (min-width: 1200px) {
transform: rotate(270deg);
margin-top: 0px;
bottom: 0px;
right: -25px;
}

&amp;::before {
content: "";
position: absolute;
width: 0px;
height: 0px;
top: 15px;
left: -15px;
border-bottom: 15px solid white;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}
}

.header-card-content {
width: 100%;
min-height: 415px;
border: 10px solid $primary-light;
@include flex(none, column, space-between, flex-start);

@media (min-width: 400px) {
width: 70%;
}

@media (min-width: 768px) {
width: 260px;
}

.header-card-top {
width: 100%;
padding: 20px 20px 0px 15px;

&amp; h2 {
font-size: $font-size-xxl;
margin-bottom: 15px;
}

.header-card-description {
color: $grey;
font-size: $font-size-m;

&amp; p:nth-child(1) {
margin-bottom: 15px;
}
&amp; p:nth-child(2) {
margin-bottom: 35px;
}
}
}

.header-card-footer {
width: 100%;
background-color: $primary;
padding: 20px 20px 15px 15px;

.card-price {
color: white;

&amp; p:nth-child(1) {
font-size: $font-size-3xl;
font-weight: bold;
}
&amp; p:nth-child(2) {
font-size: $font-size-l;
}
}
.card-button {
width: 100%;
@include flex(none, column, center, flex-end);

.card-buy-button {
font-size: $font-size-xl;
text-transform: $text-transform;
width: 115px;
height: 40px;
border-radius: 4px;
border: none;
background-color: $button-color;
color: $grey;
font-weight: bold;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
margin-top: 15px;
cursor: pointer;
transition: all 200ms ease;

&amp;:hover {
background-color: white;
color: $grey;
}
}
}
}
}
}
}<i>

</i>`</CODE>
<CODE>`<i>
</i>$font-size-s: 12px;
$font-size-m: 16px;
$font-size-l: 18px;
$font-size-xl: 22px;
$font-size-xxl: 30px;
$font-size-3xl: 35px;
$font-size-4xl: 45px;
$font-size-5xl: 55px;
$font-size-title: 30px;
$text-transform: uppercase;

$primary: #6261a7;
$primary-light: #8f8dc7;
$grey: #333333;
$button-color: #ffce22;

// Additional colors
$color-1: #f5b845;
$color-2: #6af0cf;
$color-3: #c6f16a;

// Mixin
@mixin flex($wrap, $direction, $jc, $ai) {
display: flex;
flex-wrap: $wrap;
flex-direction: $direction;
justify-content: $jc;
align-items: $ai;
}<i>
</i>``
×

Success!

Help @codyhill spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.13,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...