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.

227 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!

  21. Every weekend i used to visit this website, for the reason that
    i want enjoyment, for the reason that this this website conations really nice funny data too.

  22. Hello there! Do you know if they make any plugins to assist
    with Search Engine Optimization? I’m trying to get my blog
    to rank for some targeted keywords but I’m not seeing very good gains.
    If you know of any please share. Thank you!

  23. I got this web site from my friend who told me
    regarding this website and now this time I am visiting this
    site and reading very informative articles or reviews here.

  24. I’ve learn some just right stuff here. Definitely worth bookmarking
    for revisiting. I wonder how so much effort you place to create such a magnificent informative
    website.

  25. Hi! Someone in my Myspace group shared this website with us so I came to check it out.
    I’m definitely loving the information. I’m book-marking and will be tweeting this to my followers!
    Superb blog and fantastic design.

  26. This is the perfect site for anybody who would like to find out about this
    topic. You know a whole lot its almost hard to argue with
    you (not that I personally will need to…HaHa). You definitely put a new spin on a subject that has
    been written about for many years. Wonderful stuff, just excellent!

  27. Great site you have got here.. It’s hard to find excellent writing like yours these days.
    I truly appreciate individuals like you! Take care!!

  28. Good day! I know this is kind of 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 awesome if you could point me in the direction of a good platform.

  29. Its like you learn my mind! You appear to know
    a lot approximately this, such as you wrote the e book in it or something.

    I believe that you can do with a few p.c. to pressure
    the message house a little bit, but other than that, this is wonderful blog.
    A great read. I’ll certainly be back.

  30. wonderful put up, very informative. I ponder why the other specialists
    of this sector do not notice this. You must proceed your writing.
    I am sure, you have a great readers’ base already!

  31. Please let me know if you’re looking for a writer
    for your weblog. You have some really great articles and I believe I
    would be a good asset. If you ever want to take some
    of the load off, I’d absolutely love to write some articles for your blog in exchange for a link back to mine.
    Please send me an email if interested. Regards!

  32. This design is incredible! You most certainly know how to keep a reader amused.
    Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Fantastic job.
    I really enjoyed what you had to say, and more than that,
    how you presented it. Too cool!

  33. We stumbled over here coming from a different page and thought I may as well check things out.
    I like what I see so now i’m following you. Look forward to looking at your web page for a
    second time.

  34. I got this web site from my pal who shared with me about this web
    site and now this time I am visiting this site and reading
    very informative articles or reviews at this place.

  35. The other day, while I was at work, my cousin stole my apple
    ipad and tested to see if it can survive a forty
    foot drop, just so she can be a youtube sensation. My iPad is now destroyed and she has 83 views.
    I know this is totally off topic but I had to share it with someone!

  36. I’m not sure where you are getting your info,
    but good topic. I needs to spend some time learning more or understanding more.
    Thanks for great info I was looking for this information for my mission.

  37. Hello, i think that i saw you visited my site so i came to “return the favor”.I am attempting to find things to improve my site!I suppose its ok to use some of your ideas!!

  38. Hey I know this is off topic but I was wondering if you
    knew of any widgets I could add to my blog that automatically tweet my newest twitter updates.
    I’ve been looking for a plug-in like this for quite some
    time and was hoping maybe you would have some experience with something like this.
    Please let me know if you run into anything.
    I truly enjoy reading your blog and I look forward to
    your new updates.

  39. I’m amazed, I have to admit. Seldom do I encounter a blog that’s equally educative and
    amusing, and let me tell you, you have hit the nail
    on the head. The problem is something that too few men and women are speaking
    intelligently about. I’m very happy I came across this in my
    hunt for something concerning this.

  40. Hello! I know this is kinda off topic but I’d figured I’d ask.

    Would you be interested in trading links or maybe guest writing a blog article or vice-versa?

    My website covers a lot of the same subjects as yours and I think we could greatly benefit from each other.
    If you happen to be interested feel free to shoot me an email.
    I look forward to hearing from you! Superb blog by the way!

  41. I think this is one of the most vital information for me.
    And i am glad reading your article. But want to remark on some general things, The site style is ideal,
    the articles is really nice : D. Good job, cheers

  42. It’s a pity you don’t have a donate button! I’d definitely donate to this superb blog!
    I suppose for now i’ll settle for book-marking and adding your RSS feed to
    my Google account. I look forward to new updates and
    will talk about this website with my Facebook group. Chat soon!

  43. Hmm is anyone else encountering problems with the images on this blog loading?
    I’m trying to figure out if its a problem on my end or
    if it’s the blog. Any suggestions would be greatly appreciated.

  44. Hello There. I found your blog using msn. This is a very well written article.
    I’ll be sure to bookmark it and return to read more of your useful info.
    Thanks for the post. I will definitely comeback.

  45. An intriguing discussion is definitely worth comment. I think that
    you need to write more on this subject matter, it might not be a taboo
    matter but generally people don’t speak about these topics.
    To the next! Best wishes!!

  46. Generally I do not learn post on blogs, however I would like to
    say that this write-up very pressured me to try and do so!

    Your writing style has been surprised me. Thank you, very nice article.

  47. Aw, this was an extremely nice post. Taking a few minutes and actual effort to create
    a really good article… but what can I say… I procrastinate a whole lot and don’t manage
    to get nearly anything done.

  48. We are advising that you add Urban TV to your portfolio. Urban TV Network Company stock symbol URBT may well be an appealing investment matter. One of America’s very first minority owned tv broadcasting companys, URBT shares has stumbled poorly in preceding years. Its big turn led by way of a new Chief executive started in 2021, puched the stock into a very high gear, after that ran flat within the pandemic. If URBT stock breaks out of the companys investment mold, it will certainly make a nice portfolio addition and a money for speculators. Urban Televsion Network Studios (OTC: URBT) has the possibility to whack a Home Run. Among the high-potential, narrative-driven investments, only some can lay a hand on the blistering highs and slight lows of URBT the addition of the amazing crypto mining business and the new streaming company URBTPlus. My honey and I are looking for this investment to leap to $10 long-term investment. We’re advocating that you add Urban Television Network Corp to your current portfolio.

  49. I absolutely love your blog and find almost all of your post’s to be just what
    I’m looking for. Does one offer guest writers to write content available for you?
    I wouldn’t mind writing a post or elaborating on a few of the subjects you write related to here.
    Again, awesome blog! ps4 https://bit.ly/3nkdKIi ps4

  50. I am really enjoying the theme/design of your web site.

    Do you ever run into any browser compatibility issues? A couple of my blog audience have complained about my site not working correctly in Explorer but
    looks great in Chrome. Do you have any ideas to help fix
    this issue? scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

  51. [url=http://wellbutrinabupropion.online/]costs for wellbutrin[/url] [url=http://otrpills.online/]buy stromectol online[/url] [url=http://cialisonlineviagra.online/]cialis sales[/url] [url=http://cialisdnp.online/]cialis 5mg tablets price[/url] [url=http://xytabs.online/]stromectol cost[/url] [url=http://trazodonesari.online/]trazodone 50mg tablets[/url]

  52. [url=http://sildenafilmpro.com/]cheap generic viagra canadian pharmacy[/url] [url=http://genericviagrasale.com/]viagr[/url] [url=http://howtobuyivermectin.com/]ivermectin cream 1[/url] [url=http://buytadalafilnow.com/]tadalafil 10mg price in india[/url] [url=http://sildenafilcitrateb.com/]best sildenafil in india[/url]

  53. [url=http://ataraxhydroxyzine.online/]atarax liquid[/url] [url=http://gnrcialis.online/]cheap cialis fast[/url] [url=http://genericbrandbuy.online/]buy furosemide tablets online uk[/url] [url=http://viagraypill.online/]how can i get generic viagra[/url] [url=http://piopharmacy.online/]cheapest pharmacy to fill prescriptions with insurance[/url]

  54. [url=https://tadalafilmedx.online/]tadalafil prescription canada[/url] [url=https://drugstore555.online/]online pharmacy prescription[/url] [url=https://cialisppo.online/]generic cialis soft[/url] [url=https://cialismedicine.online/]cost for cialis for daily use[/url]

  55. [url=https://pilldbp.online/]cost of ivermectin 1% cream[/url] [url=https://eleventabs.online/]where can i buy colchicine[/url] [url=https://cialisopp.online/]cialis 20mg daily[/url] [url=https://cialispni.online/]cost of cialis in australia[/url] [url=https://tadalafiledpills.online/]generic tadalafil online 20mg buy[/url] [url=https://genericviagranow.online/]viagra 25 mg daily[/url] [url=https://otrpills.online/]ivermectin where to buy[/url]

  56. [url=https://viagrawithnoprescription.online/]viagra online japan[/url] [url=https://viagrareg.online/]viagra tablets online in india[/url] [url=https://cialisdiscountcoupons.online/]cialis 2.5 mg canada[/url] [url=https://cialisviagrageneric.online/]discount cialis[/url] [url=https://sildenafilxr.online/]sildenafil viagra[/url]

  57. [url=http://ivermectintbs.com/]ivermectin buy online[/url] [url=http://metforminz.com/]metformin canada price[/url] [url=http://ordercialistablets.com/]cialis discount pharmacy[/url] [url=http://sixtablets.com/]xenical australia buy online[/url] [url=http://bestcialispills.com/]can you buy tadalafil in mexico[/url] [url=http://buytadalafiloverthecounter.com/]tadalafil 20mg generic cost[/url] [url=http://ivermectinx.com/]ivermectin tablets uk[/url] [url=http://sildenafilqtab.com/]viagra price usa[/url] [url=http://cialisoraltabs.com/]generic cialis tadalafil[/url] [url=http://ivermectinv.com/]ivermectin cost canada[/url]

  58. [url=http://buytadalafilgenericpills.com/]cheapest tadalafil us[/url] [url=http://ordercialistablets.com/]cialis over the counter south africa[/url] [url=http://genericviagrasale.com/]viagra soft flavoured[/url] [url=http://sildenafilqtab.com/]viagra paypal[/url] [url=http://viagragenerictabs.com/]viagra online us pharmacy[/url]

  59. [url=http://sildenafilebuy.com/]buy brand viagra online[/url] [url=http://hydroxychloroquinezf.com/]hydroxychloroquine tablets[/url] [url=http://allopurinolbuy.com/]allopurinol 50 mg[/url] [url=http://tadalafilbuyb.com/]online tadalafil us[/url] [url=http://hydroxychloroquineonlinepharmacy.com/]hydroxychloroquine 200mg 60 tablets[/url] [url=http://ibuyviagra.com/]women viagra buy[/url] [url=http://viagranc.com/]price for viagra[/url] [url=http://tadalafilonlinebuy.com/]tadalafil prescription drug prices[/url] [url=http://tadalafilc.com/]tadalafil online australia[/url] [url=http://ivermectinpharmacysale.com/]stromectol 3mg cost[/url]

Leave a Reply

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