Bootstrap 5, the latest major version of the world\u2019s most popular front-end framework, represents a significant leap forward in how developers build responsive, mobile-first websites. Released in 2021, it dropped jQuery entirely and embraced vanilla JavaScript, modern CSS features like custom properties, and a revamped utility API that makes customizing themes faster than ever. Whether you are a seasoned developer looking to upgrade your workflow or a complete beginner eager to learn a robust framework, this tutorial will guide you through every critical aspect of using Bootstrap 5 effectively. By the end of this guide, you will not only know how to install and configure Bootstrap but also how to leverage its grid system, components, utilities, and customization options to create production-ready interfaces with minimal effort. We will cover real-world scenarios, best practices, and common pitfalls so that you can avoid mistakes and ship faster. This is not a superficial overview; we will dive deep into the file structure, the JavaScript plugins, and the theming capabilities that set Bootstrap 5 apart from its predecessors. Let\u2019s begin this journey toward mastery of one of the most essential tools in modern web development.<\/p>\n
Before we jump into code, it is important to understand why Bootstrap 5 matters in today\u2019s ecosystem. With the rise of component libraries like Tailwind CSS and Material UI, some developers questioned whether Bootstrap was still relevant. The answer is a resounding yes. Bootstrap 5 remains the go-to choice for teams that need a complete, comprehensive system that includes not only CSS but also JavaScript components such as modals, tooltips, carousels, and off-canvas menus. Its grid system is still one of the most intuitive and flexible ways to create responsive layouts, and the utility classes have been expanded to rival those of utility-first frameworks. Furthermore, Bootstrap 5\u2019s theming capabilities allow you to override SASS variables and build truly unique designs without fighting the framework. In this tutorial, we will start from the very basics of installation, move on to mastering the grid, explore the most commonly used components, and finish with advanced customization. Each section will be accompanied by practical code examples and explanatory notes so you can immediately apply the knowledge to your own projects. Ready? Let\u2019s install Bootstrap 5 and build something amazing.<\/p>\n
<\/p>\n
Bootstrap 5 offers multiple ways to include it in your project, and the method you choose depends on your workflow and whether you want to customize the source files. The simplest approach is to use the Bootstrap CDN, which involves adding a few lines of HTML code to your document. For most static websites or quick prototypes, this is the fastest route. You will need to include both the CSS file (typically The grid system in Bootstrap 5 is built with flexbox and a 12-column layout, allowing you to create complex responsive designs with very little code. The key concept is the container, row, and column hierarchy. You start with a Bootstrap 5 ships with dozens of pre-built components that you can copy and paste into your HTML, reducing development time dramatically. The navigation bar ( Forms are central to almost every web application, and Bootstrap 5 provides a consistent, clean styling for all input elements. The framework uses Bootstrap 5\u2019s utility API is incredibly rich and is one of the best reasons to adopt the framework. You can control spacing (margin and padding) with classes like One of the most compelling reasons to use Bootstrap 5 is the ease of customization through SASS. Instead of overriding default styles with messy CSS, you can change the framework\u2019s core variables\u2014like primary color, border radius, breakpoints, and font families\u2014before the CSS is compiled. To do this, you need to set up a SASS compilation pipeline (e.g., with Vite or Webpack). Install Bootstrap via npm, then create a One of the biggest mistakes beginners make is writing custom CSS for things that Bootstrap already provides as utility classes. For example, instead of writing Bootstrap 5\u2019s JavaScript plugins are initialized automatically via data attributes, but sometimes you need to control them programmatically. Learn the different methods: for example, The official Bootstrap documentation (getbootstrap.com) is one of the best in the industry, complete with live examples, code snippets, and browser support tables. Whenever you are unsure about a component\u2019s behavior or available variables, consult the docs first. The \u201cBuilt with Bootstrap\u201d gallery and the \u201cExamples\u201d section provide real-world templates that you can adapt. Additionally, many community forums like Stack Overflow and Bootstrap\u2019s GitHub discussions are active and helpful. Don\u2019t reinvent the wheel\u2014if you need a gallery, an e-commerce product grid, or a dashboard layout, the documentation likely has a starting point. Furthermore, use the When you build a production site, you rarely need every single Bootstrap component. Using a tool like PurgeCSS (which can be integrated with your build tool) will scan your HTML and remove unused CSS classes, dramatically reducing your file size. Similarly, if you use a bundler, import only the JavaScript plugins you need. For example, if you only use modals and tooltips, import only those files instead of the entire No, Bootstrap 5 is generally faster than Bootstrap 4 for several reasons. It removed jQuery, which reduces initial load time and improves JavaScript performance. The CSS is leaner due to the removal of redundant patterns (e.g., no more Yes, absolutely. Bootstrap 5 is framework-agnostic, meaning you can use it with any JavaScript library or framework. However, note that Bootstrap\u2019s JavaScript plugins manipulate the DOM directly, which can conflict with React\u2019s virtual DOM. For this reason, many developers prefer to use React-Bootstrap or Reactstrap\u2014libraries that reimplement Bootstrap components as React components. For Vue, there is BootstrapVue (though it targets Bootstrap 4) and for Bootstrap 5 you can use the Creating a sticky footer (a footer that sticks to the bottom of the viewport when content is short) is straightforward with Bootstrap 5\u2019s flex utilities. Use a If you need to disable certain responsive features (e.g., make the grid non-responsive), you can customize the SASS variables by setting Bootstrap 5 is not just a CSS framework; it is a comprehensive design system that can radically accelerate your web development workflow. Throughout this tutorial, we have covered everything from the initial installation and the indispensable grid system to the rich library of components, forms, utilities, and advanced SASS customization. By now, you should feel confident enough to start building responsive, accessible, and visually appealing websites with minimal friction. Remember that the key to mastering Bootstrap is practice: build small projects like a personal portfolio, a landing page, or a dashboard. Explore the documentation frequently, and do not hesitate to modify the framework to suit your brand\u2019s needs. As you gain experience, you will learn to combine utility classes with components in creative ways, reducing the amount of custom CSS you write to almost nothing. The community around Bootstrap is vast and supportive, so you are never alone in your journey. Keep pushing the boundaries of what you can create, and let Bootstrap 5 be the solid foundation upon which you build your next great web project. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":" Getting Started with Bootstrap 5: A Comprehensive Step-by-Step Tutorial for Modern Web Developers Bootstrap 5, the latest major version of the world\u2019s most popular front-end framework, represents a significant leap forward in how developers build responsive, mobile-first websites. Released in 2021, it dropped jQuery entirely and embraced vanilla JavaScript, modern CSS features like custom properties, … <\/p>\n","protected":false},"author":2716,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[],"tags":[],"class_list":["post-970","post","type-post","status-publish","format-standard","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/posts\/970","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/users\/2716"}],"replies":[{"embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/comments?post=970"}],"version-history":[{"count":0,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/posts\/970\/revisions"}],"wp:attachment":[{"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/media?parent=970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/categories?post=970"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/tags?post=970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}bootstrap.min.css<\/code>) and the JavaScript bundle (bootstrap.bundle.min.js<\/code>), which includes Popper.js for tooltip and popover positioning. Place the CSS link inside the <head><\/code> tag and the JavaScript bundle just before the closing <\/body><\/code> tag. This method requires no build tools, making it ideal for beginners. However, if you want to customize Bootstrap\u2019s variables or use its SASS source files, you should install it via npm or yarn. For example, running npm install bootstrap@5.3.3<\/code> (using the latest version) gives you access to the \/scss<\/code> folder, which you can import into your own SASS files. You will also need a bundler like Webpack, Vite, or Parcel to compile the SASS into CSS. Another option is to download the compiled files manually from the official website. In this step, we will demonstrate both the CDN and npm methods, including how to set up a simple Vite project from scratch. The CDN method is perfect for learning and small projects, while the npm method is essential for larger, customizable applications. We will also discuss how to verify the installation by checking the browser console for any errors and ensuring that the framework\u2019s classes are being applied correctly to simple HTML elements.<\/p>\nStep 2: Mastering the Bootstrap 5 Grid System \u2013 The Foundation of Responsive Layouts<\/h2>\n
.container<\/code> (which has a fixed max-width at different breakpoints) or .container-fluid<\/code> (which spans the full width of the viewport). Inside the container, you use .row<\/code> to create a horizontal group of columns, and inside rows you place .col-*<\/code> elements. For example, <div class=\"col-6\"><\/div><\/code> will occupy half of the row (6 out of 12 columns). Bootstrap 5 introduces five responsive breakpoints: xs (default, <576px), sm (\u2265576px), md (\u2265768px), lg (\u2265992px), xl (\u22651200px), and xxl (\u22651400px). You can apply breakpoint-specific column classes like .col-md-4<\/code> to control layout at different screen sizes. For instance, <div class=\"col-12 col-md-6 col-lg-4\"><\/code> will stack vertically on small screens (full width), become two columns on medium screens, and three columns on large screens. Additionally, you can use .row-cols-*<\/code> classes to set the number of columns in a row without explicitly defining column classes on each child. Alignment and ordering are also handled via flexbox utilities like .justify-content-center<\/code>, .align-items-start<\/code>, and .order-*<\/code>. In this step, we will build a three-column layout with a sidebar, a main content area, and an extra widget, all fully responsive. We will also cover nested grids, gutters (via .g-*<\/code> classes), and offset columns (.offset-md-2<\/code>) to push elements. A thorough understanding of the grid is crucial because it underpins every responsive design you create with Bootstrap.<\/p>\nStep 3: Utilizing Key Bootstrap 5 Components \u2013 From Navbars to Modals<\/h2>\n
.navbar<\/code>) is one of the most versatile components. It supports branding, togglers (hamburger menu on mobile), dropdowns, and search forms. To make it responsive, you wrap the collapsible content inside a .collapse<\/code> div with an id, and attach a button with data-bs-toggle=\"collapse\"<\/code> and data-bs-target=\"#navbarID\"<\/code>. Buttons themselves come in many styles: .btn-primary<\/code>, .btn-outline-success<\/code>, .btn-lg<\/code>, and .btn-block<\/code> (though in Bootstrap 5, .btn-block<\/code> is deprecated; use .w-100<\/code> instead). Cards (.card<\/code>) have replaced panels and wells from previous versions, and they can contain images, headers, footers, and body text. Modals are JavaScript-driven overlays that you trigger with a button or link. You define the modal structure with .modal<\/code>, .modal-dialog<\/code>, .modal-content<\/code>, and so on, then use data-bs-toggle=\"modal\"<\/code> and data-bs-target=\"#myModal\"<\/code>. Bootstrap 5\u2019s JavaScript for modals is written in vanilla JS, so you no longer need jQuery. Other important components include carousels for image sliders, tooltips and popovers for extra information, accordions for collapsible content sections, and forms (which we will cover in a dedicated step). In this section, we will build a complete landing page header with a navbar, a hero section with a modal sign-up form, and a features section using cards. We will also discuss how to customize component styles using utility classes and CSS variables. By the end, you will be comfortable stringing together multiple components to create a professional-looking layout.<\/p>\nStep 4: Styling Forms and Input Groups \u2013 Building Complex User Inputs<\/h2>\n
.form-control<\/code> for text inputs, selects, and textareas, and .form-select<\/code> for native select menus. Checkboxes and radios are styled with .form-check<\/code> and .form-check-input<\/code>, while switches are achieved by adding .form-switch<\/code> to the check container. To create inline forms, you can use .row<\/code> and .col-*<\/code> within a <form><\/code> element. Bootstrap also supports floating labels (.form-floating<\/code>), which place the label inside the input field and animate it on focus. Validation is built-in via the .was-validated<\/code> class or by using .is-invalid<\/code> and .is-valid<\/code> classes. You can display feedback messages with .invalid-feedback<\/code> and .valid-feedback<\/code>. In addition to basic form controls, Bootstrap 5 includes input groups (.input-group<\/code>) for attaching prepend or append text\/buttons to inputs, which is useful for adding currency symbols, search icons, or validation indicators. For example, <div class=\"input-group\"><span class=\"input-group-text\">$<\/span><input type=\"text\" class=\"form-control\"><\/div><\/code>. In this step, we will construct a registration form with validation, a currency input group, and a floating label for the email field. We will also discuss accessibility considerations such as using <label><\/code> elements and aria-describedby<\/code>. Mastering Bootstrap forms will allow you to build user interfaces that are both functional and aesthetically pleasing without writing custom CSS.<\/p>\nStep 5: Working with Utility Classes \u2013 Spacing, Typography, and Colors<\/h2>\n
.mt-3<\/code> (margin-top of 1rem), .p-5<\/code> (padding of 3rem), and responsive variants like .m-md-0<\/code>. The spacing scale goes from 0 to 5, plus auto for centering. Typography utilities allow you to quickly set text alignment (.text-center<\/code>, .text-sm-end<\/code>), weight (.fw-bold<\/code>), transform (.text-uppercase<\/code>), and size (.fs-1<\/code> through .fs-6<\/code>). Color utility classes for text, backgrounds, borders, and buttons follow a consistent naming pattern: .text-primary<\/code>, .bg-secondary<\/code>, .border-danger<\/code>. Bootstrap 5 also includes opacity utilities (.opacity-50<\/code>) and shadows (.shadow<\/code>, .shadow-lg<\/code>). One of the most powerful new features is the .d-*<\/code> display utility, which controls the display<\/code> property per breakpoint (e.g., .d-none .d-md-block<\/code>). This allows you to show or hide elements at specific screen sizes. Additionally, the flexbox utilities (.d-flex<\/code>, .justify-content-between<\/code>, .align-items-center<\/code>) reduce the need for custom CSS. In this step, we will take a series of cards and use utility classes to layout them in a responsive grid, add shadows and rounded corners, change their background colors based on breakpoints, and adjust text sizes. We will also create a simple alert dismissible by combining utilities with a component. The goal is to demonstrate how you can achieve almost any visual effect purely by stacking utility classes, making your CSS files smaller and your workflow faster.<\/p>\nStep 6: Customizing Bootstrap 5 with SASS \u2013 Building Your Own Theme<\/h2>\n
custom.scss<\/code> file where you import Bootstrap\u2019s source and override its variables. For example, to change the primary color to a custom shade of purple, you write: $primary: #6f42c1;<\/code> before @import \"bootstrap\/scss\/bootstrap\";<\/code>. You can also use the !default<\/code> flag to ensure your variables take precedence. Additionally, Bootstrap 5 exposes many component-specific variables. For instance, $card-border-radius<\/code> changes the border radius of all cards, and $navbar-dark-color<\/code> controls the link color in dark navbars. The theming also supports generating utility classes for custom values via the $utilities<\/code> map. For example, you can add a custom spacing scale or a new color. In this step, we will walk through setting up a Vite project with Bootstrap SASS, overriding the primary and secondary color variables, customizing the font family to use a Google Font, and adjusting the grid breakpoints for a specific design system. We will also explore how to extend Bootstrap with new components using the mixin<\/code> approach. By the end, you will be able to create a completely unique theme that still benefits from Bootstrap\u2019s robust codebase, consistency, and browser support. Customization is what separates a generic Bootstrap site from a professional, branded experience.<\/p>\nBest Practices and Tips for Working with Bootstrap 5<\/h2>\n
Tip 1: Leverage the Bootstrap 5 Utility API Instead of Writing Custom CSS Everywhere<\/h3>\n
.my-element { margin-top: 1rem; }<\/code>, simply add class=\"mt-3\"<\/code>. This reduces the size of your stylesheet and makes maintenance easier because all styles are visible directly in the HTML. If you find yourself repeating the same utility pattern, consider creating a new utility class via the SASS map rather than writing a custom CSS rule. This approach keeps your codebase consistent and makes responsive behavior trivial. Additionally, use the !important<\/code> flag sparingly; utilities in Bootstrap 5 already have !important<\/code> applied, so they will override most other classes. To override utilities, you can use higher-specificity selectors or the !important<\/code> in your custom CSS only when absolutely necessary.<\/p>\nTip 2: Understand the Component JavaScript Lifecycle for Better Interactivity<\/h3>\n
var myModal = new bootstrap.Modal(document.getElementById('myModal'))<\/code> and then myModal.show()<\/code>. Understand the events each component emits (e.g., shown.bs.modal<\/code>, hidden.bs.collapse<\/code>) so you can hook into them using addEventListener<\/code>. This is especially important when integrating Bootstrap with other JavaScript frameworks like React or Vue. Also, remember that Bootstrap 5\u2019s JavaScript is built with ES6 modules; you can import specific plugins if you use a bundler to reduce file size. Always check the official documentation for component options (e.g., data-bs-backdrop=\"static\"<\/code> for modals). Mastering the JavaScript layer will allow you to create dynamic, interactive interfaces that feel native.<\/p>\nTip 3: Use the Bootstrap 5 Documentation and Examples Extensively<\/h3>\n
data-bs-*<\/code> attribute cheat sheet within your editor (many IDEs have plug-ins) to speed up development. Staying close to the source of truth will save you countless hours of debugging.<\/p>\nTip 4: Optimize Bootstrap for Production \u2013 Remove Unused CSS and JavaScript<\/h3>\n
bootstrap.bundle.js<\/code>. This practice improves page load speed and user experience. Bootstrap 5\u2019s modular structure makes tree-shaking straightforward when using ES module imports. Always test the result carefully after purging to ensure no visible regressions.<\/p>\nFrequently Asked Questions about Bootstrap 5<\/h2>\n
Q1: Is Bootstrap 5 slower than Bootstrap 4?<\/h3>\n
float<\/code> grids), and the use of CSS custom properties allows for more efficient styling. Additionally, Bootstrap 5 introduced modern grid support with flexbox, which results in fewer DOM nodes and better rendering. Benchmarks show that Bootstrap 5 pages load about 10-15% faster on average compared to Bootstrap 4, especially on mobile devices. However, performance also depends on how many components and utilities you use; you can further optimize by purging unused CSS.<\/p>\nQ2: Can I use Bootstrap 5 with React or Vue?<\/h3>\n
vue-bootstrap<\/code> package (or build your own wrappers). Alternatively, you can use Bootstrap CSS classes only and handle interactivity (modals, toggles) with your framework\u2019s own methods, thus avoiding direct DOM manipulation. The CSS utilities and grid system work seamlessly in any framework.<\/p>\nQ3: How do I create a sticky footer with Bootstrap 5?<\/h3>\n
<body><\/code> class .d-flex<\/code> and .flex-column<\/code> to make the body a flex container, then give the main content area .flex-fill<\/code> or .flex-grow-1<\/code> so it expands to fill available space. Your footer should be a <footer><\/code> with .mt-auto<\/code> to push it to the bottom. Alternatively, you can use the .sticky-bottom<\/code> class on the footer if you want it to stick at the bottom of the viewport regardless of scroll, but that behaves differently. The flexbox method is the most reliable for sticky footers.<\/p>\nQ4: What is the difference between
.container<\/code> and .container-fluid<\/code> in Bootstrap 5?<\/h3>\n.container<\/code> provides a fixed-width container that changes its max-width at each breakpoint (e.g., 540px on sm, 720px on md, 960px on lg, etc.). This creates a centered layout with margins on larger screens. .container-fluid<\/code>, on the other hand, spans the full width of the viewport at all breakpoints (always width: 100%<\/code>). You can also use responsive variants like .container-sm<\/code>, .container-md<\/code>, .container-lg<\/code>, .container-xl<\/code>, and .container-xxl<\/code> to define the container\u2019s behavior only above a specific breakpoint. For example, .container-sm<\/code> behaves like .container<\/code> on sm and up, but is fluid below sm. This gives you fine-grained control over layout width.<\/p>\nQ5: How do I disable responsive features in Bootstrap 5?<\/h3>\n
$grid-breakpoints<\/code> to a single breakpoint value or by removing all breakpoint maps. Alternatively, you can avoid using responsive classes and only use the base .col<\/code> classes without breakpoint suffixes. For components, you can override the default behavior with custom CSS. However, Bootstrap is built to be mobile-first, so disabling responsive features entirely defeats its purpose. A better approach is to adjust breakpoints to fit your design rather than removing them.<\/p>\nUseful Reference Tables for Bootstrap 5 Development<\/h2>\n
Table 1: Bootstrap 5 Grid Breakpoint Values<\/h3>\n
\n\n
\n \nBreakpoint Name<\/th>\n Class Infix<\/th>\n Min Width<\/th>\n Container Max Width<\/th>\n Typical Devices<\/th>\n<\/tr>\n<\/thead>\n \n Extra small (xs)<\/td>\n (none)<\/td>\n < 576px<\/td>\n None (auto)<\/td>\n Phones in portrait<\/td>\n<\/tr>\n \n Small (sm)<\/td>\n .col-sm-*<\/code><\/td>\n\u2265 576px<\/td>\n 540px<\/td>\n Phones in landscape<\/td>\n<\/tr>\n \n Medium (md)<\/td>\n .col-md-*<\/code><\/td>\n\u2265 768px<\/td>\n 720px<\/td>\n Tablets<\/td>\n<\/tr>\n \n Large (lg)<\/td>\n .col-lg-*<\/code><\/td>\n\u2265 992px<\/td>\n 960px<\/td>\n Desktops<\/td>\n<\/tr>\n \n Extra large (xl)<\/td>\n .col-xl-*<\/code><\/td>\n\u2265 1200px<\/td>\n 1140px<\/td>\n Large desktops<\/td>\n<\/tr>\n \n Extra extra large (xxl)<\/td>\n .col-xxl-*<\/code><\/td>\n\u2265 1400px<\/td>\n 1320px<\/td>\n Extra large screens<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Table 2: Commonly Used Bootstrap 5 Utility Classes (Spacing & Display)<\/h3>\n
\n\n
\n \nClass Pattern<\/th>\n Description<\/th>\n Example<\/th>\n<\/tr>\n<\/thead>\n \n .m{t|b|l|r|x|y}-{0-5|auto}<\/code><\/td>\nMargin side and size (e.g., t=top, x=horizontal)<\/td>\n .mt-3<\/code> (margin-top: 1rem)<\/td>\n<\/tr>\n\n .p{t|b|l|r|x|y}-{0-5}<\/code><\/td>\nPadding side and size<\/td>\n .p-md-0<\/code> (no padding on medium+)<\/td>\n<\/tr>\n\n .d-{value}<\/code> (with breakpoint)<\/td>\nDisplay property (none, block, inline, flex, etc.)<\/td>\n .d-none .d-lg-flex<\/code><\/td>\n<\/tr>\n\n .text-{color}<\/code><\/td>\nText color (primary, secondary, success, etc.)<\/td>\n .text-muted<\/code><\/td>\n<\/tr>\n\n .bg-{color}<\/code><\/td>\nBackground color<\/td>\n .bg-warning<\/code><\/td>\n<\/tr>\n\n .shadow<\/code> \/ .shadow-sm<\/code> \/ .shadow-lg<\/code><\/td>\nBox shadow effect<\/td>\n .shadow-lg<\/code><\/td>\n<\/tr>\n\n .rounded<\/code> \/ .rounded-pill<\/code><\/td>\nBorder radius<\/td>\n .rounded-circle<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nConclusion: Your Path to Bootstrap 5 Proficiency<\/h2>\n