Bootstrap Forms:

Bootstrap Navigate to Anchor Inside Collapsed Element

The navigation bar is one of the most critical factors on many websites and professional people always use this element on their pages. So, you can apply it on your website if you have one. Look at this post and realize its importance. The Bootstrap Navigate to Anchor Inside Collapsed Element has all the needed features for different kinds of websites. By using this JavaScript Auto Scrolling Code, you can increase the attractiveness of your website. As you see in this post, this Bootstrap Anchor Link has a unique design that attracts anyone’s attention.

The main theme of this Anchor Link to Text is blue. Therefore, you can use it on your page if you have a website with a blue theme. There is a field tab at the top of the page with blue background and white writing. If you put the mouse on this part, its background becomes a little darker. After clicking on this section, the page automatically scrolls down and its text appears. The writings of this HTML Scroll by Click are black and its title is bold. This code has a blue border that makes the mentioned page more attractive.

Javascript Auto Scrolling Code

Bootstrap Anchor Link

Anchor Link to Text

HTML Scroll by Click

<!-- This script got from frontendfreecode.com -->
<div class="min-vh-100 bg-primary">
    <section class="container py-5">
        <div class="row">
            <div class="col-md-6 mx-auto">
                <div class="card card-body">
                    <a class="btn btn-primary btn-collapse-target" data-collapse-target="#connect-container" href="#connect">Click Me</a>
                    <div class="space"></div>
                    <div id="connect-container" class="collapse">
                        <h1 id="connect">Connect with me</h1>
                        <p>
                            Bacon ipsum dolor amet porchetta cow strip steak chuck pig 								kevin ham short ribs capicola meatball flank alcatra. Bresaola 							   leberkas capicola pancetta drumstick meatloaf buffalo kielbasa 							  sirloin turkey turducken pork belly. Hamburger beef kevin pork 							 corned beef drumstick ground round sirloin meatball shoulder t-							bone. Sausage hamburger kiel basa, doner ribeye pastrami strip 							   steak brisket pork belly leberkas pig frankfurter pork swine.
                        </p>
                        <p>
                            Bacon ipsum dolor amet porchetta cow strip steak chuck pig 								kevin ham short ribs capicola meatball flank alcatra. Bresaola 							   leberkas capicola pancetta drumstick meatloaf buffalo kielbasa 							  sirloin turkey turducken pork belly. Hamburger beef kevin pork 							 corned beef drumstick ground round sirloin meatball shoulder t-							bone. Sausage hamburger kiel basa, doner ribeye pastrami strip 							   steak brisket pork belly leberkas pig frankfurter pork swine.
                        </p>
                        <p>
                            Bacon ipsum dolor amet porchetta cow strip steak chuck pig 								kevin ham short ribs capicola meatball flank alcatra. Bresaola 							   leberkas capicola pancetta drumstick meatloaf buffalo kielbasa 							  sirloin turkey turducken pork belly. Hamburger beef kevin pork 							 corned beef drumstick ground round sirloin meatball shoulder t-							bone. Sausage hamburger kiel basa, doner ribeye pastrami strip 							   steak brisket pork belly leberkas pig frankfurter pork swine.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

.space {
  height: 1000px;
}

var btnCollapseTarget = document.querySelectorAll('.btn-collapse-target');
if (btnCollapseTarget) {
	btnCollapseTarget.forEach(function (el) {
		el.addEventListener('click', function (e) {
			var collapseTarget = document.querySelector(el.getAttribute('data-collapse-target'));

			if (!collapseTarget.classList.contains('show')) {
				e.preventDefault();

				var collapseTargetContainer = bootstrap.Collapse.getInstance(collapseTarget) ? bootstrap.Collapse.getInstance(collapseTarget) : new bootstrap.Collapse(collapseTarget, { toggle: false });
				collapseTargetContainer.show();

				collapseTarget.addEventListener('shown.bs.collapse', function (e) {
					document.querySelector(el.getAttribute('href')).scrollIntoView();
				});
			}
		}, false);
	});
}

    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js'></script>
<style>
.space {
  height: 1000px;
}
</style>

</head>
<body>
<div class="min-vh-100 bg-primary">
    <section class="container py-5">
        <div class="row">
            <div class="col-md-6 mx-auto">
                <div class="card card-body">
                    <a class="btn btn-primary btn-collapse-target" data-collapse-target="#connect-container" href="#connect">Click Me</a>
                    <div class="space"></div>
                    <div id="connect-container" class="collapse">
                        <h1 id="connect">Connect with me</h1>
                        <p>
                            Bacon ipsum dolor amet porchetta cow strip steak chuck pig 								kevin ham short ribs capicola meatball flank alcatra. Bresaola 							   leberkas capicola pancetta drumstick meatloaf buffalo kielbasa 							  sirloin turkey turducken pork belly. Hamburger beef kevin pork 							 corned beef drumstick ground round sirloin meatball shoulder t-							bone. Sausage hamburger kiel basa, doner ribeye pastrami strip 							   steak brisket pork belly leberkas pig frankfurter pork swine.
                        </p>
                        <p>
                            Bacon ipsum dolor amet porchetta cow strip steak chuck pig 								kevin ham short ribs capicola meatball flank alcatra. Bresaola 							   leberkas capicola pancetta drumstick meatloaf buffalo kielbasa 							  sirloin turkey turducken pork belly. Hamburger beef kevin pork 							 corned beef drumstick ground round sirloin meatball shoulder t-							bone. Sausage hamburger kiel basa, doner ribeye pastrami strip 							   steak brisket pork belly leberkas pig frankfurter pork swine.
                        </p>
                        <p>
                            Bacon ipsum dolor amet porchetta cow strip steak chuck pig 								kevin ham short ribs capicola meatball flank alcatra. Bresaola 							   leberkas capicola pancetta drumstick meatloaf buffalo kielbasa 							  sirloin turkey turducken pork belly. Hamburger beef kevin pork 							 corned beef drumstick ground round sirloin meatball shoulder t-							bone. Sausage hamburger kiel basa, doner ribeye pastrami strip 							   steak brisket pork belly leberkas pig frankfurter pork swine.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
var btnCollapseTarget = document.querySelectorAll('.btn-collapse-target');
if (btnCollapseTarget) {
	btnCollapseTarget.forEach(function (el) {
		el.addEventListener('click', function (e) {
			var collapseTarget = document.querySelector(el.getAttribute('data-collapse-target'));

			if (!collapseTarget.classList.contains('show')) {
				e.preventDefault();

				var collapseTargetContainer = bootstrap.Collapse.getInstance(collapseTarget) ? bootstrap.Collapse.getInstance(collapseTarget) : new bootstrap.Collapse(collapseTarget, { toggle: false });
				collapseTargetContainer.show();

				collapseTarget.addEventListener('shown.bs.collapse', function (e) {
					document.querySelector(el.getAttribute('href')).scrollIntoView();
				});
			}
		}, false);
	});
}
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS