How to use marquee tag in bootstrap?
May 10, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
Today, I am going to show you. How to use marquee tag in bootstrap with code example.
Table of contents
- Framework and cdn link setup
- Included JS bootstrap
- Define its class name
- Included css bootstrap
This article will guide you to adding marquee tag in Bootstrap with example.
Step 1: Framework and cdn link setup
First of all, load the Bootstrap framework CSS into the head tag of your webpage.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Step 2: Included JS bootstrap
Now, load the Bootstrap JavaScript file before closing the body tag and done.
<!--Bootstrap 4 JS included-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
Step 3: Define its class name
After that, create the justify-content with a class name .justify-content
.
<div class="container">
<div class="ticker">
<div class="title">
<h5>Breaking News</h5>
</div>
<div class="news">
<marquee class="news-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto </p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam </p>
</marquee>
</div>
</div>
</div>
Step 4: Included css bootstrap
Now, Included css file before closing the <head>
tag and done.
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
a {
color: #fff;
text-decoration: none
}
body {
height: 100vh;
background: #3e3232;
font-family: 'Poppins', sans-sherif;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
overflow: hidden
}
.ticker {
display: flex;
flex-wrap: wrap;
width: 80%;
height: 50px;
margin: 0 auto
}
.news {
width: 76%;
background: #44cc6f;
padding: 0 2%
}
.title {
width: 20%;
text-align: center;
background: #2a1cc8;
position: relative
}
.title:after {
position: absolute;
content: "";
right: -22%;
border-left: 20px solid #3e1cc8;
border-top: 28px solid transparent;
border-right: 20px solid transparent;
border-bottom: 21px solid transparent;
top: 0px
}
.title h5 {
font-size: 18px;
margin: 8% 0
}
.news marquee {
font-size: 18px;
margin-top: 12px
}
.news-content p {
margin-right: 41px;
display: inline
}
Example.
Let’s look at the following example to understand how it basically works:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!------ Include the above in your head tag ---------->
<title>Bootstrap</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
a {
color: #fff;
text-decoration: none
}
body {
height: 100vh;
background: #3e3232;
font-family: 'Poppins', sans-sherif;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
overflow: hidden
}
.ticker {
display: flex;
flex-wrap: wrap;
width: 80%;
height: 50px;
margin: 0 auto
}
.news {
width: 76%;
background: #44cc6f;
padding: 0 2%
}
.title {
width: 20%;
text-align: center;
background: #2a1cc8;
position: relative
}
.title:after {
position: absolute;
content: "";
right: -22%;
border-left: 20px solid #3e1cc8;
border-top: 28px solid transparent;
border-right: 20px solid transparent;
border-bottom: 21px solid transparent;
top: 0px
}
.title h5 {
font-size: 18px;
margin: 8% 0
}
.news marquee {
font-size: 18px;
margin-top: 12px
}
.news-content p {
margin-right: 41px;
display: inline
}
</style>
</head>
<body>
<div class="container">
<div class="ticker">
<div class="title">
<h5>Breaking News</h5>
</div>
<div class="news">
<marquee class="news-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto </p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam </p>
</marquee>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
</body>
</html>
Check the output of the above code example.
All the best 👍