{"id":89215,"date":"2025-07-12T23:33:42","date_gmt":"2025-07-12T16:33:42","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=89215"},"modified":"2025-07-12T23:33:44","modified_gmt":"2025-07-12T16:33:44","slug":"pagination-bootstrap-la-gi","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/","title":{"rendered":"Pagination Bootstrap l\u00e0 g\u00ec: C\u00e1ch ph\u00e2n trang hi\u1ec7u qu\u1ea3 v\u1edbi Bootstrap"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/#Pagination_la_gi\" >Pagination l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/#Loi_ich_khi_su_dung_Pagination_trong_Bootstrap\" >L\u1ee3i \u00edch khi s\u1eed d\u1ee5ng Pagination trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/#Cac_lop_va_cau_truc_Pagination_trong_Bootstrap\" >C\u00e1c l\u1edbp v\u00e0 c\u1ea5u tr\u00fac Pagination trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/#Huong_dan_theo_tac_co_ban_voi_pagination_trong_Bootstrap\" >H\u01b0\u1edbng d\u1eabn theo t\u00e1c c\u01a1 b\u1ea3n v\u1edbi pagination trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/#Huong_dan_xay_dung_pagination_voi_responsive_design\" >H\u01b0\u1edbng d\u1eabn x\u00e2y d\u1ef1ng pagination v\u1edbi responsive design<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/#Cac_cach_tuy_chinh_giao_dien_Pagination_trong_Bootstrap\" >C\u00e1c c\u00e1ch t\u00f9y ch\u1ec9nh giao di\u1ec7n Pagination trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/#So_sanh_Pagination_voi_Breadcrumb_trong_Bootstrap\" >So s\u00e1nh Pagination v\u1edbi Breadcrumb trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/#4_luu_y_quan_trong_khi_su_dung_Pagination_Bootstrap\" >4 l\u01b0u \u00fd quan tr\u1ecdng khi s\u1eed d\u1ee5ng Pagination Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/#Cac_cau_hoi_thuong_gap_ve_Pagination_Bootstrap\" >C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Pagination Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/#Tong_ket\" >T\u1ed5ng k\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n\n<p><strong><em>Khi l\u00e0m vi\u1ec7c v\u1edbi giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng, \u0111\u1eb7c bi\u1ec7t l\u00e0 c\u00e1c trang c\u00f3 d\u1eef li\u1ec7u l\u1edbn nh\u01b0 danh s\u00e1ch s\u1ea3n ph\u1ea9m, b\u1ea3ng k\u1ebft qu\u1ea3 t\u00ecm ki\u1ebfm, hay b\u00e0i vi\u1ebft blog,&#8230; th\u00ec vi\u1ec7c chia nh\u1ecf n\u1ed9i dung th\u00e0nh t\u1eebng trang (pagination) l\u00e0 \u0111i\u1ec1u c\u1ea7n thi\u1ebft. Bootstrap h\u1ed7 tr\u1ee3 b\u1ea1n th\u1ef1c hi\u1ec7n vi\u1ec7c ph\u00e2n trang n\u00e0y nhanh ch\u00f3ng v\u00e0 linh ho\u1ea1t th\u00f4ng qua component Pagination.&nbsp;<\/em><\/strong><\/p>\n\n\n\n<p>\u0110\u1ecdc b\u00e0i vi\u1ebft n\u00e0y \u0111\u1ec3 hi\u1ec3u ngay:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pagination l\u00e0 g\u00ec v\u00e0 t\u1ea1i sao n\u00ean d\u00f9ng n\u00f3?<\/li>\n\n\n\n<li>C\u1ea5u tr\u00fac c\u01a1 b\u1ea3n c\u1ee7a pagination trong Bootstrap<\/li>\n\n\n\n<li>C\u00e1ch t\u00f9y ch\u1ec9nh icon, k\u00edch th\u01b0\u1edbc, v\u1ecb tr\u00ed pagination trong Bootstrap<\/li>\n\n\n\n<li>H\u01b0\u1edbng d\u1eabn x\u00e2y d\u1ef1ng pagination v\u1edbi responsive design<\/li>\n\n\n\n<li>Khi n\u00e0o n\u00ean d\u00f9ng Breadcrumb, khi n\u00e0o d\u00f9ng Pagination?<\/li>\n\n\n\n<li>C\u00e1c l\u01b0u \u00fd quan tr\u1ecdng khi s\u1eed d\u1ee5ng pagination<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-pagination-la-gi\"><span class=\"ez-toc-section\" id=\"Pagination_la_gi\"><\/span><strong>Pagination l\u00e0 g\u00ec?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Pagination (ph\u00e2n trang) l\u00e0 c\u00e1ch chia n\u1ed9i dung l\u1edbn th\u00e0nh nhi\u1ec1u ph\u1ea7n nh\u1ecf \u0111\u1ec3 hi\u1ec3n th\u1ecb&nbsp; theo t\u1eebng trang. N\u00f3 th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 hi\u1ec3n th\u1ecb c\u00e1c danh s\u00e1ch d\u00e0i nh\u01b0: b\u00e0i vi\u1ebft, s\u1ea3n ph\u1ea9m, b\u00ecnh lu\u1eadn, k\u1ebft qu\u1ea3 t\u00ecm ki\u1ebfm,&#8230;<\/p>\n\n\n\n<p>Thay v\u00ec ph\u1ea3i t\u1ea3i t\u1ea5t c\u1ea3 d\u1eef li\u1ec7u v\u00e0 hi\u1ec3n th\u1ecb c\u00f9ng m\u1ed9t l\u00fac (g\u00e2y ch\u1eadm v\u00e0 kh\u00f3 \u0111\u1ecdc), ng\u01b0\u1eddi d\u00f9ng s\u1ebd \u0111i\u1ec1u h\u01b0\u1edbng qua c\u00e1c trang \u0111\u01b0\u1ee3c \u0111\u00e1nh s\u1ed1 nh\u01b0 1, 2, 3 ho\u1eb7c n\u00fat Next (trang k\u1ebf ti\u1ebfp) \/ Previous (trang tr\u01b0\u1edbc \u0111\u00f3).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-l\u1ee3i-ich-khi-s\u1eed-d\u1ee5ng-pagination-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Loi_ich_khi_su_dung_Pagination_trong_Bootstrap\"><\/span><strong>L\u1ee3i \u00edch khi s\u1eed d\u1ee5ng Pagination trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Bootstrap h\u1ed7 tr\u1ee3 pagination d\u01b0\u1edbi d\u1ea1ng m\u1ed9t component s\u1eb5n c\u00f3, gi\u00fap b\u1ea1n tri\u1ec3n khai ph\u00e2n trang nhanh m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft CSS th\u1ee7 c\u00f4ng. Giao di\u1ec7n m\u1eb7c \u0111\u1ecbnh \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u \u0111\u1ec3 h\u00e0i h\u00f2a v\u1edbi to\u00e0n b\u1ed9 h\u1ec7 th\u1ed1ng thi\u1ebft k\u1ebf c\u1ee7a Bootstrap.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"168\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-47.png\" alt=\"pagination bootstrap - itviec blog\" class=\"wp-image-89395\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-47.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-47-300x79.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-47-200x53.png 200w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p><em>H\u00ecnh \u1ea3nh minh h\u1ecda v\u1ec1 pagination trong Bootstrap<\/em>.<\/p>\n\n\n\n<p>Vi\u1ec7c s\u1eed d\u1ee5ng Pagination c\u1ee7a Bootstrap mang l\u1ea1i nhi\u1ec1u l\u1ee3i \u00edch nh\u01b0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Tri\u1ec3n khai nhanh<\/strong>: Bootstrap cung c\u1ea5p s\u1eb5n c\u00e1c class ti\u1ec7n \u00edch c\u00f3 s\u1eb5n, tr\u00e1nh vi\u1ebft l\u1ea1i CSS, HTML th\u1ee7 c\u00f4ng<\/li>\n\n\n\n<li><strong>Giao di\u1ec7n \u0111\u1eb9p<\/strong>: M\u1eb7c \u0111\u1ecbnh \u0111\u00e3 c\u00f3 style hi\u1ec7n \u0111\u1ea1i, nh\u1ea5t qu\u00e1n v\u1edbi phong c\u00e1ch c\u1ee7a trang web<\/li>\n\n\n\n<li><strong>D\u1ec5 tu\u1ef3 ch\u1ec9nh<\/strong>: H\u1ed7 tr\u1ee3 icon, responsive k\u00edch th\u01b0\u1edbc \u0111\u1ec3 ph\u00f9 h\u1ee3p v\u1edbi c\u00e1c lo\u1ea1i thi\u1ebft b\u1ecb<\/li>\n\n\n\n<li><strong>T\u01b0\u01a1ng th\u00edch cao<\/strong>: Ch\u1ea1y t\u1ed1t tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb, tr\u00ecnh duy\u1ec7t<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-l\u1edbp-va-c\u1ea5u-truc-pagination-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Cac_lop_va_cau_truc_Pagination_trong_Bootstrap\"><\/span><strong>C\u00e1c l\u1edbp v\u00e0 c\u1ea5u tr\u00fac Pagination trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-c\u1ea5u-truc-html-c\u01a1-b\u1ea3n\"><strong>C\u1ea5u tr\u00fac HTML c\u01a1 b\u1ea3n<\/strong><\/h3>\n\n\n\n<p>Pagination trong Bootstrap \u0111\u01b0\u1ee3c t\u1ea1o b\u1eb1ng danh s\u00e1ch kh\u00f4ng th\u1ee9 t\u1ef1 <strong><code>&lt;ul&gt;<\/code><\/strong> k\u1ebft h\u1ee3p v\u1edbi c\u00e1c m\u1ee5c danh s\u00e1ch <strong><code>&lt;li&gt;<\/code><\/strong> v\u00e0 li\u00ean k\u1ebft <strong><code>&lt;a&gt;<\/code><\/strong>. Bootstrap s\u1eed d\u1ee5ng ba class ch\u00ednh \u0111\u1ec3 x\u00e2y d\u1ef1ng pagination:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>.pagination<\/code><\/strong>: G\u1eafn v\u00e0o th\u1ebb <strong><code>&lt;ul&gt;<\/code><\/strong>, \u0111\u00e2y l\u00e0 l\u1edbp ch\u00ednh \u0111\u1ec3 \u00e1p d\u1ee5ng style ph\u00e2n trang<\/li>\n\n\n\n<li><strong><code>.page-item<\/code><\/strong>: G\u1eafn v\u00e0o t\u1eebng th\u1ebb <strong>&lt;li&gt;<\/strong>, \u0111\u00f3ng vai tr\u00f2 nh\u01b0 m\u1ed9t n\u00fat<\/li>\n\n\n\n<li><strong><code>.page-link<\/code><\/strong>: G\u1eafn v\u00e0o th\u1ebb <strong><code>&lt;a&gt;<\/code><\/strong> ho\u1eb7c <strong><code>&lt;button&gt;<\/code><\/strong> b\u00ean trong m\u1ed7i <strong><code>.page-item<\/code><\/strong>, hi\u1ec3n th\u1ecb n\u1ed9i dung s\u1ed1 trang ho\u1eb7c icon.<\/li>\n<\/ul>\n\n\n\n<p>Nh\u1eefng th\u00e0nh ph\u1ea7n n\u00e0y n\u00ean \u0111\u01b0\u1ee3c bao b\u1ecdc trong th\u1ebb <strong><code>&lt;nav&gt;<\/code><\/strong> \u0111\u1ec3 tr\u00ecnh \u0111\u1ecdc m\u00e0n h\u00ecnh nh\u1eadn di\u1ec7n \u0111\u00e2y l\u00e0 khu v\u1ef1c \u0111i\u1ec1u h\u01b0\u1edbng. Ngo\u00e0i ra, \u0111\u1ec3 t\u0103ng t\u00ednh truy c\u1eadp (accessibility), n\u00ean s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <strong><code>aria-label<\/code><\/strong> \u0111\u1ec3 m\u00f4 t\u1ea3 r\u00f5 m\u1ee5c \u0111\u00edch c\u1ee7a pagination, \u0111\u1eb7c bi\u1ec7t n\u1ebfu trang c\u00f3 nhi\u1ec1u v\u00f9ng \u0111i\u1ec1u h\u01b0\u1edbng.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 pagination c\u01a1 b\u1ea3n:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;nav aria-label=\"V\u00ed d\u1ee5 v\u1ec1 pagination\"&gt;\n       &lt;ul class=\"pagination\"&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;Tr\u01b0\u1edbc&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;1&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;2&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;3&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;4&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;5&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;Sau&lt;\/a&gt;&lt;\/li&gt;\n       &lt;\/ul&gt;\n     &lt;\/nav&gt;<\/code><\/pre>\n\n\n\n<p>Trong v\u00ed d\u1ee5 tr\u00ean:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Th\u1ebb <code>&lt;nav&gt;<\/code> \u0111\u01b0\u1ee3c g\u1eafn <strong><code>aria-label=\u201cV\u00ed d\u1ee5 v\u1ec1 pagination\u201d<\/code><\/strong> \u0111\u1ec3 h\u1ed7 tr\u1ee3 c\u00f4ng c\u1ee5 \u0111\u1ecdc m\u00e0n h\u00ecnh hi\u1ec3u r\u00f5 m\u1ee5c \u0111\u00edch \u0111i\u1ec1u h\u01b0\u1edbng<\/li>\n\n\n\n<li>M\u1ed7i n\u00fat ph\u00e2n trang l\u00e0 m\u1ed9t ph\u1ea7n t\u1eed <code>&lt;li><\/code> v\u1edbi class <strong><code>.page-item<\/code><\/strong>, bao quanh li\u00ean k\u1ebft <strong><code>.page-link<\/code><\/strong><\/li>\n\n\n\n<li>Giao di\u1ec7n m\u1eb7c \u0111\u1ecbnh c\u1ee7a Bootstrap s\u1ebd hi\u1ec3n th\u1ecb c\u00e1c n\u00fat n\u1eb1m ngang, c\u00f3 kho\u1ea3ng c\u00e1ch \u0111\u1ec1u v\u00e0 t\u01b0\u01a1ng t\u00e1c t\u1ed1t v\u1edbi chu\u1ed9t ho\u1eb7c thi\u1ebft b\u1ecb c\u1ea3m \u1ee9ng<\/li>\n<\/ul>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"346\" height=\"88\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-48.png\" alt=\"pagination bootstrap - itviec blog\" class=\"wp-image-89397\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-48.png 346w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-48-300x76.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-48-200x51.png 200w\" sizes=\"auto, (max-width: 346px) 100vw, 346px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-cac-tr\u1ea1ng-thai-d\u1eb7c-bi\u1ec7t-c\u1ee7a-ph\u1ea7n-t\u1eed-trong-pagination\"><strong>C\u00e1c tr\u1ea1ng th\u00e1i \u0111\u1eb7c bi\u1ec7t c\u1ee7a ph\u1ea7n t\u1eed trong pagination<\/strong><\/h3>\n\n\n\n<p>Bootstrap h\u1ed7 tr\u1ee3 hai tr\u1ea1ng th\u00e1i quan tr\u1ecdng trong pagination l\u00e0 active v\u00e0 disabled, gi\u00fap ng\u01b0\u1eddi d\u00f9ng nh\u1eadn bi\u1ebft trang hi\u1ec7n t\u1ea1i ho\u1eb7c c\u00e1c n\u00fat kh\u00f4ng th\u1ec3 thao t\u00e1c.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-tr\u1ea1ng-thai-active-danh-d\u1ea5u-trang-dang-d\u01b0\u1ee3c-xem\"><strong>Tr\u1ea1ng th\u00e1i active (\u0111\u00e1nh d\u1ea5u trang \u0111ang \u0111\u01b0\u1ee3c xem)<\/strong><\/h4>\n\n\n\n<p>\u0110\u1ec3 \u0111\u00e1nh d\u1ea5u trang hi\u1ec7n t\u1ea1i, b\u1ea1n th\u00eam class <strong><code>.active<\/code><\/strong> v\u00e0o ph\u1ea7n t\u1eed <strong><code>.page-item<\/code><\/strong> t\u01b0\u01a1ng \u1ee9ng. B\u00ean trong \u0111\u00f3, n\u1ebfu s\u1eed d\u1ee5ng th\u1ebb <code><strong>&lt;a&gt;<\/strong>,<\/code> n\u00ean th\u00eam thu\u1ed9c t\u00ednh <strong><code>aria-current=\u201cpage\u201d<\/code><\/strong> \u0111\u1ec3 h\u1ed7 tr\u1ee3 tr\u00ecnh \u0111\u1ecdc m\u00e0n h\u00ecnh hi\u1ec3u r\u1eb1ng \u0111\u00e2y l\u00e0 trang \u0111ang \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;nav aria-label=\"Pagination\"&gt;\n       &lt;ul class=\"pagination\"&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;Tr\u01b0\u1edbc&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;1&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item active\"&gt;\n           &lt;a class=\"page-link\" href=\"#\" aria-current=\"page\"&gt;2&lt;\/a&gt;\n         &lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;3&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;Sau&lt;\/a&gt;&lt;\/li&gt;\n       &lt;\/ul&gt;\n     &lt;\/nav&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3, trang s\u1ed1 2 \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng .active \u0111\u1ec3 \u0111\u00e1nh d\u1ea5u trang hi\u1ec7n t\u1ea1i. K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"289\" height=\"77\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-49.png\" alt=\"pagination bootstrap - itviec blog\" class=\"wp-image-89398\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-49.png 289w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-49-200x53.png 200w\" sizes=\"auto, (max-width: 289px) 100vw, 289px\" \/><\/figure>\n\n\n\n<p>Ngo\u00e0i ra, n\u1ebfu b\u1ea1n kh\u00f4ng mu\u1ed1n trang hi\u1ec7n t\u1ea1i c\u00f3 th\u1ec3 b\u1ea5m \u0111\u01b0\u1ee3c, c\u00f3 th\u1ec3 thay th\u1ebf th\u1ebb <code>&lt;a&gt;<\/code> b\u1eb1ng <code>&lt;span&gt;<\/code>, trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y, kh\u00f4ng c\u1ea7n d\u00f9ng <code>aria-current<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;li class=\"page-item active\"&gt;\n     &lt;span class=\"page-link\"&gt;2&lt;\/span&gt;\n   &lt;\/li&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-tr\u1ea1ng-thai-disabled-nut-khong-kh\u1ea3-d\u1ee5ng\"><strong>Tr\u1ea1ng th\u00e1i disabled (n\u00fat kh\u00f4ng kh\u1ea3 d\u1ee5ng)<\/strong><\/h4>\n\n\n\n<p>Tr\u1ea1ng th\u00e1i <strong><code>.disabled<\/code><\/strong> th\u01b0\u1eddng d\u00f9ng cho c\u00e1c n\u00fat nh\u01b0 <strong>\u201cTr\u01b0\u1edbc\u201d (Previous)<\/strong> ho\u1eb7c <strong>\u201cSau\u201d (Next)<\/strong> khi ng\u01b0\u1eddi d\u00f9ng \u0111ang \u1edf trang \u0111\u1ea7u ho\u1eb7c trang cu\u1ed1i. Khi th\u00eam class <strong><code>.disabled<\/code><\/strong> v\u00e0o <strong><code>.page-item<\/code><\/strong>, Bootstrap s\u1ebd t\u1ef1 \u0111\u1ed9ng \u00e1p d\u1ee5ng style m\u1edd v\u00e0 v\u00f4 hi\u1ec7u h\u00f3a thao t\u00e1c chu\u1ed9t b\u1eb1ng <strong><code>pointer-events: none<\/code><\/strong>.<\/p>\n\n\n\n<p>Tuy nhi\u00ean, \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o n\u00fat kh\u00f4ng th\u1ec3 \u0111\u01b0\u1ee3c ch\u1ecdn b\u1eb1ng b\u00e0n ph\u00edm, b\u1ea1n n\u00ean th\u00eam <strong><code>tabindex=\u201c-1\u201d<\/code><\/strong> v\u00e0o th\u1ebb <strong><code>&lt;a&gt;<\/code><\/strong>, \u0111\u1ed3ng th\u1eddi x\u1eed l\u00fd logic v\u00f4 hi\u1ec7u h\u00f3a b\u1eb1ng JavaScript n\u1ebfu c\u1ea7n.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;nav aria-label=\"Pagination\"&gt;\n       &lt;ul class=\"pagination\"&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;Tr\u01b0\u1edbc&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;1&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;2&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item active\"&gt;&lt;a class=\"page-link\" href=\"#\" aria-current=\"page\"&gt;3&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item disabled\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;Sau&lt;\/a&gt;&lt;\/li&gt;\n       &lt;\/ul&gt;\n     &lt;\/nav&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3, trang hi\u1ec7n t\u1ea1i l\u00e0 trang s\u1ed1 3, kh\u00f4ng th\u1ec3 sang trang sau, n\u00ean s\u1eed d\u1ee5ng<strong> <code>.disabled<\/code><\/strong> \u0111\u1ec3 v\u00f4 hi\u1ec7u h\u00f3a n\u00fat <strong>\u201cSau\u201d. <\/strong>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"274\" height=\"70\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdlcjEpsmFzEtk-cnYovYeq4MS9-btHZxJlA_Op_LCyBaOodeTuu3S3LRYyFUp6S37B9U47r7hDsgkte5G1jIDkIzpurYLWE7PPe4L3W6tVC46rzEIuxbe3XnswJCqYHwpTenRdoQ?key=j7TSSzzN59QI2ouqwICTUA\"><br>T\u01b0\u01a1ng t\u1ef1 nh\u01b0 tr\u1ea1ng th\u00e1i active, b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 d\u00f9ng <code>&lt;span&gt;<\/code> \u0111\u1ec3 thay th\u1ebf ho\u00e0n to\u00e0n li\u00ean k\u1ebft, tr\u00e1nh m\u1ecdi h\u00e0nh \u0111\u1ed9ng kh\u00f4ng mong mu\u1ed1n:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;li class=\"page-item disabled\"&gt;\n     &lt;span class=\"page-link\"&gt;Sau&lt;\/span&gt;\n   &lt;\/li&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-h\u01b0\u1edbng-d\u1eabn-theo-tac-c\u01a1-b\u1ea3n-v\u1edbi-pagination-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Huong_dan_theo_tac_co_ban_voi_pagination_trong_Bootstrap\"><\/span><strong>H\u01b0\u1edbng d\u1eabn theo t\u00e1c c\u01a1 b\u1ea3n v\u1edbi pagination trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tich-h\u1ee3p-icon-vao-pagination\"><strong>T\u00edch h\u1ee3p icon v\u00e0o Pagination<\/strong><\/h3>\n\n\n\n<p>Ngo\u00e0i vi\u1ec7c s\u1eed d\u1ee5ng v\u0103n b\u1ea3n nh\u01b0 <strong>\u201cPrevious\u201d<\/strong> ho\u1eb7c <strong>\u201cNext\u201d<\/strong>, b\u1ea1n ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 thay th\u1ebf b\u1eb1ng bi\u1ec3u t\u01b0\u1ee3ng (icon) \u0111\u1ec3 t\u1ea1o giao di\u1ec7n tr\u1ef1c quan v\u00e0 g\u1ecdn g\u00e0ng h\u01a1n. Bootstrap kh\u00f4ng b\u1eaft bu\u1ed9c ph\u1ea3i d\u00f9ng h\u1ec7 th\u1ed1ng icon c\u1ee5 th\u1ec3 n\u00e0o, nh\u01b0ng n\u1ebfu b\u1ea1n \u0111\u00e3 s\u1eed d\u1ee5ng <a href=\"https:\/\/itviec.com\/blog\/bootstrap-icon-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap Icons<\/a>, vi\u1ec7c t\u00edch h\u1ee3p s\u1ebd r\u1ea5t d\u1ec5 d\u00e0ng.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 k\u1ebft h\u1ee3p Bootstrap Icon trong Pagination:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;nav aria-label=\"Pagination with icons only\"&gt;\n       &lt;ul class=\"pagination\"&gt;\n         &lt;li class=\"page-item\"&gt;\n           &lt;a class=\"page-link\" href=\"#\" aria-label=\"Trang tr\u01b0\u1edbc\"&gt;\n             &lt;i class=\"bi bi-caret-left-fill\" aria-hidden=\"true\"&gt;&lt;\/i&gt;\n           &lt;\/a&gt;\n         &lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;1&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;2&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;3&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;\n           &lt;a class=\"page-link\" href=\"#\" aria-label=\"Trang sau\"&gt;\n             &lt;i class=\"bi bi-caret-right-fill\" aria-hidden=\"true\"&gt;&lt;\/i&gt;\n           &lt;\/a&gt;\n         &lt;\/li&gt;\n       &lt;\/ul&gt;\n     &lt;\/nav&gt;<\/code><\/pre>\n\n\n\n<p>Trong v\u00ed d\u1ee5 tr\u00ean, c\u00e1c n\u00fat \u0111i\u1ec1u h\u01b0\u1edbng \u201cTr\u01b0\u1edbc\u201d v\u00e0 \u201cSau\u201d \u0111\u00e3 \u0111\u01b0\u1ee3c thay ho\u00e0n to\u00e0n b\u1eb1ng bi\u1ec3u t\u01b0\u1ee3ng <strong><code>bi-caret-left-fill<\/code><\/strong> v\u00e0 <strong><code>bi-caret-right-fill<\/code><\/strong> t\u1eeb th\u01b0 vi\u1ec7n Bootstrap Icon.<\/p>\n\n\n\n<p>Tr\u01b0\u1eddng h\u1ee3p b\u1ea1n ch\u1ec9 c\u1ea7n k\u00fd hi\u1ec7u \u0111\u01a1n gi\u1ea3n nh\u01b0 d\u1ea5u ngo\u1eb7c k\u00e9p \u00ab ho\u1eb7c \u00bb, c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng tr\u1ef1c ti\u1ebfp trong HTML. Tuy nhi\u00ean, \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o h\u1ed7 tr\u1ee3 t\u1ed1t cho ng\u01b0\u1eddi d\u00f9ng s\u1eed d\u1ee5ng tr\u00ecnh \u0111\u1ecdc m\u00e0n h\u00ecnh, c\u1ea7n k\u1ebft h\u1ee3p v\u1edbi thu\u1ed9c t\u00ednh <code>aria-label<\/code> m\u00f4 t\u1ea3 \u00fd ngh\u0129a c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng, \u0111\u1ed3ng th\u1eddi d\u00f9ng<strong> <code>aria-hidden=\u201ctrue\u201d<\/code> <\/strong>\u0111\u1ec3 \u1ea9n k\u00fd hi\u1ec7u kh\u1ecfi n\u1ed9i dung \u0111\u1ecdc.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 d\u01b0\u1edbi \u0111\u00e2y minh h\u1ecda c\u00e1ch s\u1eed d\u1ee5ng d\u1ea5u ngo\u1eb7c k\u00e9p thay cho v\u0103n b\u1ea3n:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;nav aria-label=\"Pagination\"&gt;\n       &lt;ul class=\"pagination\"&gt;\n         &lt;li class=\"page-item\"&gt;\n           &lt;a class=\"page-link\" href=\"#\" aria-label=\"Previous\"&gt;\n             &lt;span aria-hidden=\"true\"&gt;&amp;laquo;&lt;\/span&gt;\n           &lt;\/a&gt;\n         &lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;1&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;2&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;3&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;\n           &lt;a class=\"page-link\" href=\"#\" aria-label=\"Next\"&gt;\n             &lt;span aria-hidden=\"true\"&gt;&amp;raquo;&lt;\/span&gt;\n           &lt;\/a&gt;\n         &lt;\/li&gt;\n       &lt;\/ul&gt;\n     &lt;\/nav&gt;<\/code><\/pre>\n\n\n\n<p>Trong v\u00ed d\u1ee5 tr\u00ean:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>C\u00e1c n\u00fat \u0111i\u1ec1u h\u01b0\u1edbng <strong>\u201cTr\u01b0\u1edbc\u201d<\/strong> v\u00e0 <strong>\u201cSau\u201d<\/strong> \u0111\u01b0\u1ee3c thay b\u1eb1ng k\u00fd hi\u1ec7u <strong>\u00ab<\/strong> v\u00e0 <strong>\u00bb<\/strong><\/li>\n\n\n\n<li><strong><code>aria-label<\/code><\/strong> cung c\u1ea5p v\u0103n b\u1ea3n thay th\u1ebf cho icon (d\u00e0nh cho tr\u00ecnh \u0111\u1ecdc m\u00e0n h\u00ecnh)<\/li>\n\n\n\n<li><strong><code>aria-hidden=\u201ctrue\u201d<\/code><\/strong> \u0111\u1ea3m b\u1ea3o ch\u1ec9 c\u00f3 n\u1ed9i dung v\u0103n b\u1ea3n (kh\u00f4ng ph\u1ea3i bi\u1ec3u t\u01b0\u1ee3ng) \u0111\u01b0\u1ee3c \u0111\u1ecdc<\/li>\n<\/ul>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"238\" height=\"72\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-50.png\" alt=\"pagination bootstrap - itviec blog\" class=\"wp-image-89399\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-50.png 238w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-50-200x61.png 200w\" sizes=\"auto, (max-width: 238px) 100vw, 238px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-kich-th\u01b0\u1edbc-pagination\"><strong>T\u00f9y ch\u1ec9nh k\u00edch th\u01b0\u1edbc pagination<\/strong><\/h3>\n\n\n\n<p>Bootstrap cung c\u1ea5p s\u1eb5n c\u00e1c class ti\u1ec7n \u00edch \u0111\u1ec3 thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc c\u1ee7a pagination, gi\u00fap b\u1ea1n linh ho\u1ea1t \u0111i\u1ec1u ch\u1ec9nh giao di\u1ec7n theo nhu c\u1ea7u thi\u1ebft k\u1ebf. Ngo\u00e0i k\u00edch th\u01b0\u1edbc m\u1eb7c \u0111\u1ecbnh, b\u1ea1n c\u00f3 th\u1ec3 l\u00e0m pagination l\u1edbn h\u01a1n ho\u1eb7c nh\u1ecf h\u01a1n b\u1eb1ng c\u00e1ch th\u00eam class <strong><code>.pagination-lg<\/code><\/strong> ho\u1eb7c <strong><code>.pagination-sm<\/code><\/strong> v\u00e0o danh s\u00e1ch <code><strong>&lt;ul&gt;<\/strong>.<\/code><\/p>\n\n\n\n<p>V\u00ed d\u1ee5 v\u1ec1 3 k\u00edch c\u1ee1 c\u1ee7a pagination Bootstrap:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;nav aria-label=\"Pagination\"&gt;\n       &lt;ul class=\"pagination pagination-sm\"&gt;\n\t\t...\n       &lt;\/ul&gt;\n     &lt;\/nav&gt; \n     &lt;nav aria-label=\"Pagination\"&gt;\n       &lt;ul class=\"pagination\"&gt;\n\t\t...\n       &lt;\/ul&gt;\n     &lt;\/nav&gt; \n     &lt;nav aria-label=\"Pagination\"&gt;\n       &lt;ul class=\"pagination pagination-lg\"&gt;\n\t\t...\n       &lt;\/ul&gt;\n     &lt;\/nav&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"465\" height=\"204\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-51.png\" alt=\"pagination bootstrap - itviec blog\" class=\"wp-image-89400\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-51.png 465w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-51-300x132.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-51-200x88.png 200w\" sizes=\"auto, (max-width: 465px) 100vw, 465px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-can-ch\u1ec9nh-pagination\"><strong>C\u0103n ch\u1ec9nh Pagination<\/strong><\/h3>\n\n\n\n<p>M\u1eb7c \u0111\u1ecbnh, c\u00e1c n\u00fat ph\u00e2n trang trong Bootstrap s\u1ebd \u0111\u01b0\u1ee3c c\u0103n tr\u00e1i trong kh\u1ed1i ch\u1ee9a. Tuy nhi\u00ean, n\u1ebfu b\u1ea1n mu\u1ed1n c\u0103n gi\u1eefa ho\u1eb7c c\u0103n ph\u1ea3i c\u00e1c n\u00fat pagination, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c l\u1edbp ti\u1ec7n \u00edch Flexbox nh\u01b0<strong> <code>.justify-content-center<\/code><\/strong> ho\u1eb7c <strong><code>.justify-content-end<\/code><\/strong>.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5: C\u0103n gi\u1eefa pagination:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;nav aria-label=\"Page navigation (center)\"&gt;\n       &lt;ul class=\"pagination justify-content-center\"&gt;\n         &lt;li class=\"page-item disabled\"&gt;\n           &lt;a class=\"page-link\"&gt;Previous&lt;\/a&gt;\n         &lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;1&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;2&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;3&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;Next&lt;\/a&gt;&lt;\/li&gt;\n       &lt;\/ul&gt;\n     &lt;\/nav&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"530\" height=\"134\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-52.png\" alt=\"pagination bootstrap - itviec blog\" class=\"wp-image-89401\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-52.png 530w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-52-300x76.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-52-200x51.png 200w\" sizes=\"auto, (max-width: 530px) 100vw, 530px\" \/><\/figure>\n\n\n\n<p>Ho\u1eb7c v\u00ed d\u1ee5 pagination c\u0103n ph\u1ea3i:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;nav aria-label=\"Page navigation (center)\"&gt;\n       &lt;ul class=\"pagination justify-content-end\"&gt;\n         &lt;li class=\"page-item disabled\"&gt;\n           &lt;a class=\"page-link\"&gt;Previous&lt;\/a&gt;\n         &lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;1&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;2&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;3&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;Next&lt;\/a&gt;&lt;\/li&gt;\n       &lt;\/ul&gt;\n     &lt;\/nav&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"530\" height=\"134\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-53.png\" alt=\"pagination bootstrap - itviec blog\" class=\"wp-image-89402\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-53.png 530w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-53-300x76.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-53-200x51.png 200w\" sizes=\"auto, (max-width: 530px) 100vw, 530px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-h\u01b0\u1edbng-d\u1eabn-xay-d\u1ef1ng-pagination-v\u1edbi-responsive-design\"><span class=\"ez-toc-section\" id=\"Huong_dan_xay_dung_pagination_voi_responsive_design\"><\/span><strong>H\u01b0\u1edbng d\u1eabn x\u00e2y d\u1ef1ng pagination v\u1edbi responsive design<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>M\u1eb7c d\u00f9 Bootstrap kh\u00f4ng cung c\u1ea5p m\u1ed9t c\u1ea5u tr\u00fac pagination t\u1ef1 \u0111\u1ed9ng \u1ea9n s\u1ed1 trang ho\u1eb7c thu g\u1ecdn cho thi\u1ebft k\u1ebf responsive, b\u1ea1n v\u1eabn c\u00f3 th\u1ec3 linh ho\u1ea1t ki\u1ec3m so\u00e1t c\u00e1ch pagination hi\u1ec3n th\u1ecb tr\u00ean c\u00e1c k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh kh\u00e1c nhau b\u1eb1ng c\u00e1ch k\u1ebft h\u1ee3p c\u00e1c class hi\u1ec3n th\u1ecb theo breakpoint nh\u01b0 <strong><code>d-none<\/code><\/strong>, <strong><code>d-sm-block<\/code>,<\/strong> <strong><code>d-md-none<\/code><\/strong>,&#8230;<\/p>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 gi\u1ea3m s\u1ed1 l\u01b0\u1ee3ng trang hi\u1ec3n th\u1ecb ho\u1eb7c thay th\u1ebf b\u1eb1ng d\u1ea5u \u201c&#8230;\u201d khi m\u00e0n h\u00ecnh nh\u1ecf, gi\u00fap pagination g\u1ecdn h\u01a1n m\u00e0 v\u1eabn gi\u1eef \u0111\u01b0\u1ee3c ch\u1ee9c n\u0103ng \u0111i\u1ec1u h\u01b0\u1edbng.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;nav aria-label=\"Pagination responsive\"&gt;\n       &lt;ul class=\"pagination justify-content-center\"&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;\u00ab&lt;\/a&gt;&lt;\/li&gt;\n\n\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;1&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;2&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;3&lt;\/a&gt;&lt;\/li&gt;\n\n\n         &lt;li class=\"page-item d-none d-md-block\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;4&lt;\/a&gt;&lt;\/li&gt;\n         &lt;li class=\"page-item d-none d-md-block\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;5&lt;\/a&gt;&lt;\/li&gt;\n  \n         &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;\u00bb&lt;\/a&gt;&lt;\/li&gt;\n       &lt;\/ul&gt;\n     &lt;\/nav&gt; <\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>M\u1ed9t s\u1ed1 n\u00fat s\u1ed1 (4, 5) s\u1ebd t\u1ef1 \u0111\u1ed9ng \u1ea9n \u0111i tr\u00ean m\u00e0n h\u00ecnh nh\u1ecf b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng<strong> <code>d-none<\/code> <\/strong>k\u1ebft h\u1ee3p <strong><code>d-sm-block<\/code> <\/strong>v\u00e0 <strong><code>d-md-block<\/code><\/strong><\/li>\n\n\n\n<li>Ch\u1ec9 gi\u1eef l\u1ea1i c\u00e1c n\u00fat \u0111i\u1ec1u h\u01b0\u1edbng ch\u00ednh nh\u01b0 \u201c\u00ab\u201d v\u00e0 trang s\u1ed1 1, 2, 3 \u0111\u1ec3 hi\u1ec3n th\u1ecb r\u00f5 r\u00e0ng tr\u00ean thi\u1ebft b\u1ecb di \u0111\u1ed9ng<\/li>\n\n\n\n<li>Tr\u00ean m\u00e0n h\u00ecnh l\u1edbn h\u01a1n, to\u00e0n b\u1ed9 s\u1ed1 trang s\u1ebd hi\u1ec7n \u0111\u1ea7y \u0111\u1ee7<\/li>\n<\/ul>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<p>Tr\u00ean PC:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"483\" height=\"199\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-54.png\" alt=\"pagination bootstrap - itviec blog\" class=\"wp-image-89403\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-54.png 483w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-54-300x124.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-54-200x82.png 200w\" sizes=\"auto, (max-width: 483px) 100vw, 483px\" \/><\/figure>\n\n\n\n<p>Tr\u00ean SP:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"535\" height=\"640\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-55-535x640.png\" alt=\"pagination bootstrap - itviec blog\" class=\"wp-image-89404\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-55-535x640.png 535w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-55-251x300.png 251w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-55-167x200.png 167w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-55.png 538w\" sizes=\"auto, (max-width: 535px) 100vw, 535px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc chi ti\u1ebft v\u1ec1 c\u00e1ch k\u1ebft h\u1ee3p c\u00e1c \u0111i\u1ec3m ng\u1eaft (breakpoint) <a href=\"https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Responsive trong Bootstrap<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-cach-tuy-ch\u1ec9nh-giao-di\u1ec7n-pagination-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Cac_cach_tuy_chinh_giao_dien_Pagination_trong_Bootstrap\"><\/span><strong>C\u00e1c c\u00e1ch t\u00f9y ch\u1ec9nh giao di\u1ec7n Pagination trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Component Pagination c\u1ee7a Bootstrap c\u00f3 giao di\u1ec7n m\u1eb7c \u0111\u1ecbnh \u0111\u01a1n gi\u1ea3n, d\u1ec5 s\u1eed d\u1ee5ng. Tuy nhi\u00ean, b\u1ea1n ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 t\u00f9y ch\u1ec9nh giao di\u1ec7n ph\u00e2n trang \u0111\u1ec3 ph\u00f9 h\u1ee3p v\u1edbi thi\u1ebft k\u1ebf t\u1ed5ng th\u1ec3 c\u1ee7a trang web. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng c\u00e1ch ph\u1ed5 bi\u1ebfn \u0111\u1ec3 tu\u1ef3 bi\u1ebfn giao di\u1ec7n Pagination:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-b\u1eb1ng-css\"><strong>T\u00f9y ch\u1ec9nh b\u1eb1ng CSS<\/strong><\/h3>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 ghi \u0111\u00e8 c\u00e1c class c\u00f3 s\u1eb5n c\u1ee7a Bootstrap nh\u01b0 <code>.page-link<\/code>, <code>.page-item<\/code> \u0111\u1ec3 thay \u0111\u1ed5i m\u00e0u s\u1eafc, bo g\u00f3c, kho\u1ea3ng c\u00e1ch, hi\u1ec7u \u1ee9ng hover\u2026<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;nav aria-label=\"Custom pagination\"&gt;\n  &lt;ul class=\"pagination\"&gt;\n     &lt;li class=\"page-item active\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;1&lt;\/a&gt;&lt;\/li&gt;\n     &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;2&lt;\/a&gt;&lt;\/li&gt;\n     &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;3&lt;\/a&gt;&lt;\/li&gt;\n     &lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;4&lt;\/a&gt;&lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/nav&gt;\n\n&lt;style&gt;\n.page-link {\n border-radius: 50px;\n color: #0d6efd;\n transition: all 0.3s ease;\n}\n\n.page-link:hover {\n background-color: #0d6efd;\n color: #fff;\n}\n\n.page-item.active .page-link {\n background-color: #0d6efd;\n color: #fff;\n border-color: #0d6efd;\n}\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ghi \u0111\u00e8 class <strong><code>.page-link<\/code><\/strong> \u0111\u1ec3 c\u00e1c n\u00fat ph\u00e2n trang c\u00f3 bo tr\u00f2n, chuy\u1ec3n m\u00e0u m\u01b0\u1ee3t khi hover, v\u00e0 n\u1ed5i b\u1eadt \u1edf trang \u0111ang ch\u1ecdn.<\/li>\n<\/ul>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"416\" height=\"170\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-56.png\" alt=\"pagination bootstrap - itviec blog\" class=\"wp-image-89405\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-56.png 416w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-56-300x123.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-56-200x82.png 200w\" sizes=\"auto, (max-width: 416px) 100vw, 416px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-b\u1eb1ng-sass\"><strong>T\u00f9y ch\u1ec9nh b\u1eb1ng Sass<\/strong><\/h3>\n\n\n\n<p>N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng Bootstrap t\u1eeb source SCSS (thay v\u00ec b\u1ea3n build s\u1eb5n, <a href=\"https:\/\/itviec.com\/blog\/bootstrap-cdn-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap CDN<\/a>), b\u1ea1n c\u00f3 th\u1ec3 tu\u1ef3 ch\u1ec9nh c\u00e1c bi\u1ebfn Sass tr\u01b0\u1edbc khi bi\u00ean d\u1ecbch \u0111\u1ec3 thay \u0111\u1ed5i to\u00e0n b\u1ed9 h\u1ec7 th\u1ed1ng ph\u00e2n trang m\u1ed9t c\u00e1ch \u0111\u1ed3ng b\u1ed9.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 thay \u0111\u1ed5i c\u00e1c bi\u1ebfn li\u00ean quan \u0111\u1ebfn \u0111\u1ecbnh d\u1ea1ng m\u00e0u s\u1eafc v\u00e0 kho\u1ea3ng c\u00e1ch trong pagination:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$pagination-color: #0d6efd;\n$pagination-hover-color: #fff;\n$pagination-hover-bg: #0d6efd;\n$pagination-border-radius: 50px;\n$pagination-padding-y: 0.5rem;\n$pagination-padding-x: 1rem;<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Sau khi tu\u1ef3 ch\u1ec9nh, b\u1ea1n ti\u1ebfn h\u00e0nh <strong>bi\u00ean d\u1ecbch l\u1ea1i Bootstrap<\/strong> \u0111\u1ec3 \u00e1p d\u1ee5ng c\u00e1c thay \u0111\u1ed5i. \u0110\u1ecdc chi ti\u1ebft v\u1ec1 <strong><a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS trong Bootstrap<\/a><\/strong>.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-so-sanh-pagination-v\u1edbi-breadcrumb-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"So_sanh_Pagination_voi_Breadcrumb_trong_Bootstrap\"><\/span><strong>So s\u00e1nh Pagination v\u1edbi Breadcrumb trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Pagination v\u00e0 Breadcrumb \u0111\u1ec1u l\u00e0 nh\u1eefng th\u00e0nh ph\u1ea7n \u0111i\u1ec1u h\u01b0\u1edbng (navigation components) \u0111\u01b0\u1ee3c Bootstrap h\u1ed7 tr\u1ee3 v\u1edbi c\u00fa ph\u00e1p r\u00f5 r\u00e0ng, d\u1ec5 d\u00f9ng. Ch\u00fang h\u1ed7 tr\u1ee3 ng\u01b0\u1eddi d\u00f9ng di chuy\u1ec3n qua n\u1ed9i dung ho\u1eb7c hi\u1ec3u v\u1ecb tr\u00ed hi\u1ec7n t\u1ea1i c\u1ee7a h\u1ecd trong h\u1ec7 th\u1ed1ng website.<\/p>\n\n\n\n<p>Tuy nhi\u00ean, ch\u00fang c\u00f3 m\u1ee5c \u0111\u00edch s\u1eed d\u1ee5ng, c\u00e1ch hi\u1ec3n th\u1ecb v\u00e0 c\u00e1ch tri\u1ec3n khai c\u1ee7a ch\u00fang l\u1ea1i kh\u00e1c nhau. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 b\u1ea3ng so s\u00e1nh chi ti\u1ebft:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Ti\u00eau ch\u00ed<\/strong><\/td><td><strong>Pagination<\/strong><\/td><td><strong>Breadcrumb<\/strong><\/td><\/tr><tr><td><strong>Ch\u1ee9c n\u0103ng ch\u00ednh<\/strong><\/td><td>\u0110i\u1ec1u h\u01b0\u1edbng gi\u1eefa c\u00e1c trang con c\u00f9ng c\u1ea5p (v\u00ed d\u1ee5: trang 1, 2, 3 trong danh s\u00e1ch s\u1ea3n ph\u1ea9m).<\/td><td>Hi\u1ec3n th\u1ecb \u0111\u01b0\u1eddng d\u1eabn ph\u00e2n c\u1ea5p t\u1eeb trang g\u1ed1c \u0111\u1ebfn trang hi\u1ec7n t\u1ea1i, gi\u00fap ng\u01b0\u1eddi d\u00f9ng bi\u1ebft \u0111ang \u1edf \u0111\u00e2u.<\/td><\/tr><tr><td><strong>V\u00ed d\u1ee5 th\u1ef1c t\u1ebf<\/strong><\/td><td>Danh s\u00e1ch b\u00e0i vi\u1ebft, s\u1ea3n ph\u1ea9m, b\u1ea3ng d\u1eef li\u1ec7u d\u00e0i chia th\u00e0nh nhi\u1ec1u trang.<\/td><td>Trang chi ti\u1ebft s\u1ea3n ph\u1ea9m n\u1eb1m trong m\u1ed9t danh m\u1ee5c: Trang ch\u1ee7 &gt; Th\u1eddi trang &gt; \u00c1o thun.<\/td><\/tr><tr><td><strong>V\u1ecb tr\u00ed th\u01b0\u1eddng d\u00f9ng<\/strong><\/td><td>D\u01b0\u1edbi c\u00f9ng danh s\u00e1ch ho\u1eb7c b\u1ea3ng \u2013 n\u01a1i ng\u01b0\u1eddi d\u00f9ng c\u1ea7n chuy\u1ec3n trang.<\/td><td>Ph\u00eda tr\u00ean n\u1ed9i dung ch\u00ednh \u2013 d\u01b0\u1edbi ti\u00eau \u0111\u1ec1 ho\u1eb7c thanh \u0111i\u1ec1u h\u01b0\u1edbng.<\/td><\/tr><tr><td><strong>Class Bootstrap ch\u00ednh<\/strong><\/td><td><code>.pagination<\/code>, <code>.page-item<\/code>, <code>.page-link<\/code>, <code>.active<\/code>, <code>.disabled<\/code>.<\/td><td><code>.breadcrumb<\/code>, <code>.breadcrumb-item<\/code>, <code>.active<\/code>.<\/td><\/tr><tr><td><strong>T\u00e1c \u0111\u1ed9ng \u0111\u1ebfn tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng<\/strong><\/td><td>Gi\u00fap chia nh\u1ecf n\u1ed9i dung, d\u1ec5 theo d\u00f5i v\u00e0 t\u1ea3i nhanh h\u01a1n. Ng\u01b0\u1eddi d\u00f9ng di chuy\u1ec3n d\u1ec5 d\u00e0ng gi\u1eefa c\u00e1c ph\u1ea7n d\u1eef li\u1ec7u.<\/td><td>Gi\u00fap ng\u01b0\u1eddi d\u00f9ng n\u1eafm \u0111\u01b0\u1ee3c v\u1ecb tr\u00ed hi\u1ec7n t\u1ea1i v\u00e0 c\u00f3 th\u1ec3 \u0111i\u1ec1u h\u01b0\u1edbng quay v\u1ec1 c\u00e1c c\u1ea5p cha.<\/td><\/tr><tr><td><strong>T\u00e1c \u0111\u1ed9ng \u0111\u1ebfn SEO<\/strong><\/td><td>Kh\u00f4ng \u1ea3nh h\u01b0\u1edfng l\u1edbn, c\u1ea7n x\u1eed l\u00fd canonical URL n\u1ebfu d\u00f9ng query string.<\/td><td>R\u1ea5t t\u1ed1t cho SEO: Google c\u00f3 th\u1ec3 hi\u1ec3n th\u1ecb breadcrumb trong k\u1ebft qu\u1ea3 t\u00ecm ki\u1ebfm n\u1ebfu \u0111\u00e1nh d\u1ea5u \u0111\u00fang.<\/td><\/tr><tr><td><strong>T\u01b0\u01a1ng th\u00edch responsive<\/strong><\/td><td>C\u00f3 th\u1ec3 \u1ea9n b\u1edbt s\u1ed1 trang tr\u00ean mobile b\u1eb1ng d-none, d-md-block.<\/td><td>Th\u01b0\u1eddng kh\u00f4ng c\u1ea7n responsive ph\u1ee9c t\u1ea1p, ch\u1ec9 c\u1ea7n gi\u1eef chi\u1ec1u r\u1ed9ng ng\u1eafn g\u1ecdn.<\/td><\/tr><tr><td><strong>T\u00f9y ch\u1ec9nh m\u1edf r\u1ed9ng<\/strong><\/td><td>H\u1ed7 tr\u1ee3 icon, \u0111i\u1ec1u h\u01b0\u1edbng b\u1eb1ng d\u1ea5u \u00ab, \u00bb, v\u00e0 c\u00e1c ki\u1ec3u c\u0103n ch\u1ec9nh (justify-content-center).<\/td><td>C\u00f3 th\u1ec3 ch\u00e8n icon, d\u00f9ng SVG, ho\u1eb7c thay \u0111\u1ed5i ph\u00e2n c\u00e1ch (\/, &gt;&#8230;). Kh\u00f4ng h\u1ed7 tr\u1ee3 \u0111i\u1ec1u h\u01b0\u1edbng t\u01b0\u01a1ng t\u00e1c nhi\u1ec1u nh\u01b0 pagination.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-khi-nao-nen-dung-breadcrumb-khi-nao-dung-pagination\"><strong>Khi n\u00e0o n\u00ean d\u00f9ng Breadcrumb, khi n\u00e0o d\u00f9ng Pagination?<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-dung-breadcrumb-khi-b\u1ea1n-mu\u1ed1n\"><strong>D\u00f9ng Breadcrumb khi b\u1ea1n mu\u1ed1n<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hi\u1ec3n th\u1ecb th\u1ee9 b\u1eadc trang: v\u00ed d\u1ee5 Trang ch\u1ee7 &gt; S\u1ea3n ph\u1ea9m &gt; \u00c1o thun &gt; \u00c1o thun nam<\/li>\n\n\n\n<li>C\u1ea3i thi\u1ec7n \u0111i\u1ec1u h\u01b0\u1edbng v\u00e0 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng \u1edf trang chi ti\u1ebft<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-dung-pagination-khi-b\u1ea1n-co\"><strong>D\u00f9ng Pagination khi b\u1ea1n c\u00f3<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Danh s\u00e1ch l\u1edbn c\u1ea7n chia trang: v\u00ed d\u1ee5 danh s\u00e1ch b\u00e0i vi\u1ebft, danh m\u1ee5c s\u1ea3n ph\u1ea9m<\/li>\n\n\n\n<li>Nhi\u1ec1u d\u1eef li\u1ec7u c\u1ea7n t\u1ea3i theo trang \u0111\u1ec3 tr\u00e1nh \u1ea3nh h\u01b0\u1edfng hi\u1ec7u n\u0103ng<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-4-l\u01b0u-y-quan-tr\u1ecdng-khi-s\u1eed-d\u1ee5ng-pagination-bootstrap\"><span class=\"ez-toc-section\" id=\"4_luu_y_quan_trong_khi_su_dung_Pagination_Bootstrap\"><\/span><strong>4 l\u01b0u \u00fd quan tr\u1ecdng khi s\u1eed d\u1ee5ng Pagination Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Khi s\u1eed d\u1ee5ng component Pagination trong Bootstrap, b\u00ean c\u1ea1nh vi\u1ec7c tri\u1ec3n khai \u0111\u00fang c\u00fa ph\u00e1p v\u00e0 thi\u1ebft k\u1ebf giao di\u1ec7n \u0111\u1eb9p m\u1eaft, b\u1ea1n c\u0169ng n\u00ean l\u01b0u \u00fd m\u1ed9t s\u1ed1 \u0111i\u1ec3m quan tr\u1ecdng d\u01b0\u1edbi \u0111\u00e2y \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng t\u1ed1t, kh\u1ea3 n\u0103ng t\u01b0\u01a1ng th\u00edch cao, v\u00e0 d\u1ec5 b\u1ea3o tr\u00ec v\u1ec1 sau:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-luon-b\u1ecdc-pagination-trong-th\u1ebb-lt-nav\"><strong>1. Lu\u00f4n b\u1ecdc Pagination trong th\u1ebb &lt;nav&gt;<\/strong><\/h3>\n\n\n\n<p>H\u00e3y \u0111\u1ea3m b\u1ea3o g\u1eafn th\u00eam thu\u1ed9c t\u00ednh aria-label \u0111\u1ec3 m\u00f4 t\u1ea3 r\u00f5 vai tr\u00f2 c\u1ee7a v\u00f9ng \u0111i\u1ec1u h\u01b0\u1edbng. Th\u1ebb <code>&lt;nav&gt;<\/code> kh\u00f4ng ch\u1ec9 gi\u00fap c\u1ea3i thi\u1ec7n t\u00ednh ng\u1eef ngh\u0129a (semantic HTML) m\u00e0 c\u00f2n h\u1ed7 tr\u1ee3 t\u1ed1t cho c\u00e1c tr\u00ecnh \u0111\u1ecdc m\u00e0n h\u00ecnh.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&lt;nav aria-label=\"Pagination\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=\"pagination\"&gt;...&lt;\/ul&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/nav&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-s\u1eed-d\u1ee5ng-aria-current-page-cho-trang-dang-hi\u1ec3n-th\u1ecb\"><strong>2. S\u1eed d\u1ee5ng aria-current=\u201cpage\u201d cho trang \u0111ang hi\u1ec3n th\u1ecb<\/strong><\/h3>\n\n\n\n<p>Khi \u0111\u00e1nh d\u1ea5u m\u1ed9t trang \u0111ang \u0111\u01b0\u1ee3c ch\u1ecdn (<code>.active<\/code>), b\u1ea1n n\u00ean th\u00eam thu\u1ed9c t\u00ednh <code>aria-current=\u201cpage\u201d<\/code> \u0111\u1ec3 t\u0103ng t\u00ednh accessibility \u2013 gi\u00fap ng\u01b0\u1eddi d\u00f9ng khi\u1ebfm th\u1ecb bi\u1ebft \u0111\u01b0\u1ee3c h\u1ecd \u0111ang \u1edf trang n\u00e0o khi d\u00f9ng tr\u00ecnh \u0111\u1ecdc m\u00e0n h\u00ecnh.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;li class=\"page-item active\"&gt;\n     &lt;a class=\"page-link\" href=\"#\" aria-current=\"page\"&gt;2&lt;\/a&gt;\n   &lt;\/li&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-d\u1ea3m-b\u1ea3o-cac-nut-tr\u01b0\u1edbc-va-sau-d\u01b0\u1ee3c-x\u1eed-ly-dung-tr\u1ea1ng-thai\"><strong>3. \u0110\u1ea3m b\u1ea3o c\u00e1c n\u00fat \u201cTr\u01b0\u1edbc\u201d v\u00e0 \u201cSau\u201d \u0111\u01b0\u1ee3c x\u1eed l\u00fd \u0111\u00fang tr\u1ea1ng th\u00e1i<\/strong><\/h3>\n\n\n\n<p>Khi ng\u01b0\u1eddi d\u00f9ng \u1edf trang \u0111\u1ea7u ti\u00ean ho\u1eb7c trang cu\u1ed1i c\u00f9ng, h\u00e3y s\u1eed d\u1ee5ng <code>.disabled<\/code> \u0111\u1ec3 v\u00f4 hi\u1ec7u ho\u00e1 c\u00e1c n\u00fat \u0111i\u1ec1u h\u01b0\u1edbng kh\u00f4ng kh\u1ea3 d\u1ee5ng. \u0110\u1ed3ng th\u1eddi, n\u00ean th\u00eam <code>tabindex=\u201c-1\u201d<\/code> \u0111\u1ec3 tr\u00e1nh ng\u01b0\u1eddi d\u00f9ng nh\u1ea5n ph\u00edm Tab ch\u1ecdn v\u00e0o n\u00fat kh\u00f4ng d\u00f9ng \u0111\u01b0\u1ee3c.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;li class=\"page-item disabled\"&gt;\n     &lt;a class=\"page-link\" href=\"#\" tabindex=\"-1\"&gt;Tr\u01b0\u1edbc&lt;\/a&gt;\n   &lt;\/li&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-khong-nen-d\u1ec3-qua-nhi\u1ec1u-nut-phan-trang-lien-t\u1ee5c\"><strong>4. Kh\u00f4ng n\u00ean \u0111\u1ec3 qu\u00e1 nhi\u1ec1u n\u00fat ph\u00e2n trang li\u00ean t\u1ee5c<\/strong><\/h3>\n\n\n\n<p>N\u1ebfu b\u1ea1n c\u00f3 danh s\u00e1ch tr\u00ean 10\u201315 trang, h\u00e3y xem x\u00e9t th\u00eam n\u00fat r\u00fat g\u1ecdn (&#8230;) ho\u1eb7c s\u1eed d\u1ee5ng n\u00fat \u201cTrang \u0111\u1ea7u \/ Trang cu\u1ed1i\u201d \u0111\u1ec3 \u0111i\u1ec1u h\u01b0\u1edbng d\u1ec5 h\u01a1n. Vi\u1ec7c hi\u1ec3n th\u1ecb t\u1ea5t c\u1ea3 s\u1ed1 trang li\u00ean ti\u1ebfp c\u00f3 th\u1ec3 g\u00e2y r\u1ed1i v\u00e0 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-cau-h\u1ecfi-th\u01b0\u1eddng-g\u1eb7p-v\u1ec1-pagination-bootstrap\"><span class=\"ez-toc-section\" id=\"Cac_cau_hoi_thuong_gap_ve_Pagination_Bootstrap\"><\/span><strong>C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Pagination Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lam-sao-d\u1ec3-thay-d\u1ed5i-s\u1ed1-l\u01b0\u1ee3ng-trang-hi\u1ec3n-th\u1ecb-trong-pagination\"><strong>L\u00e0m sao \u0111\u1ec3 thay \u0111\u1ed5i s\u1ed1 l\u01b0\u1ee3ng trang hi\u1ec3n th\u1ecb trong Pagination?<\/strong><\/h3>\n\n\n\n<p>Bootstrap Pagination ch\u1ec9 cung c\u1ea5p giao di\u1ec7n hi\u1ec3n th\u1ecb, ch\u1ee9 kh\u00f4ng t\u1ef1 \u0111\u1ed9ng t\u1ea1o s\u1ed1 l\u01b0\u1ee3ng trang. V\u00ec v\u1eady, \u0111\u1ec3 thay \u0111\u1ed5i s\u1ed1 l\u01b0\u1ee3ng trang hi\u1ec3n th\u1ecb, b\u1ea1n c\u1ea7n:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ph\u00e2n trang t\u0129nh (HTML vi\u1ebft tay):<\/strong> th\u00eam ho\u1eb7c b\u1edbt s\u1ed1 l\u01b0\u1ee3ng <code>&lt;li&gt;<\/code> trong danh s\u00e1ch <code>&lt;ul class=\u201cpagination\u201d&gt;<\/code> theo s\u1ed1 trang mong mu\u1ed1n.<\/li>\n\n\n\n<li><strong>Ph\u00e2n trang \u0111\u1ed9ng (d\u1eef li\u1ec7u thay \u0111\u1ed5i theo trang):<\/strong> d\u00f9ng JavaScript (ho\u1eb7c framework nh\u01b0 React\/Vue) k\u1ebft h\u1ee3p v\u1edbi d\u1eef li\u1ec7u backend ho\u1eb7c m\u1ea3ng d\u1eef li\u1ec7u c\u1ee5c b\u1ed9.<\/li>\n<\/ul>\n\n\n\n<p>Sau \u0111\u00f3, b\u1ea1n:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>T\u00ednh t\u1ed5ng s\u1ed1 trang d\u1ef1a tr\u00ean s\u1ed1 l\u01b0\u1ee3ng item v\u00e0 s\u1ed1 item tr\u00ean m\u1ed7i trang<\/li>\n\n\n\n<li>T\u1ea1o danh s\u00e1ch s\u1ed1 trang trong v\u00f2ng l\u1eb7p<\/li>\n\n\n\n<li>Render pagination t\u01b0\u01a1ng \u1ee9ng<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5 v\u1edbi JavaScript \u0111\u01a1n gi\u1ea3n t\u1ef1 \u0111\u1ed9ng t\u1ea1o danh s\u00e1ch s\u1ed1 trang ph\u00e2n trang (1, 2, 3&#8230;) d\u1ef1a tr\u00ean t\u1ed5ng s\u1ed1 item v\u00e0 s\u1ed1 item m\u1ed7i trang:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const totalItems = 50; \/\/ T\u1ed5ng s\u1ed1 item c\u1ea7n ph\u00e2n trang\nconst itemsPerPage = 10; \/\/ M\u1ed7i trang hi\u1ec3n th\u1ecb 10 item\nconst totalPages = Math.ceil(totalItems \/ itemsPerPage); \/\/ T\u00ednh t\u1ed5ng s\u1ed1 trang\n\nlet paginationHTML = '';\nfor (let i = 1; i &lt;= totalPages; i++) {\n&nbsp; paginationHTML += `&lt;li class=\"page-item\"&gt;&lt;a class=\"page-link\" href=\"#\"&gt;${i}&lt;\/a&gt;&lt;\/li&gt;`;\n}\n\ndocument.querySelector('.pagination').innerHTML = paginationHTML;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>V\u1edbi 50 item v\u00e0 10 item\/trang, ta c\u1ea7n 5 trang.<\/li>\n\n\n\n<li>S\u1eed d\u1ee5ng v\u00f2ng l\u1eb7p duy\u1ec7t qua t\u1eebng s\u1ed1 trang v\u00e0 t\u1ea1o n\u00fat t\u01b0\u01a1ng \u1ee9ng<\/li>\n<\/ul>\n\n\n\n<p>L\u01b0u \u00fd, code n\u00e0y ch\u1ec9 t\u1ea1o giao di\u1ec7n ph\u00e2n trang. N\u1ebfu mu\u1ed1n ph\u00e2n trang th\u1eadt (hi\u1ec3n th\u1ecb n\u1ed9i dung theo trang), c\u1ea7n th\u00eam logic x\u1eed l\u00fd khi ng\u01b0\u1eddi d\u00f9ng b\u1ea5m v\u00e0o s\u1ed1 trang.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-co-th\u1ec3-k\u1ebft-h\u1ee3p-pagination-v\u1edbi-cac-component-di\u1ec1u-h\u01b0\u1edbng-khac-khong\"><strong>C\u00f3 th\u1ec3 k\u1ebft h\u1ee3p Pagination v\u1edbi c\u00e1c component \u0111i\u1ec1u h\u01b0\u1edbng kh\u00e1c kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>Bootstrap Pagination ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p v\u1edbi c\u00e1c component \u0111i\u1ec1u h\u01b0\u1edbng kh\u00e1c nh\u01b0 Breadcrumb, Tabs, Navs, ho\u1eb7c Dropdown \u0111\u1ec3 t\u1ea1o n\u00ean m\u1ed9t h\u1ec7 th\u1ed1ng \u0111i\u1ec1u h\u01b0\u1edbng to\u00e0n di\u1ec7n v\u00e0 m\u1ea1ch l\u1ea1c trong giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Pagination + Breadcrumb<\/strong> (s\u1eed d\u1ee5ng khi ng\u01b0\u1eddi d\u00f9ng \u0111ang \u1edf trang danh s\u00e1ch trong m\u1ed9t nh\u00e1nh c\u1ee5 th\u1ec3):\n<ul class=\"wp-block-list\">\n<li>Breadcrumb d\u00f9ng \u0111\u1ec3 hi\u1ec3n th\u1ecb v\u1ecb tr\u00ed hi\u1ec7n t\u1ea1i trong h\u1ec7 th\u1ed1ng (v\u00ed d\u1ee5: Trang ch\u1ee7 &gt; Blog &gt; B\u00e0i vi\u1ebft)<\/li>\n\n\n\n<li>Pagination d\u00f9ng \u0111\u1ec3 chuy\u1ec3n trang gi\u1eefa c\u00e1c b\u00e0i vi\u1ebft<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Pagination + Tabs <\/strong>(giao di\u1ec7n blog, s\u1ea3n ph\u1ea9m, dashboard d\u1eef li\u1ec7u):\n<ul class=\"wp-block-list\">\n<li>Tabs d\u00f9ng \u0111\u1ec3 chia n\u1ed9i dung theo lo\u1ea1i (v\u00ed d\u1ee5: M\u1edbi nh\u1ea5t, Ph\u1ed5 bi\u1ebfn, \u0110\u01b0\u1ee3c y\u00eau th\u00edch)<\/li>\n\n\n\n<li>Pagination d\u00f9ng \u0111\u1ec3 ph\u00e2n trang d\u1eef li\u1ec7u trong m\u1ed7i tab<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Pagination + Dropdown <\/strong>(t\u0103ng tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng, \u0111\u1eb7c bi\u1ec7t v\u1edbi danh s\u00e1ch d\u00e0i):\n<ul class=\"wp-block-list\">\n<li>Dropdown ch\u1ecdn s\u1ed1 item\/trang (10, 20, 50), ho\u1eb7c chuy\u1ec3n nhanh t\u1edbi trang c\u1ee5 th\u1ec3<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc chi ti\u1ebft v\u1ec1 c\u00e1ch s\u1eed d\u1ee5ng <a href=\"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Dropdown trong Bootstrap<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lam-sao-d\u1ec3-tuy-ch\u1ec9nh-kich-th\u01b0\u1edbc-c\u1ee7a-pagination-trong-bootstrap\"><strong>L\u00e0m sao \u0111\u1ec3 t\u00f9y ch\u1ec9nh k\u00edch th\u01b0\u1edbc c\u1ee7a pagination trong Bootstrap?<\/strong><\/h3>\n\n\n\n<p>Bootstrap cung c\u1ea5p s\u1eb5n c\u00e1c class ti\u1ec7n \u00edch \u0111\u1ec3 thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc c\u1ee7a pagination nhanh ch\u00f3ng, m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft th\u00eam CSS th\u1ee7 c\u00f4ng. Bao g\u1ed3m 3 m\u1ee9c k\u00edch th\u01b0\u1edbc pagination:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Class \u00e1p d\u1ee5ng<\/strong><\/td><td><strong>K\u1ebft qu\u1ea3<\/strong><\/td><\/tr><tr><td><strong><code>.pagination-sm<\/code><\/strong><\/td><td>Pagination nh\u1ecf g\u1ecdn<\/td><\/tr><tr><td><em>(M\u1eb7c \u0111\u1ecbnh)<\/em><\/td><td>K\u00edch th\u01b0\u1edbc trung b\u00ecnh<\/td><\/tr><tr><td><strong><code>.pagination-lg<\/code><\/strong><\/td><td>Pagination l\u1edbn, ph\u00f9 h\u1ee3p cho giao di\u1ec7n desktop<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>V\u00ed d\u1ee5 v\u1ec1 3 k\u00edch c\u1ee1 c\u1ee7a pagination Bootstrap:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;nav aria-label=\"Pagination\"&gt;\n       &lt;ul class=\"pagination pagination-sm\"&gt;\n\t\t...\n       &lt;\/ul&gt;\n     &lt;\/nav&gt; \n     &lt;nav aria-label=\"Pagination\"&gt;\n       &lt;ul class=\"pagination\"&gt;\n\t\t...\n       &lt;\/ul&gt;\n     &lt;\/nav&gt; \n     &lt;nav aria-label=\"Pagination\"&gt;\n       &lt;ul class=\"pagination pagination-lg\"&gt;\n\t\t...\n       &lt;\/ul&gt;\n     &lt;\/nav&gt; <\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"465\" height=\"204\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-57.png\" alt=\"pagination bootstrap - itviec blog\" class=\"wp-image-89406\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-57.png 465w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-57-300x132.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-57-200x88.png 200w\" sizes=\"auto, (max-width: 465px) 100vw, 465px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-k\u1ebft\"><span class=\"ez-toc-section\" id=\"Tong_ket\"><\/span><strong>T\u1ed5ng k\u1ebft<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Pagination (ph\u00e2n trang) l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n thi\u1ebft y\u1ebfu trong giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, \u0111\u1eb7c bi\u1ec7t khi l\u00e0m vi\u1ec7c v\u1edbi danh s\u00e1ch d\u1eef li\u1ec7u l\u1edbn nh\u01b0 s\u1ea3n ph\u1ea9m, b\u00e0i vi\u1ebft, hay b\u1ea3ng k\u1ebft qu\u1ea3. V\u1edbi c\u1ea5u tr\u00fac HTML r\u00f5 r\u00e0ng, h\u1ec7 th\u1ed1ng class ti\u1ec7n \u00edch m\u1ea1nh m\u1ebd v\u00e0 kh\u1ea3 n\u0103ng t\u00f9y ch\u1ec9nh linh ho\u1ea1t, Bootstrap Pagination gi\u00fap l\u1eadp tr\u00ecnh vi\u00ean d\u1ec5 d\u00e0ng t\u1ea1o ra giao di\u1ec7n ph\u00e2n trang \u0111\u1eb9p m\u1eaft, th\u00e2n thi\u1ec7n v\u1edbi ng\u01b0\u1eddi d\u00f9ng v\u00e0 d\u1ec5 b\u1ea3o tr\u00ec.<\/p>\n\n\n\n<p>Qua b\u00e0i vi\u1ebft n\u00e0y, ITviec hy v\u1ecdng \u0111\u00e3 mang \u0111\u1ebfn cho b\u1ea1n \u0111\u1ecdc c\u00e1i nh\u00ecn t\u1ed5ng quan v\u00e0 \u0111\u1ea7y \u0111\u1ee7 v\u1ec1 c\u00e1ch s\u1eed d\u1ee5ng Pagination trong Bootstrap \u2013 t\u1eeb c\u00fa ph\u00e1p c\u01a1 b\u1ea3n \u0111\u1ebfn c\u00e1c tu\u1ef3 ch\u1ec9nh n\u00e2ng cao nh\u01b0 icon, k\u00edch th\u01b0\u1edbc, c\u0103n ch\u1ec9nh, responsive v\u00e0 k\u1ebft h\u1ee3p v\u1edbi c\u00e1c th\u00e0nh ph\u1ea7n \u0111i\u1ec1u h\u01b0\u1edbng kh\u00e1c.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Khi l\u00e0m vi\u1ec7c v\u1edbi giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng, \u0111\u1eb7c bi\u1ec7t l\u00e0 c\u00e1c trang c\u00f3 d\u1eef li\u1ec7u l\u1edbn nh\u01b0 danh s\u00e1ch s\u1ea3n ph\u1ea9m, b\u1ea3ng k\u1ebft qu\u1ea3 t\u00ecm ki\u1ebfm, hay b\u00e0i vi\u1ebft blog,&#8230; th\u00ec vi\u1ec7c chia nh\u1ecf n\u1ed9i dung th\u00e0nh t\u1eebng trang (pagination) l\u00e0 \u0111i\u1ec1u c\u1ea7n thi\u1ebft. Bootstrap h\u1ed7 tr\u1ee3 b\u1ea1n th\u1ef1c hi\u1ec7n vi\u1ec7c ph\u00e2n trang n\u00e0y [&hellip;]<\/p>\n","protected":false},"author":235,"featured_media":89409,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-89215","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Pagination Bootstrap l\u00e0 g\u00ec: C\u00e1ch ph\u00e2n trang hi\u1ec7u qu\u1ea3 v\u1edbi Bootstrap - ITviec Blog<\/title>\n<meta name=\"description\" content=\"T\u00ecm hi\u1ec3u Pagination trong Bootstrap: t\u1ea1o ph\u00e2n trang \u0111\u1eb9p, responsive v\u00e0 d\u1ec5 d\u00f9ng. B\u00e0i vi\u1ebft g\u1ed3m v\u00ed d\u1ee5 chi ti\u1ebft v\u00e0 c\u00e1ch t\u00f9y ch\u1ec9nh giao di\u1ec7n.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pagination Bootstrap l\u00e0 g\u00ec: C\u00e1ch ph\u00e2n trang hi\u1ec7u qu\u1ea3 v\u1edbi Bootstrap\" \/>\n<meta property=\"og:description\" content=\"Khi l\u00e0m vi\u1ec7c v\u1edbi giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng, \u0111\u1eb7c bi\u1ec7t l\u00e0 c\u00e1c trang c\u00f3 d\u1eef li\u1ec7u l\u1edbn nh\u01b0 danh s\u00e1ch s\u1ea3n ph\u1ea9m, b\u1ea3ng k\u1ebft qu\u1ea3 t\u00ecm ki\u1ebfm, hay b\u00e0i vi\u1ebft blog,... th\u00ec vi\u1ec7c\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-12T16:33:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-12T16:33:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/pagination-bootstrap-la-gi-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1347\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Pagination Bootstrap l\u00e0 g\u00ec: C\u00e1ch ph\u00e2n trang hi\u1ec7u qu\u1ea3 v\u1edbi Bootstrap - ITviec Blog","description":"T\u00ecm hi\u1ec3u Pagination trong Bootstrap: t\u1ea1o ph\u00e2n trang \u0111\u1eb9p, responsive v\u00e0 d\u1ec5 d\u00f9ng. B\u00e0i vi\u1ebft g\u1ed3m v\u00ed d\u1ee5 chi ti\u1ebft v\u00e0 c\u00e1ch t\u00f9y ch\u1ec9nh giao di\u1ec7n.","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:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/","og_locale":"vi_VN","og_type":"article","og_title":"Pagination Bootstrap l\u00e0 g\u00ec: C\u00e1ch ph\u00e2n trang hi\u1ec7u qu\u1ea3 v\u1edbi Bootstrap","og_description":"Khi l\u00e0m vi\u1ec7c v\u1edbi giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng, \u0111\u1eb7c bi\u1ec7t l\u00e0 c\u00e1c trang c\u00f3 d\u1eef li\u1ec7u l\u1edbn nh\u01b0 danh s\u00e1ch s\u1ea3n ph\u1ea9m, b\u1ea3ng k\u1ebft qu\u1ea3 t\u00ecm ki\u1ebfm, hay b\u00e0i vi\u1ebft blog,... th\u00ec vi\u1ec7c","og_url":"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-07-12T16:33:42+00:00","article_modified_time":"2025-07-12T16:33:44+00:00","og_image":[{"width":2560,"height":1347,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/pagination-bootstrap-la-gi-scaled.png","type":"image\/png"}],"author":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/"},"author":{"name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad"},"headline":"Pagination Bootstrap l\u00e0 g\u00ec: C\u00e1ch ph\u00e2n trang hi\u1ec7u qu\u1ea3 v\u1edbi Bootstrap","datePublished":"2025-07-12T16:33:42+00:00","dateModified":"2025-07-12T16:33:44+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/"},"wordCount":4242,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/pagination-bootstrap-la-gi-scaled.png","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/","url":"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/","name":"Pagination Bootstrap l\u00e0 g\u00ec: C\u00e1ch ph\u00e2n trang hi\u1ec7u qu\u1ea3 v\u1edbi Bootstrap - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/pagination-bootstrap-la-gi-scaled.png","datePublished":"2025-07-12T16:33:42+00:00","dateModified":"2025-07-12T16:33:44+00:00","description":"T\u00ecm hi\u1ec3u Pagination trong Bootstrap: t\u1ea1o ph\u00e2n trang \u0111\u1eb9p, responsive v\u00e0 d\u1ec5 d\u00f9ng. B\u00e0i vi\u1ebft g\u1ed3m v\u00ed d\u1ee5 chi ti\u1ebft v\u00e0 c\u00e1ch t\u00f9y ch\u1ec9nh giao di\u1ec7n.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/pagination-bootstrap-la-gi-scaled.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/pagination-bootstrap-la-gi-scaled.png","width":800,"height":421,"caption":"Pagination Bootstrap - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/pagination-bootstrap-la-gi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Pagination Bootstrap l\u00e0 g\u00ec: C\u00e1ch ph\u00e2n trang hi\u1ec7u qu\u1ea3 v\u1edbi Bootstrap"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad","name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","caption":"Ph\u1ea1m H\u1eefu Ng\u1ecdc"},"url":"https:\/\/itviec.com\/blog\/author\/pham-huu-ngoc-2\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/89215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/235"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=89215"}],"version-history":[{"count":4,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/89215\/revisions"}],"predecessor-version":[{"id":89410,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/89215\/revisions\/89410"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/89409"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=89215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=89215"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=89215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}