Sizing

Easily make an element as wide or as tall with our width and height utilities.

Width in percentage

Set a height of an element in percentage instantly by using the following width utility classes.

Preview

Jsx

Classes

Width 25%

Width 50%

Width 75%

Width 100%

Width auto

import React from 'react';
const WidthInPercent = () => {
  return (
     <>
        <div className="w-25 p-2 mb-2 bg-grey-light-4">Width 25%</div>
        <div className="w-50 p-2 mb-2 bg-grey-light-4">Width 50%</div>
        <div className="w-75 p-2 mb-2 bg-grey-light-4">Width 75%</div>
        <div className="w-100 p-2 mb-2 bg-grey-light-4">Width 100%</div>
        <div className="w-auto p-2 bg-grey-light-4">Width auto</div>
     </>
  );
}

export default WidthInPercent;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="w-[value]"className="w-sm-[value]"className="w-md-[value]"className="w-lg-[value]"className="w-xl-[value]"className="w-xxl-[value]"`	5 / 10 / 15 / 20 / 25 / 30 / 35 / 40 / 45 / 50 ... / 100 (step of 5)
`className="w-auto"`	Set the width to auto
`className="mw-100"`	Set max-width of an element to 100%

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Fixed width

Set a width of an element in pixels instantly by using the following width utility classes.

Preview

Jsx

Classes

75px

100px

150px

import React from 'react';
const FixedWidth = () => {
  return (
     <>
        <div className="w-75p p-2 mb-2 bg-grey-light-4">75px</div>
        <div className="w-100p p-2 mb-2 bg-grey-light-4">100px</div>
        <div className="w-150p p-2 bg-grey-light-4">150px</div>
     </>
  );
}

export default FixedWidth;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="w-[value]p"className="w-sm-[value]p"className="w-md-[value]p"className="w-lg-[value]p"className="w-xl-[value]p"className="w-xxl-[value]p"`	25 / 30 / 35 / 40 / 45 / 50 ... / 800 (step of 5)
`className="mw-[value]p"`	25 / 50 / 75 / 100 / 125 / 150 / 200 / 225 ... / 800 (step of 25) Set max-width of an element
`className="mnw-[value]p"`	25 / 50 / 75 / 100 / 125 / 150 / 200 / 225 ... / 800 (step of 25) Set min-width of an element

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Height in percentage

Set a height of an element in percentage instantly by using the following height utility classes.

Preview

Jsx

Classes

auto

25%

50%

75%

100%

import React from 'react';
const HightInPercent = () => {
  return (
     <>
        <div className="h-auto p-2 bg-grey-light-4">auto</div>
        <div className="h-25 p-2 bg-grey-light-4">25%</div>
        <div className="h-50 p-2 bg-grey-light-4">50%</div>
        <div className="h-75 p-2 bg-grey-light-4">75%</div>
        <div className="h-100 p-2 bg-grey-light-4">100%</div>
     </>
  );
}

export default HightInPercent;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="h-[value]"`	25 / 30 / 35 / 40 / 45 / 50 ... / 100 (step of 5)
`className="h-auto"`	Set the height to auto
`className="mh-100"`	Set max-height of an element to 100%

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Fixed height

Set a height of an element in pixels instantly by using the following height utility classes.

Preview

Jsx

Classes

50px

75px

100px

150px

import React from 'react';
const FixedHight = () => {
  return (
     <>
        <div className="h-50p p-2 bg-grey-light-4">50px</div>
        <div className="h-75p p-2 bg-grey-light-4">75px</div>
        <div className="h-100p p-2 bg-grey-light-4">100px</div>
        <div className="h-150p p-2 bg-grey-light-4">150px</div>
     </>
  );
}

export default FixedHight;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="h-[value]p"`	25 / 30 / 35 / 40 / 45 / 50 ... / 800 (step of 5)
`className="mh-[value]p"`	100 / 125 / 150 / 200 / 225 ... / 800 (step of 25) Set max-height of an element
`className="mnh-[value]p"`	100 / 125 / 150 / 200 / 225 ... / 800 (step of 25) Set min-height of an element

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Equal Height & Width

Easily make an element of equal height & width using the following utility classes.

Preview

Jsx

Classes

d-8

d-10

d-16

import React from 'react';
const EqualHxW = () => {
  return (
     <>
        <div className="d-8 bg-grey-light-4">
            <div className="d-flex justify-content-center align-items-center h-100 w-100">d-8</div>
        </div>
        <div className="d-10 bg-grey-light-4">
            <div className="d-flex justify-content-center align-items-center h-100 w-100">d-10</div>
        </div>
        <div className="d-16 bg-grey-light-4">
            <div className="d-flex justify-content-center align-items-center h-100 w-100">d-16</div>
        </div>
     </>
  );
}

export default EqualHxW;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="d-[value]"`	1 / 2 / 3 ... / 6 (step of .25rem) 7 / 8 / 9 ... / 12 (step of .5rem) 16 / 17 / 18 / 19 / 20 (step of 1rem)

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Width in percentage
Fixed width
Height in percentage
Fixed height
Equal Height & Width