I need help ith Bottstrap


#1

How do you make it so that you get different effects at different screen widths?


#2

Can you be more specific?

You can apply a different style, or any other CSS property for a specific width using media-queries


#3

Do you mean something like a top nav panel that flip flips to a vertical sidebar when you get down to mobile phone size or something like that?


#4

@rainythunderstorm What do you mean by “effects”? Like animations or are you just trying to make a page look different for different view sizes?


#5

Are you talking about defining column sizes?

<div class="row">
    <div class=col-xs-4>

col-“screen”-“size”

size can be any number out of 12. Each row on the screen is divided into 12 squares, if you wanted an element to take up half of the screen on a phone you would assign it the following class

.col-xs-6

xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)

edit: This link explains it much better than me


#6

Sorry, people.

I meant as in making it so that the css of element changes depending on screen size.


#7

The Bootstrap documentation is here: https://getbootstrap.com/

Maybe the easiest way for us to help is for you to show us what code you have tried so far that isn’t working. It will help us help you if you can share your code from https://codepen.io.


#8

Thanks, people. I’ve figured it out.