• Sunday , 5 July 2020

Bootstrap 3 Tutorial Pt.11 – CSS Modifications to Navbar and Buttons

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



Homepage: http://bootstrapbay.com
Source Files: http://github.com/bootstrapbay/tutorials

In this installment of our Bootstrap 3 tutorial, we add some custom CSS modifications to the common Bootstrap elements including the navbar, navbar links and buttons.

Below are some helpful tools to pick colors for your theme.
Adobe Kuler: https://kuler.adobe.com/create/color-wheel/
Color Scheme Designer: http://colorschemedesigner.com/

Original source

3d Ocean

Related Posts

23 Comments

  1. Ferenc Cziryek
    May 26, 2020 at 19:04

    also would you mind to explain accessing order of elements, grouping, the > element, please thank you

  2. Ferenc Cziryek
    May 26, 2020 at 19:04

    Hi I would like to change navbar height, ' title' in navbar brend is longer might need two rows, a lot of things are affected, how to do a proportional changing?

  3. Darrin Holtz
    May 26, 2020 at 19:04

    This video is useless. Nothing works here and when you go into responsive mode everything is lost.

  4. Shaikh Asim
    May 26, 2020 at 19:04

    Sir why we are using hover and focus im not getting this can you please explain me this…. and one more thing sir your videos are very helpful 🙂

  5. Shaikh Heena
    May 26, 2020 at 19:04

    Thank you very much. You helped me a lot.

  6. Kistlak Rajapaksha
    May 26, 2020 at 19:04

    Perfectly Worked !! 😀
    Thank U Very Much Bro !! 😀

  7. Николай Енчев
    May 26, 2020 at 19:04

    @Jankesaurous Hey I would like to put my <a> nav bar centered ! not right … :/ how can I do that ? ?

  8. Akash dk
    May 26, 2020 at 19:04

    how can i change the size of nav bar without affecting the hamburger button??? anyone pls help me

  9. kea sinat
    May 26, 2020 at 19:04

    I had changed color nabar-default but it wasn't work at all. Why?

  10. Archit Chandra
    May 26, 2020 at 19:04

    Hi. I am really new to all this so my question might be very very basic, but Bootstrap has me stumped. I can't understand how to know which CSS class/classes need to be modified for which changed. Is it just memorizing stuff? How can I look at the HTML code and understand what to change? Is there some particular resource apart from the official website that could be really useful for me? Thanks i advance.

  11. Omid mirrajaee
    May 26, 2020 at 19:04

    how can i change navbar-form style in .navbar-default ?

  12. Omid mirrajaee
    May 26, 2020 at 19:04

    very very tnx : that was very helpful

  13. Muhammad Naveed
    May 26, 2020 at 19:04

    I am trying to align navbar items center .using ul custom class .but Its not aligning in center

  14. Raphael A. Alves
    May 26, 2020 at 19:04

    Thank you, that was very helpful;

  15. Muhammad Ali
    May 26, 2020 at 19:04

    .navbar-default{
    background-color: #2C3E50;
    color: #FFFFFF;
    }
    border-color: #FFFFFF; working but remaining two not working background-color: #2C3E50;color: #FFFFFF;
    please help me

  16. VenoMous KPV
    May 26, 2020 at 19:04

    Thank man, really helpful.

  17. Mar Dee
    May 26, 2020 at 19:04

    Thank you man!

  18. Clay Vernon
    May 26, 2020 at 19:04

    I'm attempting to have different heights for my navbar based on the width of the navbar. (60px for min-width 768, 90px for min-width 992, and 120px for minwidth 1200)
    How would you approach that?

  19. Rock Rabin
    May 26, 2020 at 19:04

    if we try directly customize the bootstrap navbar it will automatically get the same color and properties for another navbar in same page … what will be the best trick to overcome this problem ??

  20. Oliver Beck
    May 26, 2020 at 19:04

    Hi, I don't know if anyone is going to read this but how do you edit the color of a disabled button? Like when a button grays because it is disabled, how do I edit the color of that? Is there a CSS class I can use? Thank you very much

  21. DRISS AGNAOU
    May 26, 2020 at 19:04

    Tres bon tuto;merci.

  22. Insan Azis
    May 26, 2020 at 19:04

    Best tutorial 🙂

  23. Cristina Padro
    May 26, 2020 at 19:04

    Your tutorials are the best! Keep doing a great job.

Leave A Comment

You must be logged in to post a comment.