{"id":4859,"date":"2021-12-20T07:00:00","date_gmt":"2021-12-20T01:30:00","guid":{"rendered":"https:\/\/selfimagination.in\/tips\/?p=4859"},"modified":"2022-07-19T16:03:05","modified_gmt":"2022-07-19T10:33:05","slug":"bootstrap-most-useful-codes-to-use-while-coding","status":"publish","type":"post","link":"https:\/\/selfimagination.in\/tips\/bootstrap-most-useful-codes-to-use-while-coding\/","title":{"rendered":"Bootstrap : Most Useful Codes to use while coding"},"content":{"rendered":"\n<p>\u091c\u092c \u092d\u0940 \u0906\u092a\u0915\u094b \u0915\u094b\u0908 \u092d\u0940 Html Page \u092c\u0928\u093e\u0928\u093e \u0939\u094b \u0924\u092c \u0906\u092a\u0915\u094b Page \u0915\u094b Responsive \u0913\u0930 \u090f\u0915 Standard Level \u0915\u0940 Coding \u0915\u0947 \u0932\u093f\u090f Bootstrap \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0928\u093e \u091a\u093e\u0939\u093f\u090f, Bootstrap : Most Useful Codes \u092a\u0930 \u0905\u0927\u093f\u0915 \u0915\u093e\u092e \u092e\u0947 \u0906\u0928\u0947 \u0935\u093e\u0932\u0947 Code \u0915\u0940 \u090f\u0915 \u0932\u093f\u0938\u094d\u091f \u092c\u0928\u093e \u0915\u0930 \u0926\u0940 \u0939\u0948\u0902 \u0924\u093e\u0915\u093f \u0906\u092a\u0915\u094b Coding \u0915\u0930\u0924\u0947 \u0938\u092e\u092f Internet \u092a\u0930 Searching \u0915\u0940 \u091c\u0930\u0942\u0930\u0924 \u0928 \u0932\u0917\u0947 \u0964 <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Topic Covered<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>CDN<\/li><li>Basic  <\/li><li>Layout<\/li><li>Vertical alignment<\/li><li>Horizontal alignment<\/li><li>Padding &amp; Margin<\/li><li>Colours<\/li><li>Text Colour<\/li><li>Background Colour<\/li><li>Button<\/li><li>Button Group<\/li><li>Form Control<\/li><li>Check Box<\/li><li>File<\/li><li>Other<\/li><li>Validation<\/li><li>Input Group<\/li><li>For Select Option (Dropdown)<\/li><li>Image<\/li><li>Table<\/li><li>Alert<\/li><li>Badge<\/li><li>Dropdown<\/li><li>List<\/li><li>Colour Picker<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">CDN<\/h2>\n\n\n\n<p>\u0905\u092a\u0928\u0947 page \u092a\u0930 Bootstrap \u0936\u0941\u0930\u0942 \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;!-- CSS only --&gt;\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.1.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3\" crossorigin=\"anonymous\"&gt;\n\n&lt;!-- JavaScript Bundle with Popper --&gt;\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.1.3\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>\u0928\u093f\u092e\u094d\u0928 Code \u0915\u094b \u0906\u092a \u0915\u093f\u0938\u0940 \u092d\u0940 Boostratp Page \u0915\u0947 \u0932\u093f\u090f \u0909\u092a\u092f\u094b\u0917 \u092e\u0947 \u0932\u0947 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<p> <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"haskell\" class=\"language-haskell\">&lt;!doctype html&gt;\n&lt;html lang=\"en\"&gt;\n  &lt;head&gt;\n\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n\n    &lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.1.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3\" crossorigin=\"anonymous\"&gt;\n\n    &lt;title&gt;Title&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n\n&lt;!-- Code Here --&gt;\n\n\n    &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.1.3\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>Bootstrap : Most Useful Codes Start <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Basic <\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>sm : Small (Mobile) <\/li><li>md : Medium (Tablet) <\/li><li>lg : Large (Desktop \/Laptop) <\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Layout <\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">container       : Normal Container\ncontainer-fluid : Full Width<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"41\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-9.png?resize=640%2C41&#038;ssl=1\" alt=\"\" class=\"wp-image-5044\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-9.png?resize=1024%2C66&amp;ssl=1 1024w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-9.png?resize=300%2C19&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-9.png?resize=768%2C49&amp;ssl=1 768w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-9.png?w=1355&amp;ssl=1 1355w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-9.png?w=1280&amp;ssl=1 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">row             : \u090f\u0915 \u0932\u093e\u0907\u0928 \u0915\u0947 \u0932\u093f\u090f \ncol             : Column \u092c\u0928\u093e\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f Width \u0915\u094b 12 \u0939\u093f\u0938\u094d\u0938\u0947 \u092e\u0947 \u092c\u093e\u0902\u091f\u093e \u0917\u092f\u093e \u0939\u0948\u0902 \u0964 \ncol-md-auto     : \u091c\u094b \u092d\u0940 Size \u0936\u0947\u0937 \u092c\u091a\u0940 \u0939\u0948\u0902 \u0909\u0938\u0915\u0947 \u0932\u093f\u090f \u0964 \nw-100           : \u0907\u0938\u0915\u0947 \u092c\u093e\u0926 \u0915\u0947 Div Next Line \u092e\u0947 \u091a\u0932\u0947 \u091c\u093e\u0924\u0947 \u0939\u0948\u0902 \u0964 \norder-1         : \u0907\u0938 Clas \u0915\u094b \u0926\u0947\u0928\u0947 \u0938\u0947 Div \u0915\u0947 order change \u0939\u094b \u091c\u093e\u0924\u0947 \u0939\u0948\u0902 \u092f\u0939 \u092d\u0940 12 \u0939\u094b\u0924\u0947 \u0939\u0948\u0902 \u0964 \noffset-md-4     : \u090f\u0915 Div \u0938\u0947 Dusre Div \u0915\u0947 \u092c\u0940\u091a \u092e\u0947 Gap \u0926\u0947\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0907\u0928\u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u091c\u093e\u0924\u093e \u0939\u0948\u0902 \u0964 <\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Vertical alignment<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">align-items-start   : \u090f\u0915 div \u092e\u0947 \u0926\u0942\u0938\u0930\u0947 div \u0915\u094b top \u0938\u0947 Align \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 \nalign-items-center  : \u090f\u0915 div \u092e\u0947 \u0926\u0942\u0938\u0930\u0947 div \u0915\u094b Center \u092e\u0947 Align \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 \nalign-items-end     : \u090f\u0915 div \u092e\u0947 \u0926\u0942\u0938\u0930\u0947 div \u0915\u094b Bottom \u092e\u0947 Align \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 \n\n\nalign-self-start    : \u090f\u0915 \u0939\u0940 Div \u0915\u094b Top \u092e\u0947 Align \u0915\u0930\u0928\u0947 \u0932\u093f\u090f \u0964 \nalign-self-center   : \u090f\u0915 \u0939\u0940 Div \u0915\u094b Center \u092e\u0947 Align \u0915\u0930\u0928\u0947 \u0932\u093f\u090f \u0964 \nalign-self-end      : \u090f\u0915 \u0939\u0940 Div \u0915\u094b Bottom \u092e\u0947 Align \u0915\u0930\u0928\u0947 \u0932\u093f\u090f \u0964 <\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Horizontal alignment<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">justify-content-start     : Div \u0915\u094b Left \u092e\u0947 Align \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 \njustify-content-center    : Div \u0915\u094b Center \u092e\u0947 Align \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 \njustify-content-end       : Div \u0915\u094b Right \u092e\u0947 Align \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 \n\njustify-content-around    : Column \u0915\u0947 \u0906\u0938\u092a\u093e\u0938 Gap \u0915\u094b adjust \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964  \njustify-content-between   : Column \u0915\u0947 \u092c\u0940\u091a \u092e\u0947 Gap \u0915\u094b Adjust \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 <\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Padding &amp; Margin <\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>p  : Padding <\/li><li>m : Margin <\/li><li>l : Left<\/li><li>r : Right<\/li><li>x : Left &amp; Right<\/li><li>t : Top <\/li><li>b : Bottom <\/li><li>y : Top &amp; Bottom<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Uses <\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>p-1 : \u092f\u0926\u093f \u0939\u092e\u0947 1px \u0915\u0940 \u0938\u092d\u0940 \u0913\u0930 \u0938\u0947 Padding \u0926\u0947\u0928\u093e \u0939\u094b \u0924\u094b \u0964 <\/li><li>m-2 : \u092f\u0926\u093f \u0939\u092e\u0947 2px \u0915\u0940 \u0938\u092d\u0940 \u0913\u0930 \u0938\u0947 Margin \u0926\u0947\u0928\u093e \u0939\u094b \u0924\u094b \u0964 <\/li><li>pt-1 : Padding Top 1px  \u0926\u0947\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 <\/li><li>mb-2 : Margin Bottom 2px  \u0926\u0947\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964   <\/li><li>px-3: Padding Left &amp; Right 3px  \u0926\u0947\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964  <\/li><li>my-3: Top \u0913\u0930 Bottom \u092e\u0947 \u090f\u0915 \u0938\u093e\u0925 3px \u0915\u0940 margin \u0926\u0947\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f <\/li><li>mr-auto : \u091c\u094b \u092d\u0940 right \u092e\u0947 margin \u0939\u0948\u0902 \u0935\u0939 \u0905\u092a\u0928\u0947 \u0906\u092a \u090f\u0915 Row \u0915\u0947 \u0938\u092d\u0940 Col \u092e\u0947 \u092c\u0930\u093e\u092c\u0930 Distribute \u0939\u094b \u091c\u093e\u090f\u0917\u0940<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u0939\u092e-\u0930-\u0905\u0928-\u092f-\u0906\u0930-\u091f-\u0915\u0932\"><strong>\u0939\u092e\u093e\u0930\u0947 \u0905\u0928\u094d\u092f \u0906\u0930\u094d\u091f\u093f\u0915\u0932<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/selfimagination.in\/tips\/mysql-function\/\">MySQL Function<\/a><\/li><li><a href=\"https:\/\/selfimagination.in\/tips\/mysql-stored-procedure\/\">MySQL Stored Procedure<\/a><\/li><li><a href=\"https:\/\/selfimagination.in\/tips\/get-post-method\/\">PHP Get \/Post Method \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902 \u091c\u093e\u0928\u0947<\/a><\/li><li><a href=\"https:\/\/selfimagination.in\/tips\/php-math-function\/\">PHP Math Function \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902 \u091c\u093e\u0928\u0947<\/a><\/li><li><a href=\"https:\/\/selfimagination.in\/tips\/learn-cpp-from-c\/\">C \u0938\u0947 C ++ \u0938\u0940\u0916\u0947 \u0938\u0930\u0932 \u0936\u092c\u094d\u0926\u094b\u0902 \u092e\u0947\u0902<\/a><\/li><li><a href=\"https:\/\/selfimagination.in\/tips\/php-variables\/\">PHP Variable \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902 \u091c\u093e\u0928\u0947<\/a><\/li><li><a href=\"https:\/\/selfimagination.in\/tips\/arduino-control-structure\/\">Arduino Control Structure<\/a>\u00a0<\/li><li><a href=\"https:\/\/selfimagination.in\/tips\/c-union\/\">Union in C<\/a><\/li><li><a href=\"https:\/\/selfimagination.in\/tips\/c-pointer\/\">Declaration of Pointer in C<\/a><\/li><li><a href=\"https:\/\/selfimagination.in\/tips\/search-jquery\/\">jQuery Search Filter<\/a><\/li><li><a href=\"https:\/\/selfimagination.in\/tips\/mysql-table-create-alter-drop\/\">MySQL Create Table | Alter Table | Drop Table<\/a><\/li><li><a href=\"https:\/\/selfimagination.in\/tips\/api-using-node-react-express-mysql\/\">API Using NODE REACT EXPRESS MYSQL SEQUELIZE (For Backend OR Server Side)<\/a><\/li><li><a href=\"https:\/\/selfimagination.in\/tips\/cpanel\/\">CPANEL In Hindi<\/a><\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Colours <\/h2>\n\n\n\n<p>\u0906\u092a\u0915\u094b \u092f\u0939 \u0915\u0941\u091b Standard Colour \u0926\u0947 \u0930\u0916\u0947 \u0939\u0948\u0902 , \u0906\u092a\u0915\u094b \u0907\u0928 \u0938\u092d\u0940 \u0915\u094b \u0939\u0940 \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0928\u093e \u0939\u094b\u0924\u0947 \u0939\u0948\u0902 , \u0939\u093e \u091a\u093e\u0939\u0947 \u0924\u094b \u0906\u092a \u0907\u0928 Colour \u0915\u094b \u092c\u0926\u0932 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 , \u0932\u0947\u0915\u093f\u0928 Class \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0907\u0928 Colour \u0915\u0947 \u0906\u0927\u093e\u0930 \u092a\u0930 \u0939\u0940 \u0915\u093f\u092f\u093e \u091c\u093e\u0924\u093e \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>primary<\/li><li>secondary<\/li><li>success<\/li><li>danger<\/li><li>info<\/li><li>default<\/li><li>light<\/li><li>dark<\/li><li>white<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">  &lt;div class=\"container-fluid p-2\"&gt;    \n\t &lt;div class=\"bg-primary   w-25 text-white px-2 my-1\"&gt;primary&lt;\/div&gt; \n\t &lt;div class=\"bg-secondary w-25 text-white px-2 my-1\"&gt;secondary&lt;\/div&gt; \n\t &lt;div class=\"bg-success   w-25 text-white px-2 my-1\"&gt;success&lt;\/div&gt; \n\t &lt;div class=\"bg-danger    w-25 text-white px-2 my-1\"&gt;danger&lt;\/div&gt; \n\t &lt;div class=\"bg-info      w-25 text-white px-2 my-1\"&gt;info&lt;\/div&gt; \n\t &lt;div class=\"bg-default   w-25 text-black px-2 my-1\"&gt;default&lt;\/div&gt; \n\t &lt;div class=\"bg-light     w-25 text-black px-2 my-1\"&gt;light&lt;\/div&gt; \n\t &lt;div class=\"bg-dark      w-25 text-white px-2 my-1\"&gt;dark&lt;\/div&gt; \n\t &lt;div class=\"bg-white     w-25 text-black px-2 my-1\"&gt;white&lt;\/div&gt; \n  &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"347\" height=\"317\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-10.png?resize=347%2C317&#038;ssl=1\" alt=\"\" class=\"wp-image-5045\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-10.png?w=347&amp;ssl=1 347w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-10.png?resize=300%2C274&amp;ssl=1 300w\" sizes=\"auto, (max-width: 347px) 100vw, 347px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Text Colour <\/h2>\n\n\n\n<p>\u0906\u092a\u0915\u094b text- \u0915\u0947 \u0938\u093e\u0925 \u091c\u094b \u0915\u0932\u0930 \u0915\u0940 Coding \u0939\u0948\u0902 \u0909\u0928\u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0928\u093e \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">text-primary    : Text \u0915\u0947 Colour \u0915\u0947 \u0932\u093f\u090f\u0964  \u0906\u092a text- \u0915\u0947 \u092c\u093e\u0926 Colour code \u0932\u0917\u093e \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 \ntext-center     : Text \u0915\u093e center Alignment \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 \ntext-start      : Text \u0915\u093e Left Alignment \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 \ntext-end        : Text \u0915\u093e Right Alignment \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964  \ntext-lowercase  : Text \u0915\u094b Lowercase \u092e\u0947 Transform \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 \ntext-uppercase  : Text \u0915\u094b Uppercase \u092e\u0947 Transform \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 \ntext-capitalize : Word \u0915\u0947 First Latter \u0915\u094b Capital \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 \ntext-monospace  : Monospace Font select \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 \ntext-muted      : \u092f\u0939 \u092d\u0940 \u090f\u0915 Colour \u0939\u0948\u0902 \u0964 \nform-text       : \u091c\u092c \u0939\u092e Form Tag \u092e\u0947 \u091c\u092c text \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0947 \u0924\u092c \u092f\u0939 Class \u0932\u0917\u093e \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 <\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">   &lt;div class=\"container-fluid p-2\"&gt;    \n\t &lt;div class=\"text-primary   w-25 px-2 my-1 text-center\"&gt;primary&lt;\/div&gt; \n\t &lt;div class=\"text-secondary w-25 px-2 my-1 text-start\"&gt;secondary&lt;\/div&gt; \n\t &lt;div class=\"text-success   w-25 px-2 my-1 text-end\"&gt;success&lt;\/div&gt; \n\t &lt;div class=\"text-danger    w-25 px-2 my-1 text-lowercase \"&gt;danger&lt;\/div&gt; \n\t &lt;div class=\"text-info      w-25 px-2 my-1 text-uppercase\"&gt;info&lt;\/div&gt; \n\t &lt;div class=\"text-default   w-25 px-2 my-1 text-capitalize\"&gt;default&lt;\/div&gt; \n\t &lt;div class=\"text-light     w-25 px-2 my-1 bg-secondary\"&gt;light&lt;\/div&gt; \n\t &lt;div class=\"text-dark      w-25 px-2 my-1 text-monospace\"&gt;dark&lt;\/div&gt; \n\t &lt;div class=\"text-white     w-25 px-2 my-1 bg-black\"&gt;white&lt;\/div&gt; \n\t &lt;div class=\"text-muted     w-25 px-2 my-1 form-text     \"&gt;muted&lt;\/div&gt; \n  &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"346\" height=\"350\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-11.png?resize=346%2C350&#038;ssl=1\" alt=\"\" class=\"wp-image-5049\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-11.png?w=346&amp;ssl=1 346w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-11.png?resize=297%2C300&amp;ssl=1 297w\" sizes=\"auto, (max-width: 346px) 100vw, 346px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Background Colour  <\/h2>\n\n\n\n<p>Background Colour \u0915\u094b \u092c\u0926\u0932\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0906\u092a\u0915\u094b bg- \u0915\u0947 \u0938\u093e\u0925 \u091c\u094b \u0915\u0932\u0930 \u0915\u0940 Coding \u0939\u0948\u0902 \u0909\u0928\u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0928\u093e \u0939\u0948\u0902 \u0964  <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">bg-success  : Background Colour \u092c\u0926\u0932\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 Success \u092f\u093e\u0928\u093f Green (Theme \u0915\u0947 \u0905\u0928\u0941\u0938\u093e\u0930)\nbg-danger   : Background Colour \u092c\u0926\u0932\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 Danger \u092f\u093e\u0928\u093f Red (Theme \u0915\u0947 \u0905\u0928\u0941\u0938\u093e\u0930) <\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">  &lt;div class=\"container-fluid p-2\"&gt;    \n\t &lt;div class=\"bg-primary   w-25 text-white px-2 my-1\"&gt;primary&lt;\/div&gt; \n\t &lt;div class=\"bg-secondary w-25 text-white px-2 my-1\"&gt;secondary&lt;\/div&gt; \n\t &lt;div class=\"bg-success   w-25 text-white px-2 my-1\"&gt;success&lt;\/div&gt; \n\t &lt;div class=\"bg-danger    w-25 text-white px-2 my-1\"&gt;danger&lt;\/div&gt; \n\t &lt;div class=\"bg-info      w-25 text-white px-2 my-1\"&gt;info&lt;\/div&gt; \n\t &lt;div class=\"bg-default   w-25 text-black px-2 my-1\"&gt;default&lt;\/div&gt; \n\t &lt;div class=\"bg-light     w-25 text-black px-2 my-1\"&gt;light&lt;\/div&gt; \n\t &lt;div class=\"bg-dark      w-25 text-white px-2 my-1\"&gt;dark&lt;\/div&gt; \n\t &lt;div class=\"bg-white     w-25 text-black px-2 my-1\"&gt;white&lt;\/div&gt; \n  &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"347\" height=\"317\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-10.png?resize=347%2C317&#038;ssl=1\" alt=\"\" class=\"wp-image-5045\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-10.png?w=347&amp;ssl=1 347w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-10.png?resize=300%2C274&amp;ssl=1 300w\" sizes=\"auto, (max-width: 347px) 100vw, 347px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Button <\/h2>\n\n\n\n<p>\u0915\u093f\u0938\u0940 \u092d\u0940 DOM \u092a\u0930 \u092f\u0926\u093f \u0939\u092e btn class \u0932\u0917\u093e \u0926\u0947\u0924\u0947 \u0939\u0948 \u0924\u094b \u0909\u0938\u0915\u093e \u0906\u0915\u093e\u0930 button \u091c\u0948\u0938\u093e \u0939\u094b \u091c\u093e\u0924\u093e \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">btn                 : \u0907\u0938 Class \u0915\u094b \u0932\u0917\u093e\u0928\u0947 \u0938\u0947 Button Shape \u0906 \u091c\u093e\u0924\u093e \u0939\u0948 \u0964 \nbtn btn-success     : Button \u0915\u0947 Colour \u0915\u0947 \u0932\u093f\u090f \u0907\u0938 Class \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u091c\u093e\u0924\u093e \u0939\u0948 \u0964 \nbtn-outline-primary : Outline Style Set \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 \nbtn-lg              : \u092c\u095c\u0947 Button \u0915\u0947 \u0932\u093f\u090f \u0964 \nbtn-sm              : \u091b\u094b\u091f\u0947 Button \u0915\u0947 \u0932\u093f\u090f \u0964 \nbtn-link            : Link style Button \u092c\u0928\u093e\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 \n<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">  &lt;div class=\"container-fluid p-2\"&gt;    \n  \t &lt;button class=\"btn btn-primary\"&gt;primary&lt;\/button&gt; \n\t &lt;button class=\"btn btn-outline-secondary\"&gt;secondary&lt;\/button&gt; \n\t &lt;button class=\"btn btn-sm btn-success\"&gt;success&lt;\/button&gt; \n\t &lt;button class=\"btn btn-danger\"&gt;danger&lt;\/button&gt; \n\t &lt;button class=\"btn btn-lg btn-info\"&gt;info&lt;\/button&gt; \n\t &lt;button class=\"btn btn-default\"&gt;default&lt;\/button&gt; \n\t &lt;button class=\"btn btn-light  \"&gt;light&lt;\/button&gt; \n\t &lt;button class=\"btn btn-link  \"&gt;link&lt;\/button&gt; \n\n  &lt;\/div&gt;\t \n  &lt;div class=\"container-fluid p-2 d-grid gap-2\"&gt;    \n\t &lt;button class=\"btn btn-dark\"&gt;dark&lt;\/button&gt; \n\t &lt;button class=\"btn btn-block btn-lg btn-white\"&gt;white&lt;\/button&gt; \n  &lt;\/div&gt;\t<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"154\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-12.png?resize=640%2C154&#038;ssl=1\" alt=\"\" class=\"wp-image-5063\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-12.png?w=818&amp;ssl=1 818w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-12.png?resize=300%2C72&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-12.png?resize=768%2C185&amp;ssl=1 768w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Button Group <\/h3>\n\n\n\n<p>\u090f\u0915 \u0938\u0947 \u0905\u0927\u093f\u0915 Button \u0915\u093e \u0917\u094d\u0930\u0941\u092a \u092c\u0928\u093e\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0907\u0928 Class \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0924\u0947 \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">btn-toolbar       : \u0907\u0938 Toolbar \u092e\u0947 \u0939\u092e \u090f\u0915 \u0938\u0947 \u0905\u0927\u093f\u0915 Button Group \u0915\u094b Attach \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902\u0964 \nbtn-group         : \u090f\u0915 \u0938\u0947 \u0905\u0927\u093f\u0915 Button \u0915\u094b \u0907\u0938 Class \u092e\u0947 \u0930\u0916 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 \nbtn-group-vertical: \u092f\u0926\u093f \u0906\u092a\u0915 \u090f\u0915 button \u0915\u0947 \u0928\u0940\u091a\u0947 \u0926\u0942\u0938\u0930\u0947 button \u0915\u094b Group \u0915\u0930\u0928\u093e \u091a\u093e\u0939\u0924\u0947 \u0939\u0948\u0902 \u0924\u094b\u0964 \n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\"> &lt;div class=\"container-fluid p-2 \"&gt;  \n\t\t&lt;div class=\"btn-group\"&gt; \n\t\t\t&lt;button class=\"btn btn-primary\"&gt;primary&lt;\/button&gt;\n\t\t\t&lt;button class=\"btn btn-outline-secondary\"&gt;secondary&lt;\/button&gt; \n\t\t\t&lt;button class=\"btn btn-sm btn-success\"&gt;success&lt;\/button&gt; \t\t\n\t\t&lt;\/div&gt;\n\t\t&lt;div class=\"btn-group-vertical\"&gt; \n\t\t\t&lt;button class=\"btn btn-danger\"&gt;danger&lt;\/button&gt;\n\t\t\t&lt;button class=\"btn btn-info\"&gt;info&lt;\/button&gt; \n\t\t\t&lt;button class=\"btn btn-dark\"&gt;dark&lt;\/button&gt; \t\t\n\t\t&lt;\/div&gt;\n\t\t\n\t\t&lt;div class=\"btn-toolbar mt-2\"&gt; \n\t\t\t&lt;div class=\"btn-group me-2\"&gt; \n\t\t\t\t&lt;button class=\"btn btn-primary\"&gt;1&lt;\/button&gt;\n\t\t\t\t&lt;button class=\"btn btn-primary\"&gt;2&lt;\/button&gt; \n\t\t\t\t&lt;button class=\"btn btn-primary\"&gt;3&lt;\/button&gt; \t\t\n\t\t\t&lt;\/div&gt;\n\t\t\t&lt;div class=\"btn-group me-2\"&gt; \n\t\t\t\t&lt;button class=\"btn btn-secondary\"&gt;1&lt;\/button&gt;\n\t\t\t\t&lt;button class=\"btn btn-secondary\"&gt;2&lt;\/button&gt; \n\t\t\t\t&lt;button class=\"btn btn-secondary\"&gt;3&lt;\/button&gt; \t\t\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n  &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"411\" height=\"208\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-13.png?resize=411%2C208&#038;ssl=1\" alt=\"\" class=\"wp-image-5068\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-13.png?w=411&amp;ssl=1 411w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-13.png?resize=300%2C152&amp;ssl=1 300w\" sizes=\"auto, (max-width: 411px) 100vw, 411px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Form Control <\/h2>\n\n\n\n<p>\u0938\u092d\u0940 \u0924\u0930\u0939 \u0915\u0947 form Control \u091c\u0948\u0938\u0947 \u0915\u0940 Input , Textarea \u0906\u0926\u093f \u092a\u0930 \u0939\u092e \u092f\u0939 \u0915\u094d\u0932\u093e\u0938 \u0932\u0917\u093e \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">form-control\nform-control-lg        : Large\nform-control-sm        : Small\nform-control-plaintext : Border Show \u0928\u0939\u0940\u0902 \u0915\u0930\u0928\u093e \u0939\u094b \u0924\u094b \u0964 \n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Check Box <\/h3>\n\n\n\n<p>Check Box \u0915\u0947 \u0932\u093f\u090f \u0939\u092e\u093e\u0930\u0947 \u092a\u093e\u0938  form-check-input Class \u0939\u0948\u0902 \u0913\u0930 \u0909\u0938\u0938\u0947 \u0938\u0902\u092c\u0902\u0927\u093f\u0924 Class \u0915\u0940 \u0932\u093f\u0938\u094d\u091f \u0928\u093f\u092e\u094d\u0928 \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">form-check-input  : Input type Check \u0915\u0947 \u0932\u093f\u090f Class \nform-check-label  : Check Box \u0915\u0947 \u0932\u093f\u090f Label \nform-check-inline : \u090f\u0915 \u0939\u093f \u0932\u093e\u0907\u0928 \u092e\u0947 \u090f\u0915 \u0938\u0947 \u0905\u0927\u093f\u0915 Check Box \u0932\u0947\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \nposition-static<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">File <\/h3>\n\n\n\n<p>\u092f\u0926\u093f \u0906\u092a File Selection \u0915\u093e option \u0932\u0917\u093e\u0928\u093e \u091a\u093e\u0939\u0924\u0947 \u0939\u0948\u0902 \u0924\u094b \u0907\u0938 Class \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">form-control : File Choose input \u092a\u0930 \u0907\u0938 \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0924\u0947 \u0939\u0948\u0902 \u0964 <\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;div class=\"container-fluid p-2 \"&gt;  \n\t&lt;label class=\"form-label mt-2\"&gt;form-label&lt;\/label&gt;\n\t&lt;input type=\"email\" class=\"form-control mt-2\" value=\"input type email form-control\"&gt;\n\t\t\n\t&lt;textarea class=\"form-control mt-2\" &gt;textarea form-control&lt;\/textarea&gt;\n\t\n\t&lt;input type=\"text\" class=\"form-control-plaintext mt-2\" value=\"input type text form-control-plaintext\"&gt;\n\t\n\t&lt;div class=\"mt-2 border rounded\"&gt;\n\t\t&lt;label class=\"form-label mt-2\"&gt;input type file form-control&lt;\/label&gt;\n\t\t&lt;input type=\"file\" class=\"form-control \"&gt;\n\t&lt;\/div&gt;\n\t\n\t&lt;div class=\"mt-2 border rounded\"&gt;\n\t\t\n\t\t&lt;input  type=\"color\" class=\"form-control-color\"&gt;\n\t\t&lt;label class=\"form-label \"&gt;input type color form-control-color&lt;\/label&gt;\n\t&lt;\/div&gt;\n\t\n\t&lt;div class=\"mt-2 border rounded\"&gt;\n\t\t\n\t\t&lt;input  type=\"checkbox\" class=\"form-check-input\"&gt;\n\t\t&lt;input  type=\"checkbox\" class=\"form-check-input\"&gt;\n\t\t&lt;input  type=\"checkbox\" class=\"form-check-input\"&gt;\n\t\t&lt;label class=\"form-label \"&gt;input type checkbox form-check-input&lt;\/label&gt;\n\t&lt;\/div&gt;\n\t&lt;div class=\"mt-2 border rounded\"&gt;\n\t\t\n\t\t&lt;input  type=\"radio\" class=\"form-check-input\"&gt;\n\t\t&lt;input  type=\"radio\" class=\"form-check-input\"&gt;\n\t\t&lt;input  type=\"radio\" class=\"form-check-input\"&gt;\n\t\t&lt;label class=\"form-label \"&gt;input type checkbox form-check-input&lt;\/label&gt;\n\t&lt;\/div&gt;\n\t\n\t&lt;div class=\"mt-2 border rounded\"&gt;\n\t\t&lt;label class=\"form-label \"&gt;select form-select&lt;\/label&gt;\n\t\t&lt;select class=\"form-select\" &gt;\n\t\t\t&lt;option&gt;Option 1&lt;\/option&gt;\n\t\t\t&lt;option&gt;Option 2&lt;\/option&gt;\n\t\t\t&lt;option&gt;Option 3&lt;\/option&gt;\n\t\t&lt;\/select  &gt;\n\t&lt;\/div&gt;\n  \n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"631\" height=\"632\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-14.png?resize=631%2C632&#038;ssl=1\" alt=\"\" class=\"wp-image-5072\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-14.png?w=631&amp;ssl=1 631w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-14.png?resize=300%2C300&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/image-14.png?resize=150%2C150&amp;ssl=1 150w\" sizes=\"auto, (max-width: 631px) 100vw, 631px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Other <\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">form-group\nform-row\ncol-form-label-sm\nalign-items-center<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Validation <\/h3>\n\n\n\n<p>\u092f\u0926\u093f \u0906\u092a Validation \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0930\u0939\u0947 \u0939\u0948\u0902 \u0924\u094b \u0906\u092a \u0907\u0928 Class \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">form-inline\nsr-only\n\nis-valid          : Form Control \u092a\u0930 \u092f\u0939 Class \u0932\u0917\u093e\u0928\u0947 \u0938\u0947 \u0909\u0938\u0915\u0940 Border Green \u0939\u094b \u091c\u093e\u0924\u0940 \u0939\u0948\u0902 \u0964 \nis-invalid        : Form Control \u092a\u0930 \u092f\u0939 Class \u0932\u0917\u093e\u0928\u0947 \u0938\u0947 \u0909\u0938\u0915\u0940 Border Red \u0939\u094b \u091c\u093e\u0924\u0940 \u0939\u0948\u0902 \u0964 \nvalid-feedback    : Validation Message Green  \u0926\u093f\u0916\u093e\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0907\u0938 Class \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0947 \u0964 \ninvalid-feedback  : Validation Message Red \u0926\u093f\u0916\u093e\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0907\u0938 Class \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0947 \u0964 <\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Input Group <\/h2>\n\n\n\n<p>Input \u0915\u0947 \u0938\u093e\u0925 \u0932\u0947\u092c\u0932 \u092f\u093e \u0905\u0928\u094d\u092f dom \u0915\u094b Merge \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0906\u092a Input Group \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964  <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">input-group\ninput-group-prepend\ninput-group-text\ninput-group-append<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">For Select Option (Dropdown) <\/h2>\n\n\n\n<p>Select option \u0915\u0947 \u0932\u093f\u090f \u0907\u0928 Class \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u091c\u093e\u0924\u093e \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">form-select\nform-select-lg : Large \nform-select-sm : Small <\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Border <\/h2>\n\n\n\n<p>\u092f\u0926\u093f \u0906\u092a \u0915\u093f\u0938\u0940 \u092d\u0940 Div \u092a\u0930 Border \u0932\u0917\u093e\u0928\u093e \u091a\u093e\u0939\u0924\u0947 \u0939\u0948\u0902 \u0924\u094b \u0906\u092a \u0907\u0938 Class \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">border  : Border \u0926\u0947\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0907\u0938 Class \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u091c\u093e\u0924\u093e \u0939\u0948\u0902\u0964 \n<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Image <\/h2>\n\n\n\n<p>Image \u092a\u0930 \u0932\u0917\u093e\u0928\u0947 \u0935\u093e\u0932\u0940 Class \u0907\u0938 \u092a\u094d\u0930\u0915\u093e\u0930 \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">img-fluid      : Full Width Resposive Image \u0915\u0947 \u0932\u093f\u090f \u0964 \nimg-thumbnail  : Image \u0915\u094b Thumbnail \u0926\u093f\u0916\u093e\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0907\u0938 Class \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u091c\u093e\u0924\u093e \u0939\u0948\u0902 \u0964 \nrounded        : Corner \u0915\u094b Round \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 \nfloat-left     : Left \u0915\u0940 \u0913\u0930 \u0938\u0947 Image \u0926\u093f\u0916\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 \nd-block        :<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Table <\/h2>\n\n\n\n<p>Table \u092a\u0930 \u0909\u092a\u092f\u094b\u0917 \u0939\u094b\u0928\u0947 \u0935\u093e\u0932\u0940 Class \u0907\u0938 \u092a\u094d\u0930\u0915\u093e\u0930 \u0939\u0948 \u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">table            : \u0907\u0938 Class \u0938\u0947 Table Look \u0906\u0924\u093e \u0939\u0948\u0902 \u0964 \ntable-striped    : \ntable-dark       : Dark Theme \u0915\u0932\u0930 \u0915\u0947 \u0932\u093f\u090f \u0907\u0938\u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0924\u0947 \u0939\u0948\u0902 \u0964 \ntable-bordered   : Table \u0915\u0940 Cell \u092a\u0930 Border \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0907\u0938 Class \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0924\u0947 \u0939\u0948\u0902 \u0964 \ntable-hover      : Cursor \u0932\u0947 \u091c\u093e\u0928\u0947 \u092a\u0930 Colour \u092c\u0926\u0932\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0907\u0938 Class \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0924\u0947 \u0939\u0948\u0902 \u0964 \ntable-sm         : Padding \u0915\u092e \n\ntr \ntable-primary       : Colour \u092c\u0926\u0932\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 \n\ntable-responsive    : Responsive Table \u092c\u0928\u093e\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 \n\ntable-responsive-sm : Responsive When Small Size Device \ntable-responsive-md : Responsive When Medium Size Device <\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Alert <\/h2>\n\n\n\n<p>\u092f\u0926\u093f \u0906\u092a Alert \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0930\u0939\u0947 \u0939\u0948\u0902 \u0924\u094b \u0907\u0928 Class \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">alert alert-primary          : Alert Box \u092c\u0928\u093e\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0914\u0930 \u0938\u093e\u0925 \u092e\u0947 \u0915\u0932\u0930 \u0926\u0947\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 \nalert-link                   : \u092f\u0926\u093f Alert \u092e\u0947 \u0915\u094b\u0908 Link \u0939\u094b \u0924\u094b \u0909\u0938\u0947 \u0905\u0932\u0917 \u0926\u093f\u0916\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 \nalert-heading                : Alert \u0915\u0940 Heading \u0926\u0947\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 \nalert-dismissible fade show  : Alert \u092e\u0947 Close Button \u0932\u0917\u093e\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 <\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Badge <\/h2>\n\n\n\n<p>\u0915\u093f\u0938\u0940 \u092d\u0940 span \u092a\u0930 \u092f\u0926\u093f \u0906\u092a Badge \u0932\u0917\u093e\u0928\u093e \u091a\u093e\u0939\u0947 \u0924\u094b \u0906\u092a\u0915\u094b \u0907\u0928 Class \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0928\u093e \u0939\u094b\u0917\u093e \u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">badge badge-secondary : Badge \u0932\u0917\u093e\u0928\u093e \u0913\u0930 \u0909\u0938\u0915\u093e Colour \u092c\u0926\u0932\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 \nbadge-pill            : Left \u0913\u0930 Right Corner \u0915\u094b Round \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964  <\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Dropdown<\/h2>\n\n\n\n<p>Dropdown \u0932\u0917\u093e\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0907\u0938 Class \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">dropdown-menu\n<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">List <\/h2>\n\n\n\n<p>\u092f\u0926\u093f \u0906\u092a List \u092c\u0928\u093e\u0928\u093e \u091a\u093e\u0939\u0947 \u0924\u094b \u0907\u0928 class \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">list-group       : \u0915\u094b\u0908 \u092d\u0940 List \u092c\u0928\u093e\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 \nlist-group-item  : List \u0915\u0947 Item \u092a\u0930 \u092f\u0939 class \u0932\u0917\u093e\u0928\u093e \u0939\u094b\u0924\u0940 \u0939\u0948\u0902 \u0964 <\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Colour Picker <\/h2>\n\n\n\n<p>Colour Picker \u092a\u0930 \u0906\u092a \u0907\u0928 Class \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">form-control-color <\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Refrence <\/h2>\n\n\n\n<p>\u0907\u0938 \u0906\u0930\u094d\u091f\u093f\u0915\u0932 \u0915\u094b <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noopener\">Boostrap Website<\/a> \u0938\u0947 Read \u0915\u0930 \u0936\u0949\u0930\u094d\u091f \u092e\u0947 \u0932\u093f\u0916\u093e \u0917\u092f\u093e \u0939\u0948\u0902 \u0938\u093e\u0925 \u092e\u0947 \u0938\u092e\u091d\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0939\u093f\u0928\u094d\u0926\u0940 \u092e\u0947 \u0905\u092a\u0928\u0947 \u0936\u092c\u094d\u0926\u094b\u0902 \u092e\u0947 \u0932\u093f\u0916\u093e \u0939\u0948\u0902 \u092f\u0926\u093f \u0906\u092a Detail \u092e\u0947 Read \u0915\u0930\u0928\u093e \u091a\u093e\u0939\u0924\u0947 \u0939\u0948\u0902 \u0924\u094b \u0907\u0938 Website \u0938\u0947 \u0926\u0947\u0916 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>\u0906\u092a\u0915\u094b Bootstrap : Most Useful Codes Article \u0915\u0948\u0938\u093e \u0932\u0917\u093e \u0939\u092e\u0947 \u091c\u0930\u0942\u0930 \u092c\u0924\u093e\u090f , \u0905\u092a\u0928\u093e \u0915\u0940\u092e\u0924\u0940 \u0938\u092e\u092f \u0926\u0947\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0927\u0928\u094d\u092f\u0935\u093e\u0926 <\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u091c\u092c \u092d\u0940 \u0906\u092a\u0915\u094b \u0915\u094b\u0908 \u092d\u0940 Html Page \u092c\u0928\u093e\u0928\u093e \u0939\u094b \u0924\u092c \u0906\u092a\u0915\u094b Page \u0915\u094b Responsive \u0913\u0930 \u090f\u0915 Standard Level \u0915\u0940 Coding \u0915\u0947 \u0932\u093f\u090f Bootstrap \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0928\u093e \u091a\u093e\u0939\u093f\u090f, Bootstrap : Most Useful Codes \u092a\u0930 \u0905\u0927\u093f\u0915 \u0915\u093e\u092e \u092e\u0947 \u0906\u0928\u0947 \u0935\u093e\u0932\u0947 Code \u0915\u0940 \u090f\u0915 \u0932\u093f\u0938\u094d\u091f \u092c\u0928\u093e \u0915\u0930 \u0926\u0940 \u0939\u0948\u0902 \u0924\u093e\u0915\u093f \u0906\u092a\u0915\u094b Coding \u0915\u0930\u0924\u0947 \u0938\u092e\u092f Internet \u092a\u0930 Searching \u0915\u0940 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5077,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[14],"tags":[],"class_list":["post-4859","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2021\/11\/boostrap-most-useful-codes.jpg?fit=1200%2C628&ssl=1","_links":{"self":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts\/4859","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/comments?post=4859"}],"version-history":[{"count":213,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts\/4859\/revisions"}],"predecessor-version":[{"id":8730,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts\/4859\/revisions\/8730"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/media\/5077"}],"wp:attachment":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/media?parent=4859"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/categories?post=4859"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/tags?post=4859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}