Text alignment in CSS Bootstrap 4?

R

RedCat_ru2019-03-14 19:48:04

css

RedCat_ru, 2019-03-14 19:48:04

Greetings. I ran into this problem while learning bootstrap. I align the text using align-self and align-items everything works. And when I try to equalize the text through justify-content, nothing happens at all.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="css/main.css">

    <title>Bootstrap 4</title>
</head>
<body> 

    <div class="container-fluid">
        <div class="row justify-content-end">
            <div class="col">Lorem ipsum dolor sit amet.</div>
            <div class="col">Lorem ipsum dolor sit amet.</div>
            <div class="col">Lorem ipsum dolor sit amet.</div>
            <div class="col">Lorem ipsum dolor sit amet.</div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

What could be the problem?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

R

RedCat_ru, 2019-03-15
@RedCat_ru

I'm sorry, I didn't express myself correctly. Not text, but column block alignment. The fact is that using flex everything comes out as it should. And in bootstrap, justify-content-endfor some reason, the attribute does not affect blocks with text at all. Here is an example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css">

    <title>Bootstrap 4</title>
</head>
<body> 

    <div class="container">
        <div class="col">Text1</div>
        <div class="col">Text2</div>
        <div class="col">Text3</div>
        <div class="col">Text4</div>
    </div>


    <script src="js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

.container
    width: 100%
    height: 150px
    background-color: #000
    color: #fff
    display: flex
    justify-content: flex-end
    .col
        margin-right: 20px

Everything works here, the blocks are pressed to the right edge. Damn bootstrap, I hate it. Either I’m a fool, or the sleigh doesn’t go :) I wouldn’t teach him, because they demand it everywhere, although there are grids and flexes that are many times better.