CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Sina Mirzahosseinian
Sina Mirzahosseinian

Reputation: 103

how to modify boostrap input length

Hi, I have a rudimentary question. How can I specify the length of bootstrap input?

In the code below, the input length is too large, and I want to make it a little bit shorter.

Is there any bootstrap class for it? its seems when we add number "2" in front of "form-control", like form-control2, make it shorter, but it is too short.

I also tried to change "size" attribute of the input and it didn't work either.

thank you for your help.

import React from "react";

const Test = () => {
  return (
    <div className=" container input-group ">
      <div className="input-group-prepend ">
        <button className="btn btn-danger" type="button">
          Search
        </button>
      </div>
      <input
        type="text"
        className="form-control "
        placeholder="what are you looking for ?"
        aria-label=""
        aria-describedby="basic-addon1"
      />
    </div>
  );
};

export default Test;

Upvotes: 1

Views: 59

Answers (1)

Jerdine Sabio
Jerdine Sabio

Reputation: 6160

Create a new class in css, in my case it's length60px that specifies the width of the input field, be sure to use !important. Use both form-control and the new class on the className/class attribute of the input field.

See code below;

.form-control{
  max-width:100%;
}

.length60px{
  width:60px !important;
  /*you could also use any number with %; 50%, 100%, etc*/
}
<input class='form-control length60px' />

Upvotes: 1

Related Questions