CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Vasiliy Mazhekin
Vasiliy Mazhekin

Reputation: 688

Why <p> and style display:block not working?

I have trouble with HTML coding of my website. The problem is that tags

and element with style="display:block" are displayed in one line anyway. But each block must be in separate line. I use bootstrap 4.0.0 beta 2.

Screenshot of the problem

Here is real example https://codehint-web-ng.herokuapp.com/articles

Upvotes: 2

Views: 2487

Answers (2)

Temani Afif
Temani Afif

Reputation: 272965

There is display: flex defined the parent container (.row), that's why the block element are in the same line. The default behavior of the flex is to put all elements in the same line (flex-direction:row)

enter image description here

To fix this you may change the direction of flex to column by adding your own CSS or consider the builtin classes provided by bootstrap: https://getbootstrap.com/docs/4.4/utilities/flex/#direction

enter image description here

Upvotes: 5

Deepak Kumar
Deepak Kumar

Reputation: 221

Just add extra CSS as below :-

.no-gutters p, .no-gutters nav, .no-gutters h1 {width:100%;}

Upvotes: 0

Related Questions