Bootstrap : Most Useful Codes to use while coding

Sandip Nigam | December 20, 2021 | Bootstrap | No Comments

जब भी आपको कोई भी Html Page बनाना हो तब आपको Page को Responsive ओर एक Standard Level की Coding के लिए Bootstrap का उपयोग करना चाहिए, Bootstrap : Most Useful Codes पर अधिक काम मे आने वाले Code की एक लिस्ट बना कर दी हैं ताकि आपको Coding करते समय Internet पर Searching की जरूरत न लगे ।

Topic Covered

CDN
Basic
Layout
Vertical alignment
Horizontal alignment
Padding & Margin
Colours
Text Colour
Background Colour
Button
Button Group
Form Control
Check Box
File
Other
Validation
Input Group
For Select Option (Dropdown)
Image
Table
Alert
Badge
Dropdown
List
Colour Picker

CDN

अपने page पर Bootstrap शुरू करने के लिए

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<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"></script>

निम्न Code को आप किसी भी Boostratp Page के लिए उपयोग मे ले सकते हैं ।

<!doctype html>
<html lang="en">
  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Title</title>
  </head>
  <body>

<!-- Code Here -->


    <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"></script>

  </body>
</html>

Bootstrap : Most Useful Codes Start

Basic

sm : Small (Mobile)
md : Medium (Tablet)
lg : Large (Desktop /Laptop)

Layout

container       : Normal Container
container-fluid : Full Width

row             : एक लाइन के लिए 
col             : Column बनाने के लिए Width को 12 हिस्से मे बांटा गया हैं । 
col-md-auto     : जो भी Size शेष बची हैं उसके लिए । 
w-100           : इसके बाद के Div Next Line मे चले जाते हैं । 
order-1         : इस Clas को देने से Div के order change हो जाते हैं यह भी 12 होते हैं । 
offset-md-4     : एक Div से Dusre Div के बीच मे Gap देने के लिए इनका उपयोग किया जाता हैं ।

Vertical alignment

align-items-start   : एक div मे दूसरे div को top से Align करने के लिए । 
align-items-center  : एक div मे दूसरे div को Center मे Align करने के लिए । 
align-items-end     : एक div मे दूसरे div को Bottom मे Align करने के लिए । 


align-self-start    : एक ही Div को Top मे Align करने लिए । 
align-self-center   : एक ही Div को Center मे Align करने लिए । 
align-self-end      : एक ही Div को Bottom मे Align करने लिए ।

Horizontal alignment

justify-content-start     : Div को Left मे Align करने के लिए । 
justify-content-center    : Div को Center मे Align करने के लिए । 
justify-content-end       : Div को Right मे Align करने के लिए । 

justify-content-around    : Column के आसपास Gap को adjust करने के लिए ।  
justify-content-between   : Column के बीच मे Gap को Adjust करने के लिए ।

Padding & Margin

p : Padding
m : Margin
l : Left
r : Right
x : Left & Right
t : Top
b : Bottom
y : Top & Bottom

Uses

p-1 : यदि हमे 1px की सभी ओर से Padding देना हो तो ।
m-2 : यदि हमे 2px की सभी ओर से Margin देना हो तो ।
pt-1 : Padding Top 1px देने के लिए ।
mb-2 : Margin Bottom 2px देने के लिए ।
px-3: Padding Left & Right 3px देने के लिए ।
my-3: Top ओर Bottom मे एक साथ 3px की margin देने के लिए
mr-auto : जो भी right मे margin हैं वह अपने आप एक Row के सभी Col मे बराबर Distribute हो जाएगी

हमारे अन्य आर्टिकल

Colours

आपको यह कुछ Standard Colour दे रखे हैं , आपको इन सभी को ही उपयोग करना होते हैं , हा चाहे तो आप इन Colour को बदल सकते हैं , लेकिन Class का उपयोग इन Colour के आधार पर ही किया जाता हैं ।

primary
secondary
success
danger
info
default
light
dark
white

  <div class="container-fluid p-2">    
	 <div class="bg-primary   w-25 text-white px-2 my-1">primary</div> 
	 <div class="bg-secondary w-25 text-white px-2 my-1">secondary</div> 
	 <div class="bg-success   w-25 text-white px-2 my-1">success</div> 
	 <div class="bg-danger    w-25 text-white px-2 my-1">danger</div> 
	 <div class="bg-info      w-25 text-white px-2 my-1">info</div> 
	 <div class="bg-default   w-25 text-black px-2 my-1">default</div> 
	 <div class="bg-light     w-25 text-black px-2 my-1">light</div> 
	 <div class="bg-dark      w-25 text-white px-2 my-1">dark</div> 
	 <div class="bg-white     w-25 text-black px-2 my-1">white</div> 
  </div>

Text Colour

आपको text- के साथ जो कलर की Coding हैं उनका उपयोग करना हैं ।

text-primary    : Text के Colour के लिए।  आप text- के बाद Colour code लगा सकते हैं । 
text-center     : Text का center Alignment करने के लिए । 
text-start      : Text का Left Alignment करने के लिए । 
text-end        : Text का Right Alignment करने के लिए ।  
text-lowercase  : Text को Lowercase मे Transform करने के लिए । 
text-uppercase  : Text को Uppercase मे Transform करने के लिए । 
text-capitalize : Word के First Latter को Capital करने के लिए । 
text-monospace  : Monospace Font select करने के लिए । 
text-muted      : यह भी एक Colour हैं । 
form-text       : जब हम Form Tag मे जब text का उपयोग करे तब यह Class लगा सकते हैं ।

   <div class="container-fluid p-2">    
	 <div class="text-primary   w-25 px-2 my-1 text-center">primary</div> 
	 <div class="text-secondary w-25 px-2 my-1 text-start">secondary</div> 
	 <div class="text-success   w-25 px-2 my-1 text-end">success</div> 
	 <div class="text-danger    w-25 px-2 my-1 text-lowercase ">danger</div> 
	 <div class="text-info      w-25 px-2 my-1 text-uppercase">info</div> 
	 <div class="text-default   w-25 px-2 my-1 text-capitalize">default</div> 
	 <div class="text-light     w-25 px-2 my-1 bg-secondary">light</div> 
	 <div class="text-dark      w-25 px-2 my-1 text-monospace">dark</div> 
	 <div class="text-white     w-25 px-2 my-1 bg-black">white</div> 
	 <div class="text-muted     w-25 px-2 my-1 form-text     ">muted</div> 
  </div>

Background Colour

Background Colour को बदलने के लिए आपको bg- के साथ जो कलर की Coding हैं उनका उपयोग करना हैं ।

bg-success  : Background Colour बदलने के लिए । Success यानि Green (Theme के अनुसार)
bg-danger   : Background Colour बदलने के लिए । Danger यानि Red (Theme के अनुसार)

  <div class="container-fluid p-2">    
	 <div class="bg-primary   w-25 text-white px-2 my-1">primary</div> 
	 <div class="bg-secondary w-25 text-white px-2 my-1">secondary</div> 
	 <div class="bg-success   w-25 text-white px-2 my-1">success</div> 
	 <div class="bg-danger    w-25 text-white px-2 my-1">danger</div> 
	 <div class="bg-info      w-25 text-white px-2 my-1">info</div> 
	 <div class="bg-default   w-25 text-black px-2 my-1">default</div> 
	 <div class="bg-light     w-25 text-black px-2 my-1">light</div> 
	 <div class="bg-dark      w-25 text-white px-2 my-1">dark</div> 
	 <div class="bg-white     w-25 text-black px-2 my-1">white</div> 
  </div>

Button

किसी भी DOM पर यदि हम btn class लगा देते है तो उसका आकार button जैसा हो जाता हैं ।

btn                 : इस Class को लगाने से Button Shape आ जाता है । 
btn btn-success     : Button के Colour के लिए इस Class का उपयोग किया जाता है । 
btn-outline-primary : Outline Style Set करने के लिए । 
btn-lg              : बड़े Button के लिए । 
btn-sm              : छोटे Button के लिए । 
btn-link            : Link style Button बनाने के लिए ।

  <div class="container-fluid p-2">    
  	 <button class="btn btn-primary">primary</button> 
	 <button class="btn btn-outline-secondary">secondary</button> 
	 <button class="btn btn-sm btn-success">success</button> 
	 <button class="btn btn-danger">danger</button> 
	 <button class="btn btn-lg btn-info">info</button> 
	 <button class="btn btn-default">default</button> 
	 <button class="btn btn-light  ">light</button> 
	 <button class="btn btn-link  ">link</button> 

  </div>	 
  <div class="container-fluid p-2 d-grid gap-2">    
	 <button class="btn btn-dark">dark</button> 
	 <button class="btn btn-block btn-lg btn-white">white</button> 
  </div>

Button Group

एक से अधिक Button का ग्रुप बनाने के लिए इन Class का उपयोग करते हैं ।

btn-toolbar       : इस Toolbar मे हम एक से अधिक Button Group को Attach कर सकते हैं। 
btn-group         : एक से अधिक Button को इस Class मे रख सकते हैं । 
btn-group-vertical: यदि आपक एक button के नीचे दूसरे button को Group करना चाहते हैं तो।

 <div class="container-fluid p-2 ">  
		<div class="btn-group"> 
			<button class="btn btn-primary">primary</button>
			<button class="btn btn-outline-secondary">secondary</button> 
			<button class="btn btn-sm btn-success">success</button> 		
		</div>
		<div class="btn-group-vertical"> 
			<button class="btn btn-danger">danger</button>
			<button class="btn btn-info">info</button> 
			<button class="btn btn-dark">dark</button> 		
		</div>
		
		<div class="btn-toolbar mt-2"> 
			<div class="btn-group me-2"> 
				<button class="btn btn-primary">1</button>
				<button class="btn btn-primary">2</button> 
				<button class="btn btn-primary">3</button> 		
			</div>
			<div class="btn-group me-2"> 
				<button class="btn btn-secondary">1</button>
				<button class="btn btn-secondary">2</button> 
				<button class="btn btn-secondary">3</button> 		
			</div>
		</div>
  </div>

Form Control

सभी तरह के form Control जैसे की Input , Textarea आदि पर हम यह क्लास लगा सकते हैं ।

form-control
form-control-lg        : Large
form-control-sm        : Small
form-control-plaintext : Border Show नहीं करना हो तो ।

Check Box

Check Box के लिए हमारे पास form-check-input Class हैं ओर उससे संबंधित Class की लिस्ट निम्न हैं ।

form-check-input  : Input type Check के लिए Class 
form-check-label  : Check Box के लिए Label 
form-check-inline : एक हि लाइन मे एक से अधिक Check Box लेने के लिए 
position-static

File

यदि आप File Selection का option लगाना चाहते हैं तो इस Class का उपयोग कर सकते हैं ।

form-control : File Choose input पर इस का उपयोग करते हैं ।

<div class="container-fluid p-2 ">  
	<label class="form-label mt-2">form-label</label>
	<input type="email" class="form-control mt-2" value="input type email form-control">
		
	<textarea class="form-control mt-2" >textarea form-control</textarea>
	
	<input type="text" class="form-control-plaintext mt-2" value="input type text form-control-plaintext">
	
	<div class="mt-2 border rounded">
		<label class="form-label mt-2">input type file form-control</label>
		<input type="file" class="form-control ">
	</div>
	
	<div class="mt-2 border rounded">
		
		<input  type="color" class="form-control-color">
		<label class="form-label ">input type color form-control-color</label>
	</div>
	
	<div class="mt-2 border rounded">
		
		<input  type="checkbox" class="form-check-input">
		<input  type="checkbox" class="form-check-input">
		<input  type="checkbox" class="form-check-input">
		<label class="form-label ">input type checkbox form-check-input</label>
	</div>
	<div class="mt-2 border rounded">
		
		<input  type="radio" class="form-check-input">
		<input  type="radio" class="form-check-input">
		<input  type="radio" class="form-check-input">
		<label class="form-label ">input type checkbox form-check-input</label>
	</div>
	
	<div class="mt-2 border rounded">
		<label class="form-label ">select form-select</label>
		<select class="form-select" >
			<option>Option 1</option>
			<option>Option 2</option>
			<option>Option 3</option>
		</select  >
	</div>
  
</div>

Other

form-group
form-row
col-form-label-sm
align-items-center

Validation

यदि आप Validation का उपयोग कर रहे हैं तो आप इन Class का उपयोग कर सकते हैं ।

form-inline
sr-only

is-valid          : Form Control पर यह Class लगाने से उसकी Border Green हो जाती हैं । 
is-invalid        : Form Control पर यह Class लगाने से उसकी Border Red हो जाती हैं । 
valid-feedback    : Validation Message Green  दिखाने के लिए इस Class का उपयोग करे । 
invalid-feedback  : Validation Message Red दिखाने के लिए इस Class का उपयोग करे ।

Input Group

Input के साथ लेबल या अन्य dom को Merge करने के लिए आप Input Group का उपयोग कर सकते हैं ।

input-group
input-group-prepend
input-group-text
input-group-append

For Select Option (Dropdown)

Select option के लिए इन Class का उपयोग किया जाता हैं ।

form-select
form-select-lg : Large 
form-select-sm : Small

Border

यदि आप किसी भी Div पर Border लगाना चाहते हैं तो आप इस Class का उपयोग कर सकते हैं ।

border  : Border देने के लिए इस Class का उपयोग किया जाता हैं।

Image

Image पर लगाने वाली Class इस प्रकार हैं ।

img-fluid      : Full Width Resposive Image के लिए । 
img-thumbnail  : Image को Thumbnail दिखाने के लिए इस Class का उपयोग किया जाता हैं । 
rounded        : Corner को Round करने के लिए । 
float-left     : Left की ओर से Image दिखने के लिए । 
d-block        :

Table

Table पर उपयोग होने वाली Class इस प्रकार है ।

table            : इस Class से Table Look आता हैं । 
table-striped    : 
table-dark       : Dark Theme कलर के लिए इसका उपयोग करते हैं । 
table-bordered   : Table की Cell पर Border करने के लिए इस Class का उपयोग करते हैं । 
table-hover      : Cursor ले जाने पर Colour बदलने के लिए इस Class का उपयोग करते हैं । 
table-sm         : Padding कम 

tr 
table-primary       : Colour बदलने के लिए । 

table-responsive    : Responsive Table बनाने के लिए । 

table-responsive-sm : Responsive When Small Size Device 
table-responsive-md : Responsive When Medium Size Device

Alert

यदि आप Alert का उपयोग कर रहे हैं तो इन Class का उपयोग कर सकते हैं ।

alert alert-primary          : Alert Box बनाने के लिए और साथ मे कलर देने के लिए । 
alert-link                   : यदि Alert मे कोई Link हो तो उसे अलग दिखने के लिए । 
alert-heading                : Alert की Heading देने के लिए । 
alert-dismissible fade show  : Alert मे Close Button लगाने के लिए ।

Badge

किसी भी span पर यदि आप Badge लगाना चाहे तो आपको इन Class का उपयोग करना होगा ।

badge badge-secondary : Badge लगाना ओर उसका Colour बदलने के लिए । 
badge-pill            : Left ओर Right Corner को Round करने के लिए ।

Dropdown

Dropdown लगाने के लिए इस Class का उपयोग कर सकते हैं ।

dropdown-menu

List

यदि आप List बनाना चाहे तो इन class का उपयोग कर सकते हैं ।

list-group       : कोई भी List बनाने के लिए । 
list-group-item  : List के Item पर यह class लगाना होती हैं ।

Colour Picker

Colour Picker पर आप इन Class का उपयोग कर सकते हैं ।

form-control-color

Refrence

इस आर्टिकल को Boostrap Website से Read कर शॉर्ट मे लिखा गया हैं साथ मे समझने के लिए हिन्दी मे अपने शब्दों मे लिखा हैं यदि आप Detail मे Read करना चाहते हैं तो इस Website से देख सकते हैं ।

आपको Bootstrap : Most Useful Codes Article कैसा लगा हमे जरूर बताए , अपना कीमती समय देने के लिए धन्यवाद

Developer Tips

Bootstrap : Most Useful Codes to use while coding

Topic Covered

CDN

Basic

Layout

Vertical alignment

Horizontal alignment

Padding & Margin

Uses

हमारे अन्य आर्टिकल

Colours

Text Colour

Background Colour

Button

Button Group

Form Control

Check Box

File

Other

Validation

Input Group

For Select Option (Dropdown)

Border

Image

Table

Alert

Badge

Dropdown

List

Colour Picker

Refrence

Add a Comment

Topic Covered

CDN

Basic

Layout

Vertical alignment

Horizontal alignment

Padding & Margin

Uses

हमारे अन्य आर्टिकल

Colours

Text Colour

Background Colour

Button

Button Group

Form Control

Check Box

File

Other

Validation

Input Group

For Select Option (Dropdown)

Border

Image

Table

Alert

Badge

Dropdown

List

Colour Picker

Refrence

Related Posts

Add a Comment