Prime Study Hub

Here we are gonna see how to remove duplicates from JS array in either of the below format, Duplicates in an Array (or) Duplicates in an Array of Objects Let's go through each in detail. Duplicates in an Array Assume you have duplicates in a list of the country array, var countries=["China","India","United States","Indonesia", "India","Pakistan" ]; As you can see in the above array, country India is repeating twice from the list. In order to get an accurate unique country list, you can use any of the following methods. jQuery Hashtables Sort jQuery See the Pen Remove Duplicates in an array using jQuery by Prime Study Hub ( @PrimeStudyHub ) on CodePen . This method loops through your original array and finds the duplicate items and removes them and updates the non-duplicate items into the new array. Hashtable See the Pen Remove Duplicates in an array using Hashtable by Prime Study Hub ( @Prim...

The Bootstrap 4  is the newest version of  Bootstrap , which is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. The new features are, Bootstrap 4 Source CSS files Converted in SCSS. Bootstrap 4 has 5 grid system ( .col-, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3 ).  Bootstrap 4 has removed the xs from the lowest breakpoint. Therefore, ( col- ) covers all devices. Bootstrap 4 has changed the offset class ( .offset-md-4 ) In Bootstrap 3 we are used this ( .img-responsive ) class for the responsive image.  Bootstrap 4 has changed the class for a responsive image ( .img-fluid ). Bootstrap 4 has changed to ( .form-control-lg ) and ( .form-control-sm ) to increase and decrease the input size.  To learn more click here . 

Bootstrap 4 Spinners The Spinner is a major component of a website that ensures all necessary libraries, programs, contents, and images are loaded, which is essential during the startup phase of running a website. Let's see how to create a Bootstrap 4 Spinner? In order to create lightweight bordered spinner, include .spinner-border class to your element. <div class="container">     <div class="spinner-border"></div> </div> Demo See the Pen Bootstrap 4 Spinners by Prime Study Hub ( @PrimeStudyHub ) on CodePen . Color Variations You can create spinners with different color variations like below example, See the Pen Bootstrap 4 Colored Spinners by Prime Study Hub ( @PrimeStudyHub ) on CodePen . Growing Spinners In order to create a growing spinner instead of border spinner, Use .spinner-grow class along with text color utilities to change its appearance. Let's look into a detailed example, See the Pen B...

Top 10 Bootstrap Interview Questions In this article, you will learn about the top 10 most frequently asked interview questions and their answers. What is Bootstrap? Bootstrap is an open-source HTML, CSS, and Javascript framework for responsive & mobile-friendly website designing.  There are 3 elements in bootstrap, bootstrap.css - a CSS framework bootstrap.js - a Javascript/JQuery framework glyphicons - font & icon set Bootstrap can be simply integrated along with distinct other platforms and frameworks, on existing sites and the new ones too. You can also utilize specific elements of Bootstrap along with your current CSS. Bootstrap approaches with popular pre-styled components for alerts, dropdowns, navigation bars, etc. It helps to reduce your project completion time. To learn more click here. What are the advantages of Bootstrap? The advantages of Bootstrap are, Easy to Use Responsiveness Customizable Bootstrap Consistency Support Simple ...

