मुख्य सामग्री पर जाएँ docs नेविगेशनं प्रति गच्छतु
Check
in English

सीमाः

तत्त्वस्य सीमां सीमा-त्रिज्या च शीघ्रं शैलीं कर्तुं सीमा-उपयोगितायाः उपयोगं कुर्वन्तु । चित्राणां, बटनानां, अन्यस्य वा तत्त्वस्य कृते महान्।

सीमा

कस्यचित् तत्त्वस्य सीमां योजयितुं वा निष्कासयितुं वा सीमा-उपयोगितायाः उपयोगं कुर्वन्तु । सर्वेभ्यः सीमाभ्यः एकैकं वा चिनुत ।

योजकः

कस्टम् एलिमेण्ट्स् मध्ये सीमाः योजयन्तु:

html
<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

घटावकम्

अथवा सीमाः निष्कासयन्तु : १.

html
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>

वर्णं

अस्माकं विषयवर्णेषु निर्मितानाम् उपयोगितानां उपयोगेन सीमावर्णं परिवर्तयन्तु ।

html
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

border-colorअथवा घटकस्य पूर्वनिर्धारितं परिवर्तयन्तु :

खतरनाक शीर्षक
सीमावर्णं विस्तारं च परिवर्तयति
html
<div class="mb-4">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="[email protected]">
</div>

<div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">
  Dangerous heading
</div>

<div class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end">
  Changing border color and width
</div>

अस्पष्टता

v5.2.0 इत्यस्मिन् योजितम्

CSS चरानाम् उपयोगेन Sass इत्यनेन सह Bootstrap border-{color}उपयोगिताः उत्पद्यन्ते । एतेन संकलनं विना वास्तविकसमयवर्णपरिवर्तनं गतिशीलं अल्फापारदर्शितापरिवर्तनं च भवति ।

कथं कार्यं करोति

अस्माकं पूर्वनिर्धारित .border-success-उपयोगिता विचार्यताम् ।

.border-success {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
}

--bs-successवयं अस्माकं (मूल्येन सह ) CSS चरस्य RGB संस्करणस्य उपयोगं कुर्मः तथा च अल्फा पारदर्शितायाः कृते ( स्थानीय CSS चरस्य धन्यवादेन पूर्वनिर्धारितमूल्येन सह) 25, 135, 84द्वितीयं CSS चरम्, , संलग्नं कुर्मः । तात्पर्यम् अस्ति यत् भवन्तः इदानीं कदापि उपयुञ्जते, भवतः गणितं मूल्यं . प्रत्येकस्य वर्गस्य अन्तः स्थानीयः CSS चरः उत्तराधिकारसमस्यान् परिहरति अतः उपयोगितानां नेस्टेड् उदाहरणेषु स्वयमेव परिवर्तिता अल्फा पारदर्शिता न भवति ।--bs-border-opacity1.border-successcolorrgba(25, 135, 84, 1).border-*

उदाहरण

तत् अस्पष्टतां परिवर्तयितुं, --bs-border-opacityकस्टम् शैल्याः अथवा इनलाइन शैल्याः माध्यमेन अधिलिखन्तु ।

एषा पूर्वनिर्धारित सफलता सीमा अस्ति
एषा ५०% अस्पष्टता सफलता सीमा अस्ति
html
<div class="border border-success p-2 mb-2">This is default success border</div>
<div class="border border-success p-2" style="--bs-border-opacity: .5;">This is 50% opacity success border</div>

.border-opacityअथवा, कस्यापि उपयोगितायाः चयनं कुर्वन्तु :

एषा पूर्वनिर्धारित सफलता सीमा अस्ति
एषा ७५% अस्पष्टता सफलता सीमा अस्ति
एषा ५०% अस्पष्टता सफलता सीमा अस्ति
एषा २५% अस्पष्टता सफलता सीमा अस्ति
एषा १०% अस्पष्टता सफलता सीमा अस्ति
html
<div class="border border-success p-2 mb-2">This is default success border</div>
<div class="border border-success p-2 mb-2 border-opacity-75">This is 75% opacity success border</div>
<div class="border border-success p-2 mb-2 border-opacity-50">This is 50% opacity success border</div>
<div class="border border-success p-2 mb-2 border-opacity-25">This is 25% opacity success border</div>
<div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>

विस्तार

html
<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

त्रिज्या

कस्मिंश्चित् एलिमेण्ट् मध्ये क्लास् योजयन्तु यत् तस्य कोणान् सहजतया गोलरूपेण भवति ।

Example rounded image 75x75 Example top rounded image 75x75 Example right rounded image 75x75 Example bottom rounded image 75x75 Example left rounded image 75x75 Completely round image 75x75 Rounded pill image 150x75
html
<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-end" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-start" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">

आकाराः

