Tag: bootstrap-5

Conditional Bootstrap tooltip

Advertisements I have this very simple Javascript code: $("#myinput").hover(function(){ if(condition){ $(this).tooltip({placement: "bottom", title: "mytitle"}); } ); with its HTML: <input data-toggle="tooltip" type="password" placeholder="Enter your Password" id="myinput" name="password" required /> When I load the page the condition it’s false so the tooltip correctly doesn’t show and when it becomes true it starts showing. The problem is… Read More Conditional Bootstrap tooltip

MRLeave a comment

router.push not redirect to defined path and it's load current page instead

Advertisements i’m new in NextJS and i’m getting stuck in the situation that i need to pass data from current page to another page, but instead of load defined path in router.push which is pathname: "/booking/checkout/", but it’s load current page. i need to pass the data inside GatherAllData() function to another page to process… Read More router.push not redirect to defined path and it's load current page instead

MRLeave a comment

Multi-nested rows and columns with Boostrap 4

Advertisements When using Bootstrap 4 I have some trouble with multi-nested rows and columns. In the following example, line2 should be under line1 and separated by an horizontal bar, but it’s next to it. Why is that? <link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css&#8221; rel=”stylesheet”/> <div class=”container-fluid”> <h1>Title</h1> <div class=”row”> <div class=”col-lg-12 my-3 p-3 bg-white rounded shadow-sm”> <h5 class=”border-bottom border-gray… Read More Multi-nested rows and columns with Boostrap 4

MRLeave a comment

How can I select all of the elements in the Bootstrap pagination code with JavaScript?

Advertisements I’m using Bootstrap for a website I’ve prepared. Since the overflow scroll bar looks bad, I have hidden it with CSS and I am trying to scroll the pagination with the mouse wheel via JavaScript. When I use the code given below, the top one works, but the bottom one does not. When I… Read More How can I select all of the elements in the Bootstrap pagination code with JavaScript?

MRLeave a comment

Installing bootstrap locally via NPM causes EACCES error

Advertisements Title speaks for itself mostly. Upon trying to install bootstrap in my project: npm i bootstrap@5.2.3 I receive error codes: npm ERR! syscall open npm ERR! path /Users/samgoldrick/package.json npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, open ‘/Users/samgoldrick/package.json’ npm ERR! [Error: EACCES: permission denied, open ‘/Users/samgoldrick/package.json’] { npm ERR! errno: -13, npm… Read More Installing bootstrap locally via NPM causes EACCES error

MRLeave a comment

How align header in top, footer in bottom of the page and main between them in bootstrap 5.3

Advertisements Iam new to bootstrap. I used bootstrap 5.3 in this html page. Now i want to align header in the top, footer in the bottom and size of the main between them. I tried the following html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Test Webpage</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css&quot; rel="stylesheet"> <script… Read More How align header in top, footer in bottom of the page and main between them in bootstrap 5.3

MRLeave a comment

Bootstrap Alert: Dismiss button showing incorrectly

Advertisements I’m messing around with Bootstrap and I think I’ve done everything listed on their page about the Alert. But my close-button just looks like a big fat grey square with an X in it. Any idea what I’m missing? https://codepen.io/Slagon/pen/NWORGpv <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js&quot; integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script> <ul class="list-group"> <li class="list-group-item">1</li> <li class="list-group-item">2</li> <li class="list-group-item">3</li> </ul> <div… Read More Bootstrap Alert: Dismiss button showing incorrectly

MRLeave a comment

how to add input and button in the same line

Advertisements how can I add input and button to be on the same line using bootstrap-5, what I’m trying here it is not working, is there anyway to style it or add some bootstrap-5 markup? <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&#8221; rel=”stylesheet” integrity=”sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC” crossorigin=”anonymous”> <div class=”container”> <div class=”row justify-content-center”> <div class=”col-md-6″> <form action=”” method=”get”> <input type=”text” name=”search_query” class=”form-control”> <button… Read More how to add input and button in the same line

MRLeave a comment