Bootstrap 4 Scrollspy The bootstrap 4 scrollspy automatically highlights the position of the content based on navigation or list-group components. Here's an example of scrollspy, See the Pen Bootstrap 4 Scrollspy by Prime Study Hub ( @PrimeStudyHub ) on CodePen . Use the nav component to create scrollspy links. If you would like to know how to create nav components click here . To create scrollspy, Include  data-spy="scroll" attribute to your scroll content element then add  data- target="#navbarNav" attribute to specify the target element then add a unique ID to your each content area that should be mentioned in your each navigation items like above code sample. Scrollspy Nav Pills Here's an example of scrollspy with nav pills, See the Pen Bootstrap 4 Scrollspy Nav Pills by Prime Study Hub ( @PrimeStudyHub ) on CodePen . Scrollspy list-group See the Pen Bootstrap 4 Scrollspy with list-group by Prime Study Hub ( @PrimeStu...

Bootstrap 4 Navbar The Navbar is shown on each page that the user navigates through the website. The bootstrap 4 nav component provides the different styles of the navbar. It also supports logo branding, easy navigation, quote buttons, and forms, etc..  Let's look into each one with an example. The Navbar completely supports responsiveness depending on various screen sizes. To create default navbar, use .navbar class along with responsive class .navbar-expand-sm|md|lg|xl . To create menu items with the hyperlink, Add .navbar-nav class to your <ul> element and add .nav-item class to your each <li> element inherited by an <a> element with .nav-link class for hyperlink. See the Pen Bootstrap 4 Navbar by Prime Study Hub ( @PrimeStudyHub ) on CodePen . Navbar with Background To create navbar with color variation, include any of the contextual classes ( .bg-primary , . bg-secondary , .bg-warning , .bg-danger , .bg-success , .bg-light , .bg-dark ,...

Bootstrap 4 Navs The Bootstrap 4 Navs are used to create a navigational menu with different styles. It creates a list with the links for navigation. In this tutorial, we are going to explore the different types of bootstrap 4 navigations. Here's an example of a basic navigational menu, See the Pen Bootstrap 4 Navigation by Prime Study Hub ( @PrimeStudyHub ) on CodePen . To create the basic nav, add the .nav class to your <ul> element, then include .nav-item class to your each <li> element represents nav items and add <a> element inside each <li> element with .nav-link class for their links. Navigation Alignment By default, the navigation menu should be on the left. You can change their alignment either right or center as well. For the right nav, add .nav class along with . justify-content-end class. (e.g.  <ul class="nav justify-content-end"> ) For the center nav, add .nav class along with .justify-content-cent...

Bootstrap 4 Progress The progress bars are used to provide a valuable response to the user on the progress of specific action. So, the users can easily analyze how far they are in a process to complete. The bootstrap 4 progress bar provides the ideal way of visualizing the process. Let's explore in detail, Default Progress Bar See the Pen Bootstrap 4 Progress Bar by Prime Study Hub ( @PrimeStudyHub ) on CodePen . To create a default progress bar, Add a .progress class to your element and add a .progress -bar class inside its child element like the above example. Progress Bar with Labels To create a progress label, Add text inside the progress bar to display the process percentage. Let's look into an example, See the Pen Bootstrap 4 Progress Bar with Labels by Prime Study Hub ( @PrimeStudyHub ) on CodePen . Contextual Progress Bar You can include contextual classes for different color variations. See the Pen Bootstrap 4 Contextual Progress Bar b...

Bootstrap 4 Dropdowns The dropdown allows us to select an item from a different variety of options. The bootstrap 4 dropdown provides a wide range of traits based on necessities. This can be used in many places like navigation menus, gather user information in the form section, etc. Here is an example of a bootstrap 4 dropdown, See the Pen Bootstrap 4 Dropdowns by Prime Study Hub ( @PrimeStudyHub ) on CodePen . The .dropdown class represents the dropdown menu. The .dropdown-toggle class is used to show or hide the menu items based on data-toggle="dropdown" attribute of button click events. Include the .dropdown-menu to a <div> element to create the dropdown menu and include .dropdown-item class to each  <a> (or button) elements to create the items list. Dropdown with Headers Include the .dropdown-header class inside the dropdown menu to create the fancy dropdown headers. Let's look into the below example, See the Pen Bootstrap...

Bootstrap 4 Pagination The Bootstrap 4 pagination is used to navigate across multiple pages by using the next or previous option or by a specific page number. To create pagination you need to include a .pagination class to your <ul> element. As well as you need to add .page-item to each <li> element and .page-link to each <a> element. Let's look into a detailed example, See the Pen Bootstrap 4 Pagination by Prime Study Hub ( @PrimeStudyHub ) on CodePen . Pagination with icons You can include icons instead of next and previous content in order to improve the look of pagination. See the Pen Bootstrap 4 Pagination with icons by Prime Study Hub ( @PrimeStudyHub ) on CodePen . Active pagination Include the .active class to your <li> element that highlights the current page that the user is on. For example, See the Pen Bootstrap 4 Pagination with Active State by Prime Study Hub ( @PrimeStudyHub ) on CodePen . Pagination with d...

Bootstrap 4 Collapse The Bootstrap 4 Collapse is useful when you want to expand or collapse a large amount of information. This also used to showcase different products, categories, etc. It uses javascript to show or hide an element based on mouse click events. Let us go through an example to understand more, <div class="container">   <div class="row"> <div class="collapse" id="collapseTop">   <div class="card card-body">     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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   </div> </div> <p class="text-center">   <button class="btn btn-danger" type="button" data-toggle="collapse" data-target="#collapseTop" aria-expanded="false" aria-controls...

Bootstrap 4 Modal The modal is an astounding dialog / prompt box that is appeared on the top of the page to gather the user attention. Let's see an example, <div class="container">   <h3>     <a href="https://primestudyhub.blogspot.com/search/label/Bootstrap%204" target="_blank">Bootstrap 4 Modal - Basic</a></h3>   <hr/>   <!-- Button to Open the Modal -->   <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#demoModal">     Open modal   </button>   <!-- The Modal -->   <div class="modal" id="demoModal">     <div class="modal-dialog">       <div class="modal-content">               <!-- Modal Header -->         <div class="modal-header">    ...

Bootstrap 4 Tooltips Tooltip is a small pop-up box that displayed when the user moves the mouse over an element. The Tooltips are helpful when you need to display some additional information to your ideal customers To create a tooltip, you have to include data-toggle="tooltip" attribute in your HTML element. For Example, <button type="button" class="btn btn-danger" data-toggle="tooltip" title="Top">   Top </button> The Bootstrap 4 tooltips are not enabled by default, you have to initialize them before you can use it. Follow the below example to initialize the tooltips, <script> $(function () {   $('[data-toggle="tooltip"]').tooltip() }) </script> Tooltip Buttons Follow the below example to create a tooltip with button element, <div class="container">   <h3>     <a href="https://primestudyhub.blogspot.com/search/label/Bootstrap%204" tar...