Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What is Navigation Element?
3.
Navigation using Bootstrap
3.1.
Tab Navigation
3.2.
Pills Navigation
3.2.1.
.nav-fill
3.2.2.
.nav-justified
3.3.
Positioning of Navigation
3.3.1.
justify-content-center
3.3.2.
Flex-column
3.4.
Disabled Links
3.5.
Dropdown Navigation
4.
Frequently Asked Questions
4.1.
What is Bootstrap?
4.2.
Why use bootstrap instead of CSS?
4.3.
Why do we give .nav, .nav-tabs, or .nav-pills in a class?
4.4.
What is the difference between pills and tabs?
4.5.
How to disable a navigation element?
5.
Conclusion
Last Updated: Mar 27, 2024
Easy

Bootstrap - Navigation Elements

Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

Bootstrap is an open-source framework that we can integrate into web projects to make our development easy. Bootstrap helps developers to save time by combining the already done templates of various sections in a website.

introduction image

This blog will discuss the navigation elements on websites' navigation bars. We will learn how to implement the navigation elements in various styles with the help of the Bootstrap framework.

What is Navigation Element?

When you visit a website, you must see a row at the top of the website. In that row, some elements or text will be present that will direct you to a new page when you click on them.

Those elements or text are the navigation elements, and the row is called the navigation bar. These navigation elements' role is to navigate the user to the page or URL(Universal Resource Locator) linked to the element the user clicks.

As you can see in the image below, there is a navigation bar. Here guided path, contest, practice, and many more are the navigation elements in the navbar.

navbar example

If you hover over the interview prep, practice, or resources navigation element, you will see a dropdown with more elements. We will also learn how to implement the dropdown.

dropdown navbar example
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Navigation using Bootstrap

This section will implement the navigation elements using the Bootstrap framework. Before we start, ensure you have installed the Bootstrap framework in our project. If you need help, follow the below instructions.

Install Bootstrap using the console.

npm install bootstrap@5.3.0-alpha1


Or include the following CDN links in your <head></head> tag of the index.html file to use the Bootstrap templates or classes.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">


Include this script before the </body> tag.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>


Example

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
        <link rel="stylesheet" href="index.css" />
        <title>Code Studio</title>
    </head>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    </body>
</html>

 

Now let's implement the navigation elements.

To use the markups and styles available in Bootstrap for the navigation elements, we need to use the .nav class. Add the .nav class and make sure to add the .nav class in the <ul>, which is a root tag.

Code

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
	<link rel="stylesheet" href="index.css" />
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
		crossorigin="anonymous"></script>
	<title>Code Studio</title>
</head>

<body>
	<div>
		<h3>.nav class examples</h3>
		<ul class="nav">
			<li class="nav-item">
				<a class="nav-link" href="#">Guided Path</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Interview Prep</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Contests</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Practices</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Resources</a>
			</li>
		</ul>
	</div>
</body>

</html>


Ensure that you have included the .nav-item class in each <li> tag and the .nav-link class in each <a> tag because it indicates the Bootstrap to implement the styling to that tag.

Output

nav class output

If you don't include the .nav-item class and  .nav-link class in the respective <li> and <a> tags, you will not be able to execute the styling. 

Example: Without nav-item and nav-link.

Code

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
	<link rel="stylesheet" href="index.css" />
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
		crossorigin="anonymous"></script>
	<title>Code Studio</title>
</head>

<body>
	<div>
		<ul class="nav">
			<li class="">
				<a class="" href="#">Guided Path</a>
			</li>
			<li class="">
				<a class="" href="#">Interview Prep</a>
			</li>
			<li class="">
				<a class="" href="#">Contests</a>
			</li>
			<li class="">
				<a class="" href="#">Practices</a>
			</li>
			<li class="">
				<a class="" href="#">Resources</a>
			</li>
		</ul>
	</div>
</body>

</html>


Output

withour nav-item class output

Tab Navigation

If you want to add some tab styling in your navigation element, you must include the .nav-tabs class in the <ul> tag along with .nav class.

Code

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
	<link rel="stylesheet" href="index.css" />
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
		crossorigin="anonymous"></script>
	<title>Code Studio</title>
</head>

<body>
	<div>
		<h3>.nav-tab class examples</h3>
		<ul class="nav nav-tabs">
			<li class="nav-item">
				<a class="nav-link" href="#">Guided Path</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Interview Prep</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Contests</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Practices</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Resources</a>
			</li>
		</ul>
	</div>
</body>

</html>


Output

nav-tab output

Pills Navigation

You can also implement pill styling using Bootstrap, similar to tab styling. You need to include the .nav-pills class in the <ul> tag of the navigation elements.

Code

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
	<link rel="stylesheet" href="index.css" />
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
		crossorigin="anonymous"></script>
	<title>Code Studio</title>
</head>

<body>
	<div>
		<h3>.nav-pills class examples</h3>
		<ul class="nav nav-pills">
			<li class="nav-item">
				<a class="nav-link active" href="#">Guided Path</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Interview Prep</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Contests</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Practices</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Resources</a>
			</li>
		</ul>
	</div>
</body>

</html>


Output

nav-pills output

Pills styling is required when you want to highlight the current navbar element in a pill or rectangle box. You need to add the .active class with the currently active page, as we have mentioned in the Guided Path link.

.nav-fill

If you want to add equal spacing between the nav elements and cover the navbar's horizontal length, you need to include the .nav-fill class in <ul> tag along with .nav-pills class.

Code

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
	<link rel="stylesheet" href="index.css" />
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
		crossorigin="anonymous"></script>
	<title>Code Studio</title>
</head>

<body>
	<div>
		<h3>.nav-fill class examples</h3>
		<ul class="nav nav-pills nav-fill">
			<li class="nav-item">
				<a class="nav-link active" href="#">Guided Path</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Interview Prep</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Contests</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Practices</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Resources</a>
			</li>
		</ul>
	</div>
</body>

</html>


Output

nav-fills output

.nav-justified

You can also use nav-justified, which works the same as the .nav-fill class. You must add the nav-justified instead of .nav-fill class in the <ul> tag.

Code

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
	<link rel="stylesheet" href="index.css" />
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
		crossorigin="anonymous"></script>
	<title>Code Studio</title>
</head>

<body>
    <div>
        <h3>.nav-justified class examples</h3>
        <ul class="nav nav-pills nav-justified">
            <li class="nav-item">
                <a class="nav-link active" href="#">Guided Path</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Interview Prep</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contests</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Practices</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Resources</a>
            </li>
        </ul>
    </div>
</body>

</html>


Output

nav-justified output

Positioning of Navigation

You can also change the position of the navigation elements if you want to add some uniqueness to your website. There are various classes available in Bootstrap that you can include to change the position of elements.

justify-content-center

By default, the display value of the nav class is flex, so you need to add the justify-content-center class to make the navigation in the center of the screen.

Code

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
	<link rel="stylesheet" href="index.css" />
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
		crossorigin="anonymous"></script>
	<title>Code Studio</title>
</head>

<body>
	<div>
		<h3>center the navigation</h3>
		<ul class="nav justify-content-center">
			<li class="nav-item">
				<a class="nav-link active" href="#">Guided Path</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Interview Prep</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Contests</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Practices</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Resources</a>
			</li>
		</ul>
	</div>
</body>

</html>


Output

centered navigation output

Flex-column

By default, nav elements are flex in nature, and if you add the flex-column class in the root <ul> tag, you can make the nav elements appear in a box or column.

Code

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
	<link rel="stylesheet" href="index.css" />
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
		crossorigin="anonymous"></script>
	<title>Code Studio</title>
</head>

<body>
	<div>
		<h3>flex-column navigation</h3>
		<ul class="nav flex-column">
			<li class="nav-item">
				<a class="nav-link active" href="#">Guided Path</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Interview Prep</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Contests</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Practices</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Resources</a>
			</li>
		</ul>
	</div>
</body>

</html>


Output

flex column navigation

Disabled Links

This navigation disables the .nav-item and restricts the user from accessing the content. The .disabled class is used to disable any item in the navbar. It only styles the item to let users know they cannot access it.

Code

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
	<link rel="stylesheet" href="index.css" />
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
		crossorigin="anonymous"></script>
	<title>Code Studio</title>
</head>

<body>
	<div>
		<h3>disabling the contest link</h3>
		<ul class="nav">
			<li class="nav-item">
				<a class="nav-link active" href="#">Guided Path</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Interview Prep</a>
			</li>
			<li class="nav-item">
				<a class="nav-link disabled" href="#">Contests</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Practices</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Resources</a>
			</li>
		</ul>
	</div>
</body>

</html>


Output

disabled link output

We have disabled the contest link by adding the .disabled class in the <a> tag.

Dropdown Navigation

You can add the dropdown navigation with the help of Bootstrap libraries. You need to add the .dropdown class in the tag where you want to add the dropdown effect. And then, you need to add the .dropdown-menu class in the element, representing the dropdown.

Code

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
        <title>Code Studio</title>
    </head>
    <body>
        <div>
            <h3>dropdown menu</h3>
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Guided Path</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Interview Prep</a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Interview Experience</a></li>
                        <li><a class="dropdown-item" href="#">Interview Guide</a></li>
                        <li><a class="dropdown-item" href="#">Mock Interview</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contest</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled">Practices</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled">Resources</a>
                </li>
            </ul>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    </body>
</html>


Output

dropdown menu output

Frequently Asked Questions

What is Bootstrap?

 Bootstrap is an open-source front-end development framework that creates responsive websites and applications that adjust the width according to the devices.

Why use bootstrap instead of CSS?

Bootstrap simplifies lengthy CSS codes with predefined classes that are not available in CSS and creates responsive websites.

Why do we give .nav, .nav-tabs, or .nav-pills in a class?

The .nav generates navigation in the bootstrap navbar. The .nav-tab indicates tabular navigation, and .nav-pills indicates it should generate pill navigation in the navbar.

What is the difference between pills and tabs?

The .nav-tabs generate a tabbed interface to separate data in the same components/panes, while the .nav-pills generate separate elements to speed up browsing.

How to disable a navigation element?

Add .disbaled class in the navigation element <a> tag to make it disabled.

Conclusion

In this blog, we have learned how to implement the navigation elements using the Bootstrap framework. We have implemented different styles of navigation elements available in Bootstrap.

You can check out the following links for more Bootstrap information.

To learn more about DSA, competitive coding, and many more knowledgeable topics, please look into the guided paths on Coding Ninjas Studio. Also, you can enroll in our courses and check out the mock test and problems available to you. Please check out our interview experiences and interview bundle for placement preparations.

Happy Coding!

Live masterclass