ਬਾਰਡਰ

ਕਿਸੇ ਤੱਤ ਦੇ ਬਾਰਡਰ ਅਤੇ ਬਾਰਡਰ-ਰੇਡੀਅਸ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਸਟਾਈਲ ਕਰਨ ਲਈ ਬਾਰਡਰ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਚਿੱਤਰਾਂ, ਬਟਨਾਂ ਜਾਂ ਕਿਸੇ ਹੋਰ ਤੱਤ ਲਈ ਵਧੀਆ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਬਾਰਡਰ

ਕਿਸੇ ਤੱਤ ਦੀਆਂ ਬਾਰਡਰਾਂ ਨੂੰ ਜੋੜਨ ਜਾਂ ਹਟਾਉਣ ਲਈ ਬਾਰਡਰ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਸਾਰੀਆਂ ਬਾਰਡਰਾਂ ਵਿੱਚੋਂ ਜਾਂ ਇੱਕ ਵਾਰ ਵਿੱਚ ਇੱਕ ਚੁਣੋ।

ਜੋੜਨ ਵਾਲਾ

ਕਸਟਮ ਤੱਤਾਂ ਵਿੱਚ ਬਾਰਡਰ ਜੋੜੋ:

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 ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ

ਬੂਟਸਟਰੈਪ border-{color}ਉਪਯੋਗਤਾਵਾਂ CSS ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਰਕੇ Sass ਨਾਲ ਤਿਆਰ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ। ਇਹ ਸੰਕਲਨ ਅਤੇ ਗਤੀਸ਼ੀਲ ਅਲਫ਼ਾ ਪਾਰਦਰਸ਼ਤਾ ਤਬਦੀਲੀਆਂ ਤੋਂ ਬਿਨਾਂ ਰੀਅਲ-ਟਾਈਮ ਰੰਗ ਬਦਲਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।

ਕਿਦਾ ਚਲਦਾ

ਸਾਡੀ ਡਿਫੌਲਟ .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ਕਸਟਮ ਸਟਾਈਲ ਜਾਂ ਇਨਲਾਈਨ ਸਟਾਈਲ ਰਾਹੀਂ ਓਵਰਰਾਈਡ ਕਰੋ।

ਇਹ ਡਿਫੌਲਟ ਸਫਲਤਾ ਸੀਮਾ ਹੈ

ਇਹ 50% ਧੁੰਦਲਾਪਨ ਸਫਲਤਾ ਸੀਮਾ ਹੈ

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ਉਪਯੋਗਤਾ ਵਿੱਚੋਂ ਚੁਣੋ:

ਇਹ ਡਿਫੌਲਟ ਸਫਲਤਾ ਸੀਮਾ ਹੈ

ਇਹ 75% ਧੁੰਦਲਾਪਨ ਸਫਲਤਾ ਸੀਮਾ ਹੈ

ਇਹ 50% ਧੁੰਦਲਾਪਨ ਸਫਲਤਾ ਸੀਮਾ ਹੈ

ਇਹ 25% ਧੁੰਦਲਾਪਨ ਸਫਲਤਾ ਸੀਮਾ ਹੈ

ਇਹ 10% ਧੁੰਦਲਾਪਨ ਸਫਲਤਾ ਸੀਮਾ ਹੈ

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>

ਰੇਡੀਅਸ

ਕਿਸੇ ਤੱਤ ਦੇ ਕੋਨਿਆਂ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਗੋਲ ਕਰਨ ਲਈ ਉਸ ਵਿੱਚ ਕਲਾਸਾਂ ਸ਼ਾਮਲ ਕਰੋ।

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ਅਤੇ ਉਪਯੋਗਤਾ API ਨੂੰ ਸੋਧ ਕੇ ਸੰਰਚਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

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};

Sass ਵੇਰੀਏਬਲ

$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

ਬਾਰਡਰ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਸਾਡੀ ਉਪਯੋਗਤਾਵਾਂ API ਵਿੱਚ ਘੋਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ scss/_utilities.scss। ਯੂਟਿਲਿਟੀਜ਼ 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))
    ),