बृहत्तरस्य वा लघुस्य वा गोलकोणस्य कृते स्केलिंग् क्लास् इत्यस्य उपयोगं कुर्वन्तु । आकाराः तः 0यावत् भवन्ति 5, तथा च उपयोगिता एपिआइ परिवर्त्य विन्यस्तुं शक्यन्ते ।

Example non-rounded image 75x75 Example small rounded image 75x75 Example default rounded image 75x75 Example large rounded image 75x75 Example larger rounded image 75x75 Example extra large rounded image 75x75
html
<img src="..." class="rounded-0" alt="...">
<img src="..." class="rounded-1" alt="...">
<img src="..." class="rounded-2" alt="...">
<img src="..." class="rounded-3" alt="...">
<img src="..." class="rounded-4" alt="...">
<img src="..." class="rounded-5" alt="...">

CSS इति

चर

v5.2.0 इत्यस्मिन् योजितम्
  --#{$prefix}border-width: #{$border-width};
  --#{$prefix}border-style: #{$border-style};
  --#{$prefix}border-color: #{$border-color};
  --#{$prefix}border-color-translucent: #{$border-color-translucent};

  --#{$prefix}border-radius: #{$border-radius};
  --#{$prefix}border-radius-sm: #{$border-radius-sm};
  --#{$prefix}border-radius-lg: #{$border-radius-lg};
  --#{$prefix}border-radius-xl: #{$border-radius-xl};
  --#{$prefix}border-radius-2xl: #{$border-radius-2xl};
  --#{$prefix}border-radius-pill: #{$border-radius-pill};
  

सस्स चर

$border-width:                1px;
$border-widths: (
  1: 1px,
  2: 2px,
  3: 3px,
  4: 4px,
  5: 5px
);

$border-style:                solid;
$border-color:                $gray-300;
$border-color-translucent:    rgba($black, .175);
$border-radius:               .375rem;
$border-radius-sm:            .25rem;
$border-radius-lg:            .5rem;
$border-radius-xl:            1rem;
$border-radius-2xl:           2rem;
$border-radius-pill:          50rem;

सस् मिक्सिन्

@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
  @if $enable-rounded {
    border-radius: valid-radius($radius);
  }
  @else if $fallback-border-radius != false {
    border-radius: $fallback-border-radius;
  }
}

@mixin border-top-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
    border-top-right-radius: valid-radius($radius);
  }
}

@mixin border-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-right-radius: valid-radius($radius);
    border-bottom-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-bottom-right-radius: valid-radius($radius);
    border-bottom-left-radius: valid-radius($radius);
  }
}

@mixin border-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
    border-bottom-left-radius: valid-radius($radius);
  }
}

@mixin border-top-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
  }
}

@mixin border-top-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-bottom-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-bottom-left-radius: valid-radius($radius);
  }
}

उपयोगिता एपिआइ

सीमा उपयोगिता अस्माकं उपयोगिता API मध्ये घोषितं भवति scss/_utilities.scss. utilities API इत्यस्य उपयोगं कथं करणीयम् इति ज्ञातव्यम् ।

    "border": (
      property: border,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
    "border-top": (
      property: border-top,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
    "border-end": (
      property: border-right,
      class: border-end,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
    "border-bottom": (
      property: border-bottom,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
    "border-start": (
      property: border-left,
      class: border-start,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
    "border-color": (
      property: border-color,
      class: border,
      local-vars: (
        "border-opacity": 1
      ),
      values: $utilities-border-colors
    ),
    "border-width": (
      css-var: true,
      css-variable-name: border-width,
      class: border,
      values: $border-widths
    ),
    "border-opacity": (
      css-var: true,
      class: border-opacity,
      values: (
        10: .1,
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),
    
    "rounded": (
      property: border-radius,
      class: rounded,
      values: (
        null: var(--#{$prefix}border-radius),
        0: 0,
        1: var(--#{$prefix}border-radius-sm),
        2: var(--#{$prefix}border-radius),
        3: var(--#{$prefix}border-radius-lg),
        4: var(--#{$prefix}border-radius-xl),
        5: var(--#{$prefix}border-radius-2xl),
        circle: 50%,
        pill: var(--#{$prefix}border-radius-pill)
      )
    ),
    "rounded-top": (
      property: border-top-left-radius border-top-right-radius,
      class: rounded-top,
      values: (null: var(--#{$prefix}border-radius))
    ),
    "rounded-end": (
      property: border-top-right-radius border-bottom-right-radius,
      class: rounded-end,
      values: (null: var(--#{$prefix}border-radius))
    ),
    "rounded-bottom": (
      property: border-bottom-right-radius border-bottom-left-radius,
      class: rounded-bottom,
      values: (null: var(--#{$prefix}border-radius))
    ),
    "rounded-start": (
      property: border-bottom-left-radius border-top-left-radius,
      class: rounded-start,
      values: (null: var(--#{$prefix}border-radius))
    ),