I can't change the width, height, border of the container, input field and button using ReactJS Bootstrap. but the color and fonts are change

Question

I like to create the signup page using reactjs and i can use react-bootstrap for css. I can add the font, style and color of the elements. But I can't change the size of the container, button and input field. after change the size it will not reflect.

React Js Code Output Image

I try to resize the container, input field and button to large size. but it won't reflect in the output. I want resize that and add some changes to it.

Answer 1

You should provide the code you used to increase the container's size and other components. However, I believe I have a solution for what you're requesting.

1. Import the minified Bootstrap into your component (you can also do this globally in your App.tsx/jsx).
2. Apply classes from the Bootstrap libraries to change the size of your components.

import 'bootstrap/dist/css/bootstrap.min.css';

  <Form className="w-100">
     
  </Form>

or

  <Form className="h-100">
     
  </Form>

Indeed, the classes like w-100 allow you to adjust the width of a component based on percentages. For example:

.w-25 {
  width: 25%;
}

.w-50 {
  width: 50%;
}

.w-75 {
  width: 75%;
}

.w-100 {
  width: 100%;
}

You can apply similar changes to the height using classes like h-100, h-50, h-75, and h-25.

You also have the option of creating custom classes and adding them to your components. Whether you choose to use percentages or viewports depends on your design requirements and the responsiveness you want to achieve in your web application. This flexibility makes Bootstrap a powerful tool for building responsive and visually appealing user interfaces. If you have more specific questions or need help with any aspect of web development, feel free to ask. Since you are using Bootstrap components, these styled components require Bootstrap libraries. Therefore, you can refer to the official documentation for more complex tasks.

If you have any specific questions or need further assistance, feel free to ask.

For more info: https://getbootstrap.com/docs/4.0/utilities/sizing/