For example: At /user/login both the username and password input fields include an HTML attribute size="60".

In Bartik, the fields have a fixed width.

In Bootstrap, the fields are stretched to fill the entire screen width.

Requested behavior: I would like to make Bootstrap obey the size attribute - on /user/login, and on every single other page in the website. I am not able to generate a list of all the affected pages as there are many and it will change over time.

It seems that something in Bootstrap SCSS is messing up the widths on input fields. I would like to delete that something, or override it. However I didn't yet manage to work out how to do that.

What I've found so far: There is already an issue on Drupal.org, where module maintainer markcarver says

The reason they're "stretched" full width is that they both have a form-control class. This is part of Bootstrap's design and I'm not going to fight that out-of-the-box. There are several ways to alter this form as you see fit, in a sub-theme.

What partly works but not 100% right: It would be possible to write CSS to set a new width on all inputs with form-control class of type text. That's good, but it sets the width to a fixed value such as 15em. I would like to get back the original width, which will be different on each input.

  • I wonder why don't you simply fix this with CSS??? – leymannx Aug 16 '18 at 13:26
  • @leymannx I have clarified, see "EDIT 2". Yes I am expecting to fix it with CSS, but I am looking for a single change that covers all fields. If you know how to do that please post/comment. – AdamS Aug 16 '18 at 14:57
  • If the person who down-voted could please explain why then maybe I could learn something and ask better questions in future – AdamS Aug 16 '18 at 14:58
  • Didn't downvote, but I guess it happened because you actually do ask an overly broad question and don't highlight anything you had done yourself so far to fix this issue on your own. Apart from that, when you can fix it with CSS and ask us how to do that, then this question also is off-topic. We won't teach you how to create a sub-theme and we won't teach you how to write robust CSS. There already are hundreds of tutorials out there covering that. Good luck! :) – leymannx Aug 16 '18 at 15:05
  • @leymannx Thanks. In fact I am asking a very specific question, but I guess I have explained it badly. I'll try one more edit. But maybe I should just delete the question as it is causing confusion. – AdamS Aug 17 '18 at 16:46

The standard way to fix this is to use css in your Bootstrap-based sub-theme. For the username and password login fields:

#edit-pass {
  width: 15em;

NB I'm looking for a solution that covers every form of input, not just user login as a special case.

You can use this method (css) for every text input field where you want to override Bootstrap's default behaviour. Obviously, you need to use the right css-selector for the field you want to override.

| improve this answer | |
  • Thanks for taking time to answer. Please see my "EDIT 2" - I am hoping to avoid having to identify every single field that might be affected case-by-case as that is not practical or maintainable – AdamS Aug 16 '18 at 14:55
  • input and target by form-control class of type text? – Kevin Aug 16 '18 at 15:51
  • @kevin, sorry, but I do not understand the question. – Free Radical Aug 16 '18 at 15:57
  • 1
    instead of use IDs, you could just target inputs with that class, that are of type 'text'. – Kevin Aug 16 '18 at 16:06
  • @Kevin thanks, yes that is more like what I was hoping for. However it seems that I would still be stuck with a fixed width like 15em. I would prefer to keep the actual width specified in #size. I would like to "undo" whatever Bootstrap did to override the widths, and pick up the exact same width that occur in Bartik. – AdamS Aug 17 '18 at 16:44

I had hoped for an answer from and expert and would still welcome that - I would be happy to set accept another answer instead of mine.

Here's my best attempt so far. It seems to work for the login page and search block. However I still feel like I'm fighting a system I don't fully understand.

.input-group .form-control,
.input-group-btn {
  width: auto;
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.