• Friday , 24 January 2020

Twitter Bootstrap Tutorial: Add Custom CSS To Website Layout [Part 5]

Code Canyon
https://i.ytimg.com/vi/ZLry2tWz2WA/hqdefault.jpg



Hope you enjoyed this tutorial!
Oh and if you want to go in depth, check this guide out (more than 12k word ultimate guide).
PSD to HTML Tutorial: The Only Guide You Need in 2015 – http://www.1stwebdesigner.com/psd-to-html/

Applying CSS Styles

Now that we’re done marking up our HTML, it is time to overwrite the styling that Twitter Bootstrap has provided. What’s good with this is we will not be worrying anymore on the layout structure because Bootstrap already has done it for us by just adding the right classes for each division that we’ve markup in HTML. All we need to do now is to style the elements to match to our PSD design.
View the original article with working demo and resource files here: http://www.1stwebdesigner.com/psd-to-html/
—–

If you are enjoying these video series and are looking for more, we created The Ultimate 2015 Web Design Learning Course, where in 9 hours we will teach you how to Build Your Own WordPress Site – 100% Responsive & Flat – http://rockingcode.com/

You will learn how to build website from scratch in Photoshop, then convert PSD to HTML and CSS. Finally using Bootstrap magic, we will covert website to fully responsive and functional WordPress website.

We throw in some business lessons, interviews and many bonuses to amplify your learning and help you get some clients as well!

What you are waiting for? Take your skills to the next level right now with http://rockingcode.com/

Original source

3d Ocean

Related Posts

28 Comments

  1. Yunus Emre
    February 14, 2019 at 14:18

    pull-left or right replaced by float-left or float-right in Bootstrap 4

  2. kingsley chibuzor
    February 14, 2019 at 14:18

    Big Thanks, Mate

  3. Al-Amin Hossain Yuvraj
    February 14, 2019 at 14:18

    I want this template for practice

  4. Rak Usu
    February 14, 2019 at 14:18

    I just noticed you put a margin-top on the "btn" class at 54:30, now if it's used on other pages, it may have an undesirable look… perhaps it might be better if it's specific only to the "process" class. Just saying. But thanks for the very detailed tutorial. I really appreciate it. 🙂

  5. yhteensatuma7
    February 14, 2019 at 14:18

    the margins on the left and right side of the whole content in the body doesn't look same as in psd, what is the easy way to fix it?

  6. Jorge Determinado
    February 14, 2019 at 14:18

    mine i think is not responsve. like in the last part of this video.

  7. Kevin O'Hagan
    February 14, 2019 at 14:18

    My style.css is not displaying in FireFox or IE…not sure if I've missed something in the tutorial. Can anyone help?

  8. Tai Le
    February 14, 2019 at 14:18

    A great and helpful tutorial. Thanks

  9. Alisrar Ali
    February 14, 2019 at 14:18

    sooo good!

    Its full of knowledge but spent enough time on it please reduce spending much time on …….

  10. c huang
    February 14, 2019 at 14:18

    I understand why "bootstrap" is popular frame, in this video.

  11. Samir Khan
    February 14, 2019 at 14:18

    can i get the psd file ?

  12. ธนู ศิลป์เลิศ
    February 14, 2019 at 14:18

    Thank you

  13. LuckyNoteProds
    February 14, 2019 at 14:18

    pro! subscribed and liked! trying to learn how to make a website for selling my music online. this has been helpfull. hope i can make my own, although it will never be that good ahah

  14. Chetan Meghani
    February 14, 2019 at 14:18

    Truly you are web Guru for me!

  15. ReallyIni
    February 14, 2019 at 14:18

    Great tutorial. Thanks!

  16. zeryab hassan Kiani
    February 14, 2019 at 14:18

    Can anyone guide me to a link in which a complete website is made using XHTML as an example

  17. Red Herring
    February 14, 2019 at 14:18

    Can't believe it got so many tips off this video 🙂 Thanks a lot. (Also downloaded the text editor you were using; My OCD is now satisfied that I don't have window explorer tabs open everywhere :D)

  18. Ben Cipher-X
    February 14, 2019 at 14:18

    Anyone got the source code???

  19. Jordan Davila
    February 14, 2019 at 14:18

    pt isn't the same as pixel

  20. blissB2
    February 14, 2019 at 14:18

    Thanks man ! You've no idea how much this helps !

  21. Angie C
    February 14, 2019 at 14:18

    Awesome tutorials. Thanks!

  22. Michael John Burns
    February 14, 2019 at 14:18

    Follow me on twitter guys!

  23. Mark Joseph Viloria
    February 14, 2019 at 14:18

    Nice! I learned a lot! Thanks Mike!!!!

  24. Lee Ravenberg
    February 14, 2019 at 14:18

    25:00 awesome, now I can place my own fonts in my design. Thanks for teaching this.

  25. sandun kodagoda
    February 14, 2019 at 14:18

    you are the god man…,great and easy to follow , please do more…..!

  26. Venkatesh Vasam
    February 14, 2019 at 14:18

    You are not only a Design guru…,you are the Web guru….

  27. Johnny Tuc
    February 14, 2019 at 14:18

    You crazy singer!

  28. BeeboiZam
    February 14, 2019 at 14:18

    Mike! Awesome job man! I am learning A LOT from watching you videos! Keep on doing your thing!

Leave A Comment

You must be logged in to post a comment.