Clever Geek Handbook

How / What is a good way to customize elements from a bootstrap design?

I am in the business of building websites and I am using Bootstrap themes for website design, but I want to redesign some things.

For example, I want to change some of the colors in the buttons, make the navigation transparent, and move some containers.

Should I add properties to the Bootstrap file CSS

, or should I create a new file CSS

and select the items I want to change from the Bootstrap theme there?

If creating a new file CSS

is the best way, should I add another class or ID

for selection or just select items from Bootstrap class names?

+3


source to share


3 answers


I think its best to use Customize and customize the Bootstrap theme.



If something is not available in the theme, then you should add an additional CSS

file (from less / sass / plain css) and override the classes you want .

+2


source


Bootstrap provides you with the LESS files you need to compile the css.

Make all your changes and recompile the css according to your needs. This is the easiest way to set up standard color schemes, mobile breakpoints, and more.



If you've never used CSS pre-processors before, this is the only thing worth learning.

+1


source


A good option is to add an extra .class tag to the required element and change it locally. The main reason for this is that you shouldn't change the Bootstrap core design.

Create a class named class = "my_Button" and add it to your button element tag, for example

<button type="button" class="btn my_Button" >Button</button>

and change its property like this is the same file or create a separate CSS file

    <style type="text/css">
        .my_button { 
            bottom:100% !important; top:auto !important;
         width:170px;
        }

   </style>

another option would be to change the built-in

<button type="button" class="btn my_Button" style="width: 170px">Button</button>
0


source






More articles:


All Articles