{"id":36037,"date":"2021-07-06T11:15:00","date_gmt":"2021-07-06T05:45:00","guid":{"rendered":"https:\/\/www.mygreatlearning.com\/blog\/ngx-bootstrap\/"},"modified":"2024-04-30T17:03:35","modified_gmt":"2024-04-30T11:33:35","slug":"ngx-bootstrap","status":"publish","type":"post","link":"https:\/\/www.mygreatlearning.com\/blog\/ngx-bootstrap\/","title":{"rendered":"NGX Bootstrap - Everything you Need to Know"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"ngx-bootstrap-and-its-usage\"><strong>NGX Bootstrap and its usage<\/strong><\/h2>\n\n\n\n<p>So, let\u2019s start with what exactly is ngx bootstrap?<\/p>\n\n\n\n<p>The Ngx-Bootstrap is one of the very popular libraries that is required to use bootstrap components in Angular Based projects. It consists of almost all core components of Bootstrap.&nbsp;<\/p>\n\n\n\n<p>Ngx bootstrap is an open-source tool. It is an independent project, and the development is still ongoing. The original JavaScript component can be excluded, and just the markup and CSS framework provided by Bootstrap can be used in the projects.<\/p>\n\n\n\n<p>The components of ngx-bootstrap are known to be modular, extensible, and adaptable.&nbsp;<\/p>\n\n\n\n<p>The key highlighting points of the bootstrap library that make it popular are:<\/p>\n\n\n\n<p><strong>Flexibility<\/strong><\/p>\n\n\n\n<p>All components of ngx bootstrap are modular by design. Therefore, one can very easily apply the custom templates, styles.<\/p>\n\n\n\n<p>The components are also extensible and adaptable. Moreover, it works on desktop and mobile with the same ease and performance.<\/p>\n\n\n\n<p><strong>Support<\/strong><\/p>\n\n\n\n<p>The components of ngx bootstrap are unit tested properly, and they support the latest angular versions.<\/p>\n\n\n\n<p>To maintain code and its readability, components of ngx bootstrap uses the latest style guidelines.<\/p>\n\n\n\n<p><strong>Extensive Documentation<\/strong><\/p>\n\n\n\n<p>The components of ngx bootstrap are very well written and documented.<\/p>\n\n\n\n<p>To exhibit multiple type of functionalities, there are multiple working demos for the same.<\/p>\n\n\n\n<p><strong>Open Source<\/strong><\/p>\n\n\n\n<p>ngx-bootstrap has MIT License and is the most commonly used open source project.&nbsp;<\/p>\n\n\n\n<p>The major topics that would be covered in this article are:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Installation of NGX Bootstrap<\/strong><\/li><li><strong>Manually setting up Bootstrap<\/strong><\/li><li><strong>Building a library<\/strong><\/li><\/ul>\n\n\n\n<p>Let\u2019s discuss these topics one by one:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"installation-of-ngx-bootstrap\"><strong>Installation of NGX bootstrap<\/strong><\/h2>\n\n\n\n<p>Let\u2019s start with the installation of ngx bootstrap.<\/p>\n\n\n\n<p>There are two methods for installing ngx bootstrap.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"method-1\"><strong>Method 1<\/strong><\/h4>\n\n\n\n<p>The first method is to Install ngx-bootstrap from npm package<\/p>\n\n\n\n<p><strong><em>npm install ngx-bootstrap \u2013save<\/em><\/strong><\/p>\n\n\n\n<p>Create test component to test that bootstrap works fine with node.js:<\/p>\n\n\n\n<p>Then add necessary packages to ngmodule imports<\/p>\n\n\n\n<p><strong><em>import { TooltipModule } from 'ngx-bootstrap\/tooltip';<\/em><\/strong><\/p>\n\n\n\n<p><strong><em>&nbsp;@NgModule({<\/em><\/strong><\/p>\n\n\n\n<p><strong><em>...<\/em><\/strong><\/p>\n\n\n\n<p><strong><em>imports: [TooltipModule.forRoot(),...]<\/em><\/strong><\/p>\n\n\n\n<p><strong><em>...<\/em><\/strong><\/p>\n\n\n\n<p><strong><em>})<\/em><\/strong><\/p>\n\n\n\n<p>Then add the bootstrap styles that are required in the project&nbsp;<\/p>\n\n\n\n<p><strong>Bootstrap 3<\/strong><\/p>\n\n\n\n<p><strong><em>&lt;!-- index.html --&gt;<\/em><\/strong><\/p>\n\n\n\n<p><strong><em>&lt;link href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\" rel=\"stylesheet\"&gt;<\/em><\/strong><\/p>\n\n\n\n<p><strong>Bootstrap 4<\/strong><\/p>\n\n\n\n<p><strong><em>&lt;!--- index.html --&gt;<\/em><\/strong><\/p>\n\n\n\n<p><strong><em>&lt;link href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0\/css\/bootstrap.min.css\" rel=\"stylesheet\"&gt;<\/em><\/strong><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"method-2\"><strong>Method 2<\/strong><\/h4>\n\n\n\n<p>First let us see how we can install Angular CLI. Below are the commands:<\/p>\n\n\n\n<p>There is another method to install ngx-boostrap, that is through Angular CLI <strong><em>ng add<\/em><\/strong> command.<\/p>\n\n\n\n<p><strong><em>ng add<\/em><\/strong> command updates the Angular project with the necessary ngx-bootstrap dependencies It make changes to package.json, angular.json and also executes initialization code.<\/p>\n\n\n\n<p><strong><em>ng add ngx-bootstrap&nbsp;<\/em><\/strong><\/p>\n\n\n\n<p><strong><em>ng add ngx-bootstrap&nbsp; --component componentName<\/em><\/strong><\/p>\n\n\n\n<p><strong>ng add <\/strong>download dependencies for ngx-bootstrap using the package manager. Then, it invokes an installation script (implemented as a schematic) that updates the project and adds additional dependencies (for example, styles).<\/p>\n\n\n\n<p>Below is the list of possible commands that is required for adding appropriate component<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong><em>ng add<\/em><\/strong><em> ngx-bootstrap&nbsp; --component accordion<\/em><\/p>\n\n\n\n<p><em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/em><strong><em>ng add<\/em><\/strong><em> ngx-bootstrap&nbsp; --component alerts<\/em><\/p>\n\n\n\n<p><em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/em><strong><em>ng add<\/em><\/strong><em> ngx-bootstrap&nbsp; --component buttons<\/em><\/p>\n\n\n\n<p><em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/em><strong><em>ng add<\/em><\/strong><em> ngx-bootstrap&nbsp; --component carousel<\/em><\/p>\n\n\n\n<p><em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/em><strong><em>ng add <\/em><\/strong><em>ngx-bootstrap&nbsp; --component collapse<\/em><\/p>\n\n\n\n<p><em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/em><strong><em>ng add<\/em><\/strong><em> ngx-bootstrap&nbsp; --component datepicker<\/em><\/p>\n\n\n\n<p><em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/em><strong><em>ng add<\/em><\/strong><em> ngx-bootstrap&nbsp; --component dropdowns<\/em><\/p>\n\n\n\n<p><em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/em><strong><em>ng add<\/em><\/strong><em> ngx-bootstrap&nbsp; --component modals<\/em><\/p>\n\n\n\n<p><em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/em><strong><em>ng add<\/em><\/strong><em> ngx-bootstrap&nbsp; --component pagination<\/em><\/p>\n\n\n\n<p><em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/em><strong><em>ng add<\/em><\/strong><em> ngx-bootstrap&nbsp; --component popover<\/em><\/p>\n\n\n\n<p><em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/em><strong><em>ng add<\/em><\/strong><em> ngx-bootstrap&nbsp; --component progressbar<\/em><\/p>\n\n\n\n<p><em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/em><strong><em>ng add<\/em><\/strong><em> ngx-bootstrap&nbsp; --component rating<\/em><\/p>\n\n\n\n<p><em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/em><strong><em>ng add<\/em><\/strong><em> ngx-bootstrap&nbsp; --component sortable<\/em><\/p>\n\n\n\n<p><em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/em><strong><em>ng add<\/em><\/strong><em> ngx-bootstrap&nbsp; --component tabs<\/em><\/p>\n\n\n\n<p><em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/em><strong><em>ng add<\/em><\/strong><em> ngx-bootstrap&nbsp; --component timepicker<\/em><\/p>\n\n\n\n<p><em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/em><strong><em>ng add<\/em><\/strong><em> ngx-bootstrap&nbsp; --component tooltip<\/em><\/p>\n\n\n\n<p><em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/em><strong><em>ng add<\/em><\/strong><em> ngx-bootstrap&nbsp; --component typeahead<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"manually-setting-up-ngx-bootstrap\"><strong>Manually Setting Up NGX Bootstrap<\/strong><\/h2>\n\n\n\n<p>It can happen that sometimes the project may contain some library that could interfere with the bootstrap framework, or there is a customized version of bootstrap in the project.&nbsp;<\/p>\n\n\n\n<p>As a result, in the process of determining bootstrap version there may be failure, which can result in breaking of the UI.&nbsp;<\/p>\n\n\n\n<p>In this scenario, we can set the bootstrap version manually in the bootstrapping component using AppComponent code.<\/p>\n\n\n\n<p><strong><em>import { setTheme } from 'ngx-bootstrap\/utils';<\/em><\/strong><\/p>\n\n\n\n<p><strong><em>@Component({...})<\/em><\/strong><\/p>\n\n\n\n<p><strong><em>export class AppComponent {<\/em><\/strong><\/p>\n\n\n\n<p><strong><em>&nbsp;&nbsp;constructor() {<\/em><\/strong><\/p>\n\n\n\n<p><strong><em>&nbsp;&nbsp;&nbsp;&nbsp;setTheme('bs3'); \/\/ or 'bs4'<\/em><\/strong><\/p>\n\n\n\n<p><strong><em>&nbsp;&nbsp;&nbsp;&nbsp;...<\/em><\/strong><\/p>\n\n\n\n<p><strong><em>&nbsp;&nbsp;}<\/em><\/strong><\/p>\n\n\n\n<p><strong><em>}<\/em><\/strong><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Now, let\u2019s move on to how to build the library<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"building-the-library\"><strong>Building the Library<\/strong><\/h2>\n\n\n\n<p>While building the library for the first time, the below steps can be followed<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>clone repository<\/li><li>npm install<\/li><li>npm run build<\/li><\/ol>\n\n\n\n<p>Below mentioned codes can be used to update the fork and prepare it for local usage<\/p>\n\n\n\n<p><strong><em>git pull upstream development<\/em><\/strong><\/p>\n\n\n\n<p><strong><em>rm -rf node_modules<\/em><\/strong><\/p>\n\n\n\n<p><strong><em>npm install<\/em><\/strong><\/p>\n\n\n\n<p><strong><em>npm run build<\/em><\/strong><\/p>\n\n\n\n<p>Users can run the demo using below code:<\/p>\n\n\n\n<p><strong><em>npm run demo.serve<\/em><\/strong> \/\/ to serve local demo. This is meant for testing only and without watchers.<\/p>\n\n\n\n<p>If the user wants to run local development, the following codes can be used:<\/p>\n\n\n\n<p><strong><em>npm run build.watch<\/em><\/strong> \/\/ to be executed in first terminal<\/p>\n\n\n\n<p><strong><em>ng serve<\/em><\/strong> \/\/ to be executed in the first terminal. Once the server is up, the following output is displayed.<\/p>\n\n\n\n<p>If the user wish to run demo using Angular universe, below code can be used:<\/p>\n\n\n\n<p><strong><em>npm run demo.serve-universal<\/em><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"compatibility\"><strong>Compatibility<\/strong><\/h2>\n\n\n\n<p>The version compatibility of Angular and Bootstrap CSS is as below<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>ngx-bootstrap<\/strong><\/td><td><strong>Angular<\/strong><\/td><td><strong>Bootstrap CSS<\/strong><\/td><\/tr><tr><td><strong>6.0.0<\/strong><\/td><td><strong>9.x.x - 10.x.x<\/strong><\/td><td><strong>3.x.x or 4.x.x<\/strong><\/td><\/tr><tr><td><strong>5.6.x<\/strong><\/td><td><strong>7.x.x - 9.1.0<\/strong><\/td><td><strong>3.x.x or 4.x.x<\/strong><\/td><\/tr><tr><td><strong>5.0.0 - 5.6.0<\/strong><\/td><td><strong>7.x.x - 8.x.x<\/strong><\/td><td><strong>3.x.x or 4.x.x<\/strong><\/td><\/tr><tr><td><strong>4.x.x<\/strong><\/td><td><strong>6.x.x - 7.x.x<\/strong><\/td><td><strong>3.x.x or 4.x.x<\/strong><\/td><\/tr><tr><td><strong>3.x.x<\/strong><\/td><td><strong>6.x.x - 7.x.x<\/strong><\/td><td><strong>3.x.x or 4.x.x<\/strong><\/td><\/tr><tr><td><strong>2.x.x<\/strong><\/td><td><strong>2.x.x - 4.x.x<\/strong><\/td><td><strong>3.x.x or 4.x.x<\/strong><\/td><\/tr><tr><td><strong>1.x.x<\/strong><\/td><td><strong>2.x.x<\/strong><\/td><td><strong>3.x.x or 4.x.x<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Now we have fair idea about ngx-bootstrap, installation, its components. Let\u2019s go deep into the components of ngx-bootstrap.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><strong><em><a href=\"https:\/\/www.mygreatlearning.com\/academy\/learn-for-free\/courses\/bootstrap-in-hindi\">Also, now you can learn all basic fundamentals of bootstrap in hindi with free online course <\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ngx-bootstrap-components\"><strong>NGX Bootstrap Components<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>ngx bootstrap Accordion<\/strong><\/li><\/ol>\n\n\n\n<p>This component is used if a user wants to display the collapsible content panels for presenting information in a limited amount of space.<\/p>\n\n\n\n<p><strong>TEMPLATE<\/strong><\/p>\n\n\n\n<p><strong>COMPONENT<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li><strong>ngx Bootstrap Alert<\/strong><\/li><\/ol>\n\n\n\n<p>It is used to display alert messages or feedback from users.<\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li><strong>ngx Bootstrap Carasoul<\/strong><\/li><\/ol>\n\n\n\n<p>It is used to show images or tests in the form of the slide show.<\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\"><li><strong>ngx Bootstrap datepicker<\/strong><\/li><\/ol>\n\n\n\n<p>It adds date picker functionality to the webpage that the user has created.<\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"5\"><li><strong>ngx Bootstrap dropdown<\/strong><\/li><\/ol>\n\n\n\n<p>This component is used to display dropdown list.<\/p>\n\n\n\n<p>There are other components also that are supported by ngx bootstrap ( captured above). So keep trying and practicing the components to learn how vast ngx-bootstrap is. We hope that you found this helpful. If you wish to learn more such concepts, join&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.mygreatlearning.com\/academy\/learn-for-free\/courses\/spark-basics\" target=\"_blank\">Great Learning Academy\u2019s Free Online Courses<\/a>&nbsp;and upskill today.<\/p>\n\n\n\n<p>Happy Learning!!!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>NGX Bootstrap and its usage So, let\u2019s start with what exactly is ngx bootstrap? The Ngx-Bootstrap is one of the very popular libraries that is required to use bootstrap components in Angular Based projects. It consists of almost all core components of Bootstrap.&nbsp; Ngx bootstrap is an open-source tool. It is an independent project, and [&hellip;]<\/p>\n","protected":false},"author":41,"featured_media":36038,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[25860],"tags":[],"content_type":[],"class_list":["post-36037","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>NGX Bootstrap for Web Development | Great Learning<\/title>\n<meta name=\"description\" content=\"NGX Bootstrap for Web Development: The Ngx-Bootstrap is one of the very popular libraries that is required to use bootstrap components in Angular Based projects.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.mygreatlearning.com\/blog\/ngx-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"NGX Bootstrap - Everything you Need to Know\" \/>\n<meta property=\"og:description\" content=\"NGX Bootstrap for Web Development: The Ngx-Bootstrap is one of the very popular libraries that is required to use bootstrap components in Angular Based projects.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mygreatlearning.com\/blog\/ngx-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"Great Learning Blog: Free Resources what Matters to shape your Career!\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/GreatLearningOfficial\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-06T05:45:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-30T11:33:35+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/06\/shutterstock_1712820076.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"667\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Great Learning Editorial Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/Great_Learning\" \/>\n<meta name=\"twitter:site\" content=\"@Great_Learning\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Great Learning Editorial Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/ngx-bootstrap\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/ngx-bootstrap\\\/\"},\"author\":{\"name\":\"Great Learning Editorial Team\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/person\\\/6f993d1be4c584a335951e836f2656ad\"},\"headline\":\"NGX Bootstrap - Everything you Need to Know\",\"datePublished\":\"2021-07-06T05:45:00+00:00\",\"dateModified\":\"2024-04-30T11:33:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/ngx-bootstrap\\\/\"},\"wordCount\":1257,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/ngx-bootstrap\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/shutterstock_1712820076.jpg\",\"articleSection\":[\"IT\\\/Software Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/ngx-bootstrap\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/ngx-bootstrap\\\/\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/ngx-bootstrap\\\/\",\"name\":\"NGX Bootstrap for Web Development | Great Learning\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/ngx-bootstrap\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/ngx-bootstrap\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/shutterstock_1712820076.jpg\",\"datePublished\":\"2021-07-06T05:45:00+00:00\",\"dateModified\":\"2024-04-30T11:33:35+00:00\",\"description\":\"NGX Bootstrap for Web Development: The Ngx-Bootstrap is one of the very popular libraries that is required to use bootstrap components in Angular Based projects.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/ngx-bootstrap\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/ngx-bootstrap\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/ngx-bootstrap\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/shutterstock_1712820076.jpg\",\"contentUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/shutterstock_1712820076.jpg\",\"width\":1000,\"height\":667,\"caption\":\"NGX Bootstrap\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/ngx-bootstrap\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"IT\\\/Software Development\",\"item\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/software\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"NGX Bootstrap &#8211; Everything you Need to Know\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\",\"name\":\"Great Learning Blog\",\"description\":\"Learn, Upskill &amp; Career Development Guide and Resources\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\"},\"alternateName\":\"Great Learning\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\",\"name\":\"Great Learning\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/GL-Logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/GL-Logo.jpg\",\"width\":900,\"height\":900,\"caption\":\"Great Learning\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/GreatLearningOfficial\\\/\",\"https:\\\/\\\/x.com\\\/Great_Learning\",\"https:\\\/\\\/www.instagram.com\\\/greatlearningofficial\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/school\\\/great-learning\\\/\",\"https:\\\/\\\/in.pinterest.com\\\/greatlearning12\\\/\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/beaconelearning\\\/\"],\"description\":\"Great Learning is a leading global ed-tech company for professional training and higher education. It offers comprehensive, industry-relevant, hands-on learning programs across various business, technology, and interdisciplinary domains driving the digital economy. These programs are developed and offered in collaboration with the world's foremost academic institutions.\",\"email\":\"info@mygreatlearning.com\",\"legalName\":\"Great Learning Education Services Pvt. Ltd\",\"foundingDate\":\"2013-11-29\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"1001\",\"maxValue\":\"5000\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/person\\\/6f993d1be4c584a335951e836f2656ad\",\"name\":\"Great Learning Editorial Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/unnamed.webp\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/unnamed.webp\",\"contentUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/unnamed.webp\",\"caption\":\"Great Learning Editorial Team\"},\"description\":\"The Great Learning Editorial Staff includes a dynamic team of subject matter experts, instructors, and education professionals who combine their deep industry knowledge with innovative teaching methods. Their mission is to provide learners with the skills and insights needed to excel in their careers, whether through upskilling, reskilling, or transitioning into new fields.\",\"sameAs\":[\"https:\\\/\\\/www.mygreatlearning.com\\\/\",\"https:\\\/\\\/in.linkedin.com\\\/school\\\/great-learning\\\/\",\"https:\\\/\\\/x.com\\\/https:\\\/\\\/twitter.com\\\/Great_Learning\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCObs0kLIrDjX2LLSybqNaEA\"],\"award\":[\"Best EdTech Company of the Year 2024\",\"Education Economictimes Outstanding Education\\\/Edtech Solution Provider of the Year 2024\",\"Leading E-learning Platform 2024\"],\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/author\\\/greatlearning\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"NGX Bootstrap for Web Development | Great Learning","description":"NGX Bootstrap for Web Development: The Ngx-Bootstrap is one of the very popular libraries that is required to use bootstrap components in Angular Based projects.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.mygreatlearning.com\/blog\/ngx-bootstrap\/","og_locale":"en_US","og_type":"article","og_title":"NGX Bootstrap - Everything you Need to Know","og_description":"NGX Bootstrap for Web Development: The Ngx-Bootstrap is one of the very popular libraries that is required to use bootstrap components in Angular Based projects.","og_url":"https:\/\/www.mygreatlearning.com\/blog\/ngx-bootstrap\/","og_site_name":"Great Learning Blog: Free Resources what Matters to shape your Career!","article_publisher":"https:\/\/www.facebook.com\/GreatLearningOfficial\/","article_published_time":"2021-07-06T05:45:00+00:00","article_modified_time":"2024-04-30T11:33:35+00:00","og_image":[{"width":1000,"height":667,"url":"http:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/06\/shutterstock_1712820076.jpg","type":"image\/jpeg"}],"author":"Great Learning Editorial Team","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/Great_Learning","twitter_site":"@Great_Learning","twitter_misc":{"Written by":"Great Learning Editorial Team","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.mygreatlearning.com\/blog\/ngx-bootstrap\/#article","isPartOf":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/ngx-bootstrap\/"},"author":{"name":"Great Learning Editorial Team","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/person\/6f993d1be4c584a335951e836f2656ad"},"headline":"NGX Bootstrap - Everything you Need to Know","datePublished":"2021-07-06T05:45:00+00:00","dateModified":"2024-04-30T11:33:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/ngx-bootstrap\/"},"wordCount":1257,"commentCount":0,"publisher":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/ngx-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/06\/shutterstock_1712820076.jpg","articleSection":["IT\/Software Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.mygreatlearning.com\/blog\/ngx-bootstrap\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.mygreatlearning.com\/blog\/ngx-bootstrap\/","url":"https:\/\/www.mygreatlearning.com\/blog\/ngx-bootstrap\/","name":"NGX Bootstrap for Web Development | Great Learning","isPartOf":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/ngx-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/ngx-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/06\/shutterstock_1712820076.jpg","datePublished":"2021-07-06T05:45:00+00:00","dateModified":"2024-04-30T11:33:35+00:00","description":"NGX Bootstrap for Web Development: The Ngx-Bootstrap is one of the very popular libraries that is required to use bootstrap components in Angular Based projects.","breadcrumb":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/ngx-bootstrap\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mygreatlearning.com\/blog\/ngx-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mygreatlearning.com\/blog\/ngx-bootstrap\/#primaryimage","url":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/06\/shutterstock_1712820076.jpg","contentUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/06\/shutterstock_1712820076.jpg","width":1000,"height":667,"caption":"NGX Bootstrap"},{"@type":"BreadcrumbList","@id":"https:\/\/www.mygreatlearning.com\/blog\/ngx-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.mygreatlearning.com\/blog\/"},{"@type":"ListItem","position":2,"name":"IT\/Software Development","item":"https:\/\/www.mygreatlearning.com\/blog\/software\/"},{"@type":"ListItem","position":3,"name":"NGX Bootstrap &#8211; Everything you Need to Know"}]},{"@type":"WebSite","@id":"https:\/\/www.mygreatlearning.com\/blog\/#website","url":"https:\/\/www.mygreatlearning.com\/blog\/","name":"Great Learning Blog","description":"Learn, Upskill &amp; Career Development Guide and Resources","publisher":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization"},"alternateName":"Great Learning","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mygreatlearning.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization","name":"Great Learning","url":"https:\/\/www.mygreatlearning.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/06\/GL-Logo.jpg","contentUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/06\/GL-Logo.jpg","width":900,"height":900,"caption":"Great Learning"},"image":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/GreatLearningOfficial\/","https:\/\/x.com\/Great_Learning","https:\/\/www.instagram.com\/greatlearningofficial\/","https:\/\/www.linkedin.com\/school\/great-learning\/","https:\/\/in.pinterest.com\/greatlearning12\/","https:\/\/www.youtube.com\/user\/beaconelearning\/"],"description":"Great Learning is a leading global ed-tech company for professional training and higher education. It offers comprehensive, industry-relevant, hands-on learning programs across various business, technology, and interdisciplinary domains driving the digital economy. These programs are developed and offered in collaboration with the world's foremost academic institutions.","email":"info@mygreatlearning.com","legalName":"Great Learning Education Services Pvt. Ltd","foundingDate":"2013-11-29","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"1001","maxValue":"5000"}},{"@type":"Person","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/person\/6f993d1be4c584a335951e836f2656ad","name":"Great Learning Editorial Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/02\/unnamed.webp","url":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/02\/unnamed.webp","contentUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/02\/unnamed.webp","caption":"Great Learning Editorial Team"},"description":"The Great Learning Editorial Staff includes a dynamic team of subject matter experts, instructors, and education professionals who combine their deep industry knowledge with innovative teaching methods. Their mission is to provide learners with the skills and insights needed to excel in their careers, whether through upskilling, reskilling, or transitioning into new fields.","sameAs":["https:\/\/www.mygreatlearning.com\/","https:\/\/in.linkedin.com\/school\/great-learning\/","https:\/\/x.com\/https:\/\/twitter.com\/Great_Learning","https:\/\/www.youtube.com\/channel\/UCObs0kLIrDjX2LLSybqNaEA"],"award":["Best EdTech Company of the Year 2024","Education Economictimes Outstanding Education\/Edtech Solution Provider of the Year 2024","Leading E-learning Platform 2024"],"url":"https:\/\/www.mygreatlearning.com\/blog\/author\/greatlearning\/"}]}},"uagb_featured_image_src":{"full":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/06\/shutterstock_1712820076.jpg",1000,667,false],"thumbnail":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/06\/shutterstock_1712820076-150x150.jpg",150,150,true],"medium":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/06\/shutterstock_1712820076-300x200.jpg",300,200,true],"medium_large":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/06\/shutterstock_1712820076-768x512.jpg",768,512,true],"large":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/06\/shutterstock_1712820076.jpg",1000,667,false],"1536x1536":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/06\/shutterstock_1712820076.jpg",1000,667,false],"2048x2048":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/06\/shutterstock_1712820076.jpg",1000,667,false],"web-stories-poster-portrait":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/06\/shutterstock_1712820076-640x667.jpg",640,667,true],"web-stories-publisher-logo":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/06\/shutterstock_1712820076-96x96.jpg",96,96,true],"web-stories-thumbnail":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/06\/shutterstock_1712820076-150x100.jpg",150,100,true]},"uagb_author_info":{"display_name":"Great Learning Editorial Team","author_link":"https:\/\/www.mygreatlearning.com\/blog\/author\/greatlearning\/"},"uagb_comment_info":0,"uagb_excerpt":"NGX Bootstrap and its usage So, let\u2019s start with what exactly is ngx bootstrap? The Ngx-Bootstrap is one of the very popular libraries that is required to use bootstrap components in Angular Based projects. It consists of almost all core components of Bootstrap.&nbsp; Ngx bootstrap is an open-source tool. It is an independent project, and&hellip;","_links":{"self":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/posts\/36037","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/comments?post=36037"}],"version-history":[{"count":8,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/posts\/36037\/revisions"}],"predecessor-version":[{"id":108452,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/posts\/36037\/revisions\/108452"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/media\/36038"}],"wp:attachment":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/media?parent=36037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/categories?post=36037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/tags?post=36037"},{"taxonomy":"content_type","embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/content_type?post=36037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}