When I tag Row Booststrap I leave a blank

Asked

Viewed 37 times

-4

When I put the class "row" in any document it leaves a blank space, I’ve tried everything and the blank space remains, I thought it was the file I was editing, then I created this to see and the same happened.

<div class="row">
    <h1>title</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque repudiandae optio ullam itaque corporis fugit sit quas expedita rem quidem, aspernatur voluptates placeat eos earum cupiditate laudantium at odio necessitatibus.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora officiis nemo, tenetur velit placeat asperiores consequatur vel eaque. Quibusdam non cum libero reprehenderit quis, molestias vero dolorum illum! Sed, inventore.</p>
</div>

html twitter-bootstrap
  • 1

    Ever tried to insert a div container-Fluid involving the Row?

  • What would be the white space you’re talking about?

  • on the right side, it surpasses the screen

  • @Leandrade tried and did not work, in the project to using container

2 answers

-2

You may be using a container-Fluid or change the Row class by adding a padding

.row {
    padding: 10px
}

or

<div class="container-fluid">
    <div class="row">
        <h1>title</h1>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque repudiandae optio ullam itaque corporis fugit sit quas expedita rem quidem, aspernatur voluptates placeat eos earum cupiditate laudantium at odio necessitatibus.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora officiis nemo, tenetur velit placeat asperiores consequatur vel eaque. Quibusdam non cum libero reprehenderit quis, molestias vero dolorum illum! Sed, inventore.</p>
    </div>
</div>

  • both in the test as the project continues to have this blank part, that in the project I am using <div class="container">, I put conteiner-Fluid and continued persisting, I put the padding of 10px and continued

  • In the answer above from what I saw, space is being on the right side. In the code example, we are using two <p> tags, this causes the text to break at the end generating the spacing. If you remove the second <p> tag by letting the text go to the end of the margin, then it will break according to the screen.

  • the problem is not the paragraph, this was for testing that really what is giving error is the Row, ai wanted to fix the problem, that in my project that is giving conflict is the Row |:

-3

Your question was not very clear, but from what I understand, it is in the alignment of the text.

Use the property text-align CSS to align your text as desired. Because of your text "spacing" problem at the end, I believe the best option would be text-align: justify. Thus remaining:

div p {
  text-align: justify;
}
<div class="row">
    <h1>title</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque repudiandae optio ullam itaque corporis fugit sit quas expedita rem quidem, aspernatur voluptates placeat eos earum cupiditate laudantium at odio necessitatibus.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora officiis nemo, tenetur velit placeat asperiores consequatur vel eaque. Quibusdam non cum libero reprehenderit quis, molestias vero dolorum illum! Sed, inventore.</p>
</div>


Brief explanation of text-align: justify:
The contents are justified. The text should be spaced to align its left and right edges with the left and right edges of the line box, except for the last line.

Source: MDN - text-align

  • face now I was doubted if it is only in my machine, but a normal site would be width: 100%, it kind of ta with width:101% and if I put 99% it takes the corner of the page

  • I tested the code and is normal, I believe it is some problem on your screen even. Tried to use another browser?

Browser other questions tagged html twitter-bootstrap

You are not signed in. Login or sign up in order to post.