How to search on data attribute in select 2?

Issue I want to search on value and data-test attribute. in select2 <option value="Test 1" data-test="user-1">Test 1</option> <option value="Test 2" data-test="user-2">Test 2</option> <option value="Test 3" data-test="user-3">Test 3</option> Solution You can read more document for search in select2 : example same

Continue reading

CSS class for pointer cursor

Issue Is there any CSS class or attribute for pointer:cursor in Bootstrap 4 specially for button or link? <link href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css” rel=”stylesheet”/> <button type=”button” class=”btn btn-success”>Sample Button</button> Solution As of June 2020, adding role="button" to any HTML tag would add cursor:

Continue reading

Display content by category

Issue There are such buttons in the navbar, how to do this – when a tab is selected for the specified content for this category // ———Responsive-navbar-active-animation———– function test(){ var tabsNewAnim = $(‘#navbarSupportedContent’); var selectorNewAnim = $(‘#navbarSupportedContent’).find(‘li’).length; var activeItemNewAnim =

Continue reading

HTML/Bootstrap layout

Issue I’m trying to layout a section like the image here. I’m using bootstrap 4. I’ve tried laying out with rows and cols but can never achieve this look. Right now I’m using a <ul> and <li>. Inside the <li>

Continue reading

How to center this select box horizontally and vertically in a table (Bootstrap 4.0)?

Issue I’ve tried to do it using this approach and many others, but no success: Here is the Fiddle <td class="align-middle"> <select name="D1" style="border-radius: 0.2rem;"> <option value="empty"></option> <option value="Approved">Approved</option> <option value="Discuss">Discuss</option> <option value="Rejected">Rejected</option> </select> </td> Appreciate your help Solution You

Continue reading

How to center this select box horizontally and vertically in a table (Bootstrap 4.0)?

Issue I’ve tried to do it using this approach and many others, but no success: Here is the Fiddle <td class="align-middle"> <select name="D1" style="border-radius: 0.2rem;"> <option value="empty"></option> <option value="Approved">Approved</option> <option value="Discuss">Discuss</option> <option value="Rejected">Rejected</option> </select> </td> Appreciate your help Solution You

Continue reading

How to make forms inline

Issue i have 3 forms <form th:method=”get” th:action==”…” th:object=”${…}” > <input type=”submit” value=”Edit” class=”btn btn-primary my-2″> </form> <form th:method=”delete” th:action=”…” th:object=”${…}”> <input type=”submit” value=”Delete” class=”btn btn-secondary my-2″> </form> <form th:method=”put” th:action=”…” th:object=”${…}”> <input type=”submit” value=”Back” class=”btn btn-primary my-2″> </form> How

Continue reading

Typescript catch bootstrap 4 modal open event

Issue I am trying to execute some code when the bootstrap model opens but everything i try isn’t working. Modal: <div class=”modal fade” id=”mobileModal” tabindex=”-1″ role=”dialog” aria-labelledby=”exampleModalLabel” aria-hidden=”true” data-keyboard=”false” data-backdrop=”static” > Typescript: @ViewChild(‘mobileModal’) mobileModal: ElementRef; ngAfterViewInit() { $(this.mobileModal.nativeElement).on(‘hidden.bs.modal’, () =>

Continue reading

How to add space between label and radio button? Bootstrap 4

Issue I tried this solution but it didn’t work, any advice how it can be achieved? <link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css” rel=”stylesheet”/> <div class=”form-row”> <div class=”col-4″> <p>Signing on behalf of</p> <label class=”radio-inline” style=””> <input type=”radio” name=”optradio” checked=”true” style=”padding-left:15px;”>A Company </label> <label class=”radio-inline” style=”padding-left:15px;”>

Continue reading

Bootstrap Collapse on table row is not animated

Issue i have created a table with bootstrap 4 like this <link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css” rel=”stylesheet”/> <link href=”https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet” /> <script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js”></script> <script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js”></script> <div class=”card-body justify-content-center”> <p><a class=”btn btn-primary collapsed” data-toggle=”collapse” href=”#collapseProduct” role=”button” aria-expanded=”false” aria-controls=”collapseProduct”>Animate div</a><button class=”btn btn-primary collapsed” type=”button” data-toggle=”collapse”

Continue reading

How can i add 6 rows of paragraphs with bootstrap?

Issue <!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"> <title>Bootstrap</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> </head> <body> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2"> <p>Lorem Ipsum is simply dummy text of the printing

Continue reading

how multiple condition filter can work using Jquery?

Issue How can I make multiple filtering condition work simultaneously? Currently I’m able to filter using individual conditions. But while giving multiple condition it is only filtering based on the last filter condition. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <div class="form-group"> <h6>Name</h6> <input id="Name"

Continue reading

is there a way to prevent repeating code in html I'm using bootstrap 4 collapse like 20 times in one page

Issue <div class=”card” style> <div class=”card-header” id=”headingOne”> <h5 class=”mb-0″> <button class=”btn btn-link” data-toggle=”collapse” data-target=”#collapseOne” aria- expanded=”true” aria-controls=”collapseOne”> Collapsible Group Item #1 </button> </h5> </div> <!– Add mx-auto –> <div id=”collapseOne” class=”collapse show text-center mx-auto” aria-labelledby=”headingOne” style=”width:300px;”> <div class=”card-body”> <div class=”card”>

Continue reading

Bootstrap carousel not working . It's not sliding?

Issue I am not sure why the below does not work. I’m currently doing a web development course on udemy. I tried to apply a carousel with controls, but it does not seem to work. <link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css” integrity=”sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn” crossorigin=”anonymous”>

Continue reading