-2

I'd like to make the textarea and input fields of Bootstrap to have the Material Design look.

I'm currently using the stable version of Bootstrap — 3.3.7

What I'm planning to happen is:

  • Make the label float when the field is focused.
  • And a colored line expands from the middle of the bottom border to the left and right. (similar to this guy's question)

I tried a possible solution, although it's really working, I prefer not to use it for a reason.

  • The solution is from this tutorial site and the similar implementation for Bootstrap from this CodePen demo.

The demo code is here (floating labels only).

The reason why?

  1. You need to add two <span> element, one for the 'bar' and one for the 'highlight', for the expanding colored line to work which I don't like.
  2. There's a bug for <input type=email> that if you didn't enter the required characters, the floating label will return back as a placeholder and it's a mess for the field.

Okay, so is it possible with CSS background-image / transition / animation and or with the use of jQuery?

Here's my demo code of what I'm left of.

Thanks.

Community
  • 1
  • 1
Chain Trap
  • 130
  • 1
  • 12
  • You explain in all the description why you don't like an example, but in your code I don't see how you try to implement that functionality. – Madalina Taina Aug 14 '16 at 14:27
  • @Madalina Taina, as I've said, I tried a 'solution' to my question and gives the reason why I won't use it. So what I can only present you guys is just the 'base style' for the form input field where I'm left of using that 'solution'. So if you guys have the solution, you can easily edit and implement that to the demo code I've given. – Chain Trap Aug 14 '16 at 17:17
  • This is actually possible with a few lines of css and some jquery (if you don't line an extra span). What I find disturbing is that you post someone else's code here because you don't have an approach yet. I suggest you to delete that part of description. – Madalina Taina Aug 14 '16 at 18:04
  • Oh hmm, about someone else's code. I'm using a mobile device while I'm making those codes at JSbin and right after switching to recent apps, the page loads and the code is automatically save, the site will then tells me that someone else is viewing the code. So I'm not really hacking someone else's code here. Sorry for making you disturbed by that. – Chain Trap Aug 14 '16 at 18:09

2 Answers2

2

This might work better for you replace your bootstrap.min.css with this: (Delete the contents of bootstrap.min.css and paste this in.)

Unfortunately it is too much style to paste here so I have it in a github file for you:

RAW code version: https://gist.githubusercontent.com/ErikThiart/89f8cb843cb2dcee32113a896e51426f/raw/a20f6c28437aab63951e112c68aa28ecfc643f23/Material%2520Design

Gist Version: https://gist.github.com/ErikThiart/89f8cb843cb2dcee32113a896e51426f

Erik Thiart
  • 381
  • 6
  • 17
  • Thanks. But can you tell me what mods did you make? And how to implement your code with bootstrap form inputs? cause I can't see it useful. – Chain Trap Aug 14 '16 at 11:51
  • Mmm not sure how familiar you are with Bootstrap as I have just given you the Material design CSS. So you can keep your html as is and simply swap in this CSS. you can replace your http://jsbin.com/ demo's CSS with the CSS provided to see how ti works. – Erik Thiart Aug 14 '16 at 15:29
  • I've already used your given Material Design CSS before I commented on your answer. First is, I'm trying to achive how the Bootstrap's form input fields can transform to look and function just like that on Material Design so I can fully understand how it actually works and how it is done with. Second is, I've stated what I'm trying to happen pertaining to my question meaning, I'm currently focused at the Form component not the whole features of Bootstrap. So then I said thanks for your answer. – Chain Trap Aug 14 '16 at 17:01
  • Bootstrap is normal html, if you want to focus on how the form function works then head over to getbootstrap.com and read the documentation. As for the end result use the CSS I provided to look up the form class in question, but I'd suggest you read the bootstrap documentation first to understand what it is and how to use the framework. Especially pay attention to the Javascript components section if you want transformations and animations in your html behavior. – Erik Thiart Aug 14 '16 at 17:30
  • Fantastic work, @ErikThiart! – Vlad Feb 13 '22 at 04:52
1

Check out MDB, they already done all of that :)

Ron Dadon
  • 2,666
  • 1
  • 13
  • 27
  • 1
    Yeah but I'm actually want to design my own Bootstrap Material Design theme so I can easily manage it myself. I'm also aware of Fez Vrasta's theme and that made me inspired of doing it. BTW the Forms component at MDB are premium. Don't want to waste money for it. Thanks! – Chain Trap Aug 14 '16 at 16:46