Starting learning flexbox

HTML-CSS
1

Hello,
I started learning flexbox trying to remake my bootstrap pages and
encounetred some questions

  1. It is not a good idea to use flexbox and bootstrap on the same page. Is it so?

  2. Are there some set/library for colors of flexbox? like default classes/colors like “alert-, card-” etc…
    Starting with flexbox I would prefer to have some default classes likw with bootstrap…

  3. I did find to to make with flexbox image aligning left and text right, similar : https://prnt.sc/o7d73d
    In css it was implemented with float : left, but which is proper way with flexbox ?

Thanks!

2

Hi, @PetroGromovo

  1. Why not , bootstrap 4+ versions ara based on flexbox.
  2. No , flexbox is just layout , bootstrap is a framework , if you want to have the same classes like bootstrap, you should manually create them.
  3. You can wrap them in div with classes : display: flex; flex-wrap:wrap;

For better explanation you can check here : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
It is very helpuful.

Best!

1 Like
3

Do you think that a good design to replace bootstrap’s grid with flexbox and to use the rest of bootstrap ?

4

Bootstrap’s grid uses flexbox, and the main usecase for Bootstrap is generally the grid, so the question then becomes whether there’s much point using Bootstrap if you’re not using it’s main component.

Flexbox is just a set of CSS properties that provide you with rules to lay out elements in lines, that’s all. That happens to be one of the major use cases for CSS, so it’s extremely useful, but it isn’t a framework or anything.

1 Like
5

@PetroGromovo

  1. I say no. If you use Bootstrap you should not need too much CSS especially for the layout.
  2. No. Flexbox is only for layout.
6

I don’t fully agree. I think Bootstrap has some nice default styles and element styles that can still be used without really using the layout part.

1 Like
7

Thank you for feebback !
Looks like Bootstrap 4 has many flexbox options in it’s classes
If there is some docs in which described Bootstrap 4 classes using flexbox options?
That could be helpfull working with flexbox / Bootstrap app…

8

Did you check the bootstrap documentation? Here are the docs for the flex utilities.

1 Like
9

@PetroGromovo by the way, I recommend learning CSS and flexbox for layouts well before diving into Bootstrap because Bootstrap is an easy way of building a website. It is good to learn the basics first (HTML and CSS).