Bootstrap class w-50 changes text positioning, how can I centre text?

Question

So I am trying to change the width of the lorem ipsum text but when I have changed the width of it myself or given in w-50 (bootstrap class) it changes the positioning from the centre? its a 50/50 page as you can see so need it to be centre thanks for your help! :)

'It looks like your post is mostly code; please add some more details' so dont worry about this just so I can submit lol! thanks again for reading this far :P

/*Colors: #033249 = Blue  #ff8038 = Orange*/
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Roboto:wght@100;300;400&display=swap');


body {
    height: 100%;
    background: linear-gradient(90deg, #033249 50%, #ff8038 50%);
}

/* Navbar */

.link-style {
    margin-right: 6em;
    font-family: "Roboto";
    font-weight: 400;
    font-size: 20px;

}

#navbar-item-color {
    color: black;
}

#navbar-item-color:hover {
    color: #033249;
    font-size: 21px;
}

/* Main Content */

.logo-welcome-wrapper {
    margin-top: 10em;
}

.left-text-styling {
    color: white;
    font-family: "Lato";
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 8px;
}

.h1-styling {
    font-size: 60px;
    letter-spacing: 0;
}

.right-text-styling {
    color: black;
    font-family: "Lato";
    font-weight: 400;
    font-size: 20px;
}

.h2-styling {
    font-size: 45px;
    letter-spacing: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="assets/style.css">
    <title>OceanWebDev</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link link-style" href="#"><span id="navbar-item-color">Home</span><span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link link-style" href="#"><span id="navbar-item-color">About Us</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link link-style" href="#"><span id="navbar-item-color">Our Services</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link link-style" href="#"><span id="navbar-item-color">Contact Us</span></a>
            </li>
        </div>
    </nav>
    <div class="container-fluid">
        <div class="row text-center logo-welcome-wrapper">
            <div class="col-6">
                <h1 class="h1-styling left-text-styling">OceanWebDev</h1>
                <h4 class="left-text-styling">Web in touch with tomorrow</h4>
            </div>
            <div class="col-6">
                <h2 class="h2-styling right-text-styling">Welcome</h2>
                <p class="right-text-styling w-50">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore nobis repudiandae sint maxime maiores eveniet natus expedita ab, veritatis repellendus laudantium placeat similique deserunt, quod, aut consectetur corporis laboriosam? Saepe.</p>
            </div>
        </div>
    </div>







<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

When you get the message '*It looks like your post is mostly code; please add some more details*', that is an indication that your question probably doesn't meet the guidelines. In the case of this question, you should create a **[MRE]** with only the code required to show the problem. — FluffyKitten, Oct 02 '20 at 00:02

inki · Accepted Answer · 2020-10-01T22:52:04.587

1

All you have to do is add a class of mx-auto to that paragraph:

<p class="right-text-styling w-50 mx-auto">

which is the same as margin: 0 auto

There's an answer already with a good explanation of what margin: 0 auto does here

edited Oct 01 '20 at 22:52

answered Oct 01 '20 at 22:39

inki

1,926
17
25

Bootstrap class w-50 changes text positioning, how can I centre text?

1 Answers1