if i use custom flexbox css - can i use bootstrap too?

[rootKID]

Hello W3S.

So this is not a problem as much as a question.

I have found this awesome tutorial where i can use CUSTOM FLEXBOX CSS CODING to make a sidepanel/menu to my website (not online just yet).

My question is. If i start doing this, can i use stuff like grid boxes from bootstrap 4?

The reason i ask of this, is because im afraid of the grid "break-points". For example if i make use of a navbar on a content (the right side of the page etc...) and set the expand to "xl" - will the "width/px" breakpoint get in trouble with breaking and stuff like this, in regards to the custom setup i have?

I'm asking mostly because im a big fan of bootstrap - however lately they have not been able to deliver the things i need and i would have to think differently and try to compromise with my designs and things like this.

I hope my questions makes sense? Mostly because i know (again, for example), bootstrap 4 have breakpoints like "if less than 1000xxxx pixels, break" and so on. But in my situation, i wish to make a website that are kinda "divided" into left/right and with different pixels in widths and such - so if i start to insert "containers, rows, columns, etc"... this is what im afraid of?

Hope you all understand my concern and could answer this - if more details/samples neede, dont hesitate to ask

Many thanks in advance!

[dsonesuk]

Since bootstrap uses classes to apply different properties i would have thought yes! As long you custom class names don't conflict with bootstraps.

[rootKID]

ok so short answer is yet i can assume? And no, my classes won't in any way conflict with theirs. I also use something like ".CUSTOM_CSS-classe_name_goes_here_etc"... but why im confused is that they have specific breakpoints with rems and pixels... if i make a class called ".CUSTOM_CSS-wrapper_1" and place that as being my website holder etc - will i still be able for instance to place container,row and col-sm-12 classes inside there? If i have f.ex. a specific width inside that wrapper? Or for the sake of responsiveness an "auto" width? If that makes sense?

[dsonesuk]

As long as you use container-fluid within you html you should be fine, as container class adusts to device width using media queries which are fixed widths, while container-fluid uses 100% filling the width of parent container it is in.

[rootKID]

hmmm... so something similar to this you mean:
 

<div class="container-fluid">
  put my wrapper around here? or how do you mean?
  <div class="row">
    <div class="col-sm-4">
      .COL-SM-4
    </div>
    <div class="col-sm-8">
      .COL-SM-8
    </div>
  </div>
</div>

this is why im kinda confused. if i could only use bootstrap, my life would be saved but i have primarily 2 problems when it comes to BS. first is that i cannot get the things to be 100% height AND even then, if i do get them to be 100% height, i have trouble with overflow's with texts and such AND! Then the next problem is the columns (i think at least...). Whenever i try to make the height 100%, i have problems with the breakpoints in bootstrap 4.5.2 - of which i simply don't know how to get around (the fixes).

This is why i would have to make a work-around with the custom stuff but still a bit un-clear to me as to how i should take the aproach 😕

 

 

 

[dsonesuk]

You usually set body, html to height: 100%,

Then set a outermost container to min-height: 100%; or nowadays min-height: 100vh;

[rootKID]

On 10/2/2020 at 6:39 PM, dsonesuk said:

You usually set body, html to height: 100%,

Then set a outermost container to min-height: 100%; or nowadays min-height: 100vh;

hmm - if i start messing around with html/body tags, does that not interfere with the BootStrap CSS Oo? I mean, even tho i set it to be 100% in both height and width, still...

[dsonesuk]

You should never use 100% width on body or html element, that will cause issues. Bootstrap deals  with html code within body element, not html or body tags themselves. If you didn't use html, body with 100% height, and tried to use flex box to give a container height to fill page, it wouldn't because the body shrinks down to content which would be flex box element margins, padding and flex box would fill to that height of body.

So you control body, html height depending on the design required.

Edited October 4, 2020 by dsonesuk

[rootKID]

Hmm ok i think i understand now.

But just to give you an ideas as to what im looking into currently - is the demo page of "OpenCart" admin panel. OpenCart is an open-source website for webshops - and i kinda like their setup - which i am currently trying to copy. I have tried to copy some of their CSS code just to see how theirs work and it looks pretty good - just not sure if its the right way but it works on my end.

Basically i still hit the "body" element, and tells it with normal css (no flex just yet), that it should be 100% height and then i have a simple wrapper div box right after as a child where i tell it to be absolute position and 100% height and from there, i can start playing around with divs inside, which is working great so far - i haven't had any spoilers/errors just yet

[dsonesuk]

Position absolute should only be used to overlay elements over another element. The direct child after body just requires min-height: 100%;.

[rootKID]

but i tried this and it dosent react for some reason 😕

I tried creating a whole new project with css and everything. When i get home i can try and give you the code here, where you can see what i am doing currently - maybe you can see if i'm doing it correctly or not.

Right now im just using the CSS based from OpenCart admin panel and it seems to work as said before, but still, could be doing it wrong. Will share the coe when i get home later