Can't hide a
in Bootstrap

Question

For some reason I can't hide the <br> tags only show up on small screen sizes. It doesn't show up for small screens. It works for the other screen sizes. It works for other tags. Something about the <br> tags with the small screen size.

 <div class="row">
  <img src="static/works_3.jpg" class="img-responsive works-photo col-md-4 col-sm-12"><br class="hidden-xs hidden-md hidden-lg">
  <img src="static/works_3.jpg" class="img-responsive works-photo col-md-4 col-sm-12"><br class="hidden-xs hidden-md hidden-lg">
  <img src="static/works_3.jpg" class="img-responsive works-photo col-md-4 col-sm-12"><br class="hidden-xs hidden-md hidden-lg">
 </div>

note that using line breaks for positioning, formatting, and clearing content is a task better suited to CSS than HTML, so you may not want to use
at all. see [this](http://stackoverflow.com/questions/3937515/when-to-use-br-line-breaks-vs-css-positioning) SO discussion — danyamachine, Sep 30 '15 at 01:09

score 12 · Answer 1 · answered Sep 30 '15 at 01:00

12

change <br> to <div class="hidden-xs hidden-md hidden-lg"></div>

it should help

answered Sep 30 '15 at 01:00

sglazkov

1,046
1
10
38

4

better to wrap it

– bart Sep 18 '16 at 18:32

score 3 · Answer 2 · answered Feb 17 '19 at 17:15

3

These clases hidden-md etc. has been dropped from stable Bootstrap 4. Use these instead: .d-sm-none .d-md-block

answered Feb 17 '19 at 17:15

lukyer

7,595
3
37
31

score 2 · Answer 3 · answered May 09 '18 at 13:33

2

This work for me.

<br class="hidden-xs"/>

Hope it helps!

answered May 09 '18 at 13:33

elmondino

33
4

score 0 · Answer 4 · answered Jul 30 '19 at 20:10

I usually don't give classes to line break tags. My sass is usually like this. In this particular case, I am showing on larger screens i.e 'lg' and above breakpoints. I am hiding the line break tag otherwise.

This keeps the markup clean. Example:

I usually don't give classes to line break tags. My sass is usually like this. In this particular case, I am showing on larger screens i.e 'lg' and above breakpoints. I am hiding the line break tag otherwise.

This keeps the markup clean. Example:

br {
    display: none;
    @include media-breakpoint-up(lg) {
      display: block;
   }
 }

score 0 · Answer 5 · edited Mar 30 '20 at 07:58

0

You can do as following:

<br class="d-none d-sm-inline" />

But it may not be cross-browser.

edited Mar 30 '20 at 07:58

Ivan Aracki

4,861
11
59
73

answered Mar 29 '20 at 22:19

Yatko

8,715
9
40
46

This hid it for all sizes – AG_HIHI Apr 22 '21 at 16:46

Christian Fröhlich · Answer 6 · 2022-05-14T12:17:19.880

0

With Bootstrap 5 it is:

<br class="d-md-none">

To show it only on large screens and up, it would be:

<br class="d-none d-lg-block">

https://getbootstrap.com/docs/5.1/utilities/display/#hiding-elements

edited May 14 '22 at 12:17

answered Apr 04 '22 at 09:45

Christian Fröhlich

61
7

Can't hide a in Bootstrap

6 Answers6

Can't hide a
in Bootstrap