Convert a UI Design to HTML, CSS Using Bootstrap 5

In this post, let’s convert a UI Design to HTML, CSS Using Bootstrap 5 of a Cool Blue Mobile App Login Form https://v5.getbootstrap.com/docs/5.0/getting-started/introduction/

We’ll be using FontAwesome for the icons, https://fontawesome.com/icons

Let’s consider the below UI Design to convert:

For complete guide, kindly follow the video tutorial below. You can also read along this post for the code explanation.

To start with, we’ll give a container div a width and height of 350px and 700px respectively with a blue, gradient background.

<div class="container">

</div>

And following is it’s CSS code:

.container {
    width: 350px;
    height: 700px;
    border: 15px solid #4d4d4d;
    border-radius: 60px;
    background: linear-gradient(to top right,
    #00f7ff 20%, #49a6e8 80%);
}

Now, let’s add a flex row using the following code:

<div class="d-flex flex-row justify-content-between my-5 py-5 px-4">
   <span class="label active">Login</span>
   <span class="label">Signup</span>
</div>

In the above code, we are placing the labels ‘Login’ and ‘Signup’ with space between both of them so that they are placed and the beginning and at the end respectively. We also give margin and padding to space them properly and give a class of .label and .active using the following CSS:

span.label {
    font-size: 2em;
    font-weight: lighter;
    color: rgba(255,255,255, 0.25);
    cursor: pointer;
}

span.label.active {
    color: #eee;
}

Next, we create another flex based div as a row, which would be positioned relatively, so that we can position the icons absolutely. Following is the HTML code:

<div class="d-flex flex-row position-relative px-4 mb-3">
   <div class="position-absolute" style="left: 40px;top:9px">
      <i class="fas fa-envelope"></i>
   </div>
   <input type="text" class="w-100 py-2 pl-5"
      placeholder="Email Address">
</div>

We place the icon within a div so that we can position it as per our need, by giving a left and top css properties. The input text is given a class of .w-100 so that it occupies entire width of the screen, along with a light, white, rounded border. Following is the CSS code:

input {
    border: 1px solid rgba(255,255,255, 0.5);
    background: transparent;
    border-radius: 30px;
    color: #eee;
}

input:focus {
    outline: none;
}

.fas {
    color: #eee;
}

We repeat another flex-row for the password:

<div class="d-flex flex-row position-relative px-4">
    <div class="position-absolute" style="left: 40px;top:9px">
        <i class="fas fa-key"></i>
     </div>
     <input type="password" class="w-100 py-2 pl-5"
     placeholder="Password">        
</div>

‘Forgot password?’ option is added in the next flex-row, and placed on the extreme right by using .justify-content-end class:

<div class="d-flex flex-row justify-content-end align-items-center mt-3 pr-4">
   <span class="forgot">Forgot Password?</span>
</div>

And its relevant CSS code is:

span.forgot {
    font-size: 1em;
    font-weight: normal;
    color: rgba(238,238,238);
    cursor: pointer;
}

In the next section, we place the social media icons, like so:

<div class="d-flex flex-row mt-5 pt-5 justify-content-between px-5 mx-3">
  <i class="fab fa-google-plus-g"></i>
  <i class="fab fa-facebook-f"></i>
  <i class="fab fa-twitter"></i>
</div>                                     

And style them with this CSS, with a nice hover effect which zooms and tilts the icons:

.fab {
    font-size: 1.5em;
    color: rgb(238,238,238);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.fab:hover {
    transform: scale(1.2) rotate(30deg);
}

And finally wrap the code by adding the following section to display the ‘Login’ button:

<div class="d-flex flex-row mt-5 pt-5 justify-content-center">
  <button class="w-100 mx-4 py-3 login">Login</button>
</div>          

The button is styled with a transparent background and a smooth transition on hover:

button.login {
    border: none;
    background: rgba(238,238,238,0.3);
    border-radius: 30px;
    color:#eee;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
}

button.login:hover {
    transform: scale(1.1);
}

For complete guide, kindly follow the video tutorial below:

Thanks for reading and watching. If you found this post and the video helpful, kindly like, share and subscribe by clicking on ‘YouTube’ button below, for more such videos.

76 thoughts on “Convert UI Design to HTML, CSS Using Bootstrap 5 | Cool Blue Mobile App Login Form

  1. Aw, this was an extremely nice post. Finding the time and actual effort to generate a really
    good article… but what can I say… I procrastinate a lot and never seem to get nearly anything done.
    asmr 0mniartist

  2. Wow that was unusual. I just wrote an really long comment but after I clicked submit my comment didn’t
    appear. Grrrr… well I’m not writing all that
    over again. Regardless, just wanted to say wonderful blog!

  3. My programmer is trying to convince me to move to .net from PHP.
    I have always disliked the idea because of
    the costs. But he’s tryiong none the less. I’ve been using Movable-type on several websites for about a year and am nervous about switching to another platform.
    I have heard excellent things about blogengine.net. Is there a way I can import all my wordpress content into it?

    Any kind of help would be greatly appreciated!

    Here is my web blog – demo king855

  4. hey there and thank you for your information – I have certainly picked up anything new from right here.
    I did however expertise several technical points using this website, as I experienced to
    reload the website lots of times previous to I could
    get it to load properly. I had been wondering if your hosting is OK?
    Not that I am complaining, but slow loading instances times will often affect your placement in google
    and can damage your high quality score if advertising and marketing with Adwords.
    Well I’m adding this RSS to my e-mail and could look out for
    a lot more of your respective exciting content.

    Make sure you update this again soon.

    Feel free to visit my page :: club suncity 11

  5. Woah! I’m really enjoying the template/theme
    of this blog. It’s simple, yet effective. A lot of times it’s challenging
    to get that “perfect balance” between superb usability and visual appeal.

    I must say that you’ve done a fantastic job with this.
    Also, the blog loads extremely quick for me on Chrome. Exceptional
    Blog!

    Feel free to surf to my web page; download joker688

  6. We’re a gaggle of volunteers and opening a brand new scheme in our community.
    Your web site offered us with valuable information to
    work on. You’ve done an impressive job and our entire group might
    be thankful to you.

    my homepage app joker123

  7. I like the helpful info you provide on your articles.

    I will bookmark your blog and test once more right here regularly.
    I am moderately sure I’ll be informed many new stuff proper here!
    Best of luck for the next!

    My web page; apl aaa1188

  8. Excellent items from you, man. I have take note your stuff previous to and you’re just extremely excellent.

    I really like what you’ve acquired here, certainly like what you’re stating and the way in which in which you say it.
    You make it entertaining and you still care for to keep it wise.
    I cant wait to read much more from you. This is really a wonderful site.

    My page gem calibet (https://918kiss-m.com/calibet/)

  9. I do not even know how I stopped up right here, however
    I thought this submit used to be great. I don’t recognise who you might be but certainly you are going to a well-known blogger in the event you aren’t already.
    Cheers!

  10. Saya telah menjelajah online lebih dari 4 jam hari ini, namun saya tidak pernah menemukan artikel menarik seperti milik Anda.

    It’s cukup berharga bagi saya. Dalam pandangan saya, jika semua
    webmaster dan blogger membuat konten yang baik
    seperti yang Anda lakukan, net akan menjadi lebih berguna dari sebelumnya.

    Also visit my page – Joker Gaming Slot Login (https://Gameaco.Com)

  11. Hi, I do believe this is an excellent site. I stumbledupon it 😉
    I am going to return once again since I bookmarked it.
    Money and freedom is the greatest way to change, may you be
    rich and continue to help other people.

  12. I just like the helpful info you provide to your articles.
    I will bookmark your weblog and test again right here regularly.
    I am reasonably sure I will be informed plenty of new stuff proper here!
    Good luck for the next!

  13. Spot on with this write-up, I honestly feel this website needs
    a great deal more attention. I’ll probably be back again to see more, thanks for the information!

  14. Excellent post. I was checking constantly this blog and I am inspired!

    Extremely helpful info particularly the remaining part 🙂 I deal with such info much.

    I was looking for this particular info for a very long time.
    Thanks and good luck.

  15. Have you ever considered about adding a little bit more than just your articles?

    I mean, what you say is important and all. However think about if you added some great graphics or videos to give
    your posts more, “pop”! Your content is excellent but with pics and video clips, this website could certainly be one of the most beneficial in its
    niche. Amazing blog!

  16. Hi there! I know this is kinda off topic but I was wondering which blog platform are you using for this
    site? I’m getting tired of WordPress because I’ve had problems with
    hackers and I’m looking at alternatives for another platform.
    I would be great if you could point me in the
    direction of a good platform.

  17. I every time used to study paragraph in news papers
    but now as I am a user of internet so from now I am using net for posts, thanks to web.

  18. dating sites
    Heya just wanted to give you a brief heads up and let you know a few of the images aren’t loading properly.
    I’m not sure why but I think its a linking issue. I’ve tried
    it in two different web browsers and both show the same outcome.
    dating sites

  19. Having read this I believed it was really informative.

    I appreciate you taking the time and effort to put this content together.
    I once again find myself spending a lot of time both reading and leaving comments.
    But so what, it was still worthwhile!

  20. Hello there, I found your website by the use of
    Google whilst looking for a related topic, your web
    site came up, it appears to be like good. I have bookmarked it in my google bookmarks.

    Hi there, just become aware of your weblog through Google, and located that it’s truly informative.
    I’m going to watch out for brussels. I’ll appreciate if you happen to proceed this in future.
    Lots of other people will be benefited out of your writing.
    Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *