Home>

About tags

I will ask you a question for the first time.
The following code uses the hr tag in two places, but the first hr does not work for some reason. A ruled line is displayed when


is written (first image), but disappears as soon as
and the tag are closed (second image). Why? Bootstrap version is 4.3.1. CSS is not applied.
I would appreciate it if anyone could tell me. Thank you.

Applicable source code

  
    
       Built with ease. 
    
    <hr>
    
      <p>Welcome to my Bootstrap 4 website tutorial! Bootstrap is a free and open-source frount-end library with HTML and CSS based designs.</p>
    
  


  
    
      <i></i>
       HTML5 
      <p>Build with the latest version of HTML, HTML5.</p>
    
    
      <i></i>
       CSS3 
      <p>Build with the latest version of CSS, CSS3.</p>
    
    
      <i></i>
       Bootstrap4 
      <p>Build with the latest version of Bootstrap, Bootstrap4.</p>
    
  
  <hr>

When you verify with chrome, the second hr that is displayed well has width * height of 473 (variable) * 1, while the first that is not displayed is 0 * 1 It has become. I think that it is the same state that width is not 0, but I don't know why.

Supplemental information (FW/tool version etc.)

Please provide more information here.

  • Answer # 1

    I think it's a place to put it.
    If it is a document, it is per Grid system, but the flow of row-col is in the form of one system, and there is an image that becomes invalid when placed outside that system.
    br seems to work, but height is 0 no matter how manyare put.

    If you want to put an underline on the letters "Built with ease.", it is better to place a line on the border-bottom of h1 or a line on the border-top of the content part below I think.

  • Answer # 2

    It was possible to display by placing hr directly under h1.

    
      
        
           Built with ease. 
          
                    

    Welcome to my Bootstrap 4 website tutorial! Bootstrap is a free and open-source frount-end library with HTML and CSS based designs.