Learning aid for new BSSers

Ideas
1

Hi,

I found this on youtube - Web Dev Simplified

It’s some css code that displays the break points XS…XXL on the top left of the preview browser screen. Takes out the guessing of what breakpoint you are at when resizing the browser screen.

Might be some way to integrate this into the BSS preview function.

Just copy and paste into a new css file - show_breakpoints.css
You can disable it to stop showing the breakpoints.

body {
  margin-top: 40px; /* This margin just makes the text easier to read. You can remove it if you want since it can mess with your other styles. */
}

body::before {
  content: "XS";
  color: red;
  font-size: 2rem;
  font-weight: bold;
  position: fixed;
  top: 0;
  right: 0;
}

/* This box class is purely used for explaining how the bootstrap grid system works. */
.box {
  background-color: lightblue;
  border: 1px solid blue;
  min-height: 50px;
  font-size: 2rem;
}

@media (min-width: 576px) {
  body::before {
    content: "SM";
  }
}

@media (min-width: 768px) {
  body::before {
    content: "MD";
  }
}

@media (min-width: 992px) {
  body::before {
    content: "LG";
  }
}

@media (min-width: 1200px) {
  body::before {
    content: "XL";
  }
}

@media (min-width: 1400px) {
  body::before {
    content: "XXL";
  }
}```
1 Like
2

You could use the icons already built into bootstrap studio:

image
image1335×86 6.32 KB

Or use the devtools in your browser that will show you all your breakpoints:

image
image1418×114 3.07 KB

3

Pages aren’t typically viewed at precise breakpoints; in fact, it’s rare.

Ensuring your page looks good between breakpoints is vital, as elements can become squeezed or overflow, leading to ugly transitions.

Being able to view your actual page across a variety of screen sizes, from XXL to SX, is incredibly valuable for this reason.

4

You can drag between breakpoints in both bss and dev tools. In BSS as you are dragging the icons I highlighted in my original post change to show what breakpoint you are within.

This might be something you will find useful:

It allows you to see your page across multiple device sizes

1 Like
5

That is very impressive software :+1: :+1: :+1:

6

Agreed, but in general, if you stick with Bootstrap’s stock responsive components and CSS, things generally flow and reposition themselves nicely between breakpoints.

And just to ensure there are no ugly issues in between the predefined breakpoints (the icons in the upper right), you can just grab the edge of the website in the BSS workspace and drag left or right to make it any width you want. I do this all the time during my builds. The same can be done by previewing the website and changing the width of the browser window.

Problems arise when people start changing the CSS, or use third-party code that hasn’t been developed/tested with the Bootstrap framework. You can also run into issues if you use things like the No Wrap option on text, which will cause it to overflow containers.

7

This 100% CSS tip is interesting.
Depending on the situation, I use the browser’s developer tools or resize the browser window.