Topic: how to design card header dynamically to the width of card and value inside a textfield

Haso58 free asked 3 years ago

Hi,I was developing a login component with card component. I have reduced the width of my card component. But I can not make the header inside dynamically it is stuck on a fix width. Can someone help me out? Furthermore I want the text I am putting inside to have a padding to the left just like the placeholder how do I do that?

here is my draft:

Grzegorz Bujański staff answered 3 years ago


Try to use the px class. Add px-0 to the main card div and px-3 to the inputs:

<div class="card col-md-8 px-0" id="loginCard">


  <!-- Username -->
  <div class="md-form ">
    <input type="text" id="userInput" class="form-control border rounded-1 px-3" placeholder="Username" >

  <!-- Password -->
  <div class="md-form">
    <input type="password" id="passwordInput" class="form-control border rounded-1 px-3" placeholder="Password">



Then you can also remove this from css:

input :: placeholder {
  / * Firefox, Chrome, Opera * /
  padding-left: 15px;

Haso58 free commented 3 years ago

Sorry for the late reply, thanks it worked

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: Other
  • MDB Version: -
  • Device: Computer
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes