Bootstrap into already existing html/css site-CodePudding

I already have html/css website. Is it possible to insert bootstrap into it and use it only for some features , for example making this website responsive on all devices etc?

CodePudding user response：

Not really.

Bootstrap sets CSS properties on many elements. Simply adding it will create a great many side effects.

Its effects are not limited to elements that you specify.

It also won't magically make things responsible. The responsive features in it require specific HTML structures which you won't have.

If you want to make an existing site responsive, you are best off writing your own media queries.

CodePudding user response：

If you just want the responsive helper utilities and the grid, then you can import the grid only, so that bootstrap styles don't clash with you own existing styles.

So instead of importing bootstrap.css you just import bootstrap-grid.css.

If you use SCSS compiler you can do the same thing just with the .scss extension.

https://getbootstrap.com/docs/5.1/getting-started/contents/#css-files

CodePudding user response：

Test your site with bootstrap first and see how far it clashes. Happened to me but eventually I changed to bootstrap. If your website keeps growing in time, it is worth the change.

For responsive layouts you need to follow a system. Let's say, any container you used before for the page, you can change in bootstrap 'way'. To encourage you and to give some example, the grid idea behind is that grids are divided into 12 columns.

12 columns = 100% of the width of a page.

1 grid -->  col-md-12 means 100%
2 grids --> col-md-6  means 50%  so you use 2x <div >  
3 grids --> col-md-4  means 33.3333%  so you use 3x <div > and so on.

As for responsiveness, bootstrap has some neat preparedness:

Let's say you design a 4 grid section, you do it as follows:

<div >  which means, 

column-large-6 (50%)
column-medium-6 (50%)
column-small-12 (100%)   

When the screen size is large like a TV, there will be 2 grids
When the screen size is medium like a desktop, there will be 2 grids
When the screen is small like a mobile, there will be only 1 grid.

The bootstrap system already comes with an easy setup. Just get familiar with the basics first.

You never touch the bootstrap original css file. You need your personilized style.css sheet.

As for media queries, you only use them for elements that need fine tuning. Bootstrap has a media query grid you just follow most times what screen sizes it uses.