Bootstrap 4 - text refuses to go in the middle of a div

by a new one   Last Updated September 11, 2019 19:26 PM - source

Hey everyone I have this piece of code:

    <div class="row mt-5" id="System Requirments">
        <div class="col-4">
            <h4 class="text-nowrap font-weight-bold pl-4">System Requirments</h4>
        <div class="bg-light rounded" style="width:500px;">
            <ul class="nav nav-pills nav-justified" id="pills-tab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="pills-minimal-tab" data-toggle="pill" href="#pills-minimal" aria-controls="pills-minimal" aria-selected="true">
                <li class="nav-item">
                    <a class="nav-link" id="pills-recommended-tab" data-toggle="pill" href="#pills-recommended" aria-controls="pills-recommended" aria-selected="false">
            <div class="tab-content ml-4 mt-3">
                <!-- Minimal -->
                <div class="tab-pane fade show active" id="pills-minimal" role="tabpanel" aria-labelledby="pills-minimal-tab">
                    <div class="row">
                        <p class="text-left">Processor:</p>
                        <p class="text-center font-weight-bold">@Model.MinRequirments.Processor</p>

(there is of course more context for this but I'm unsure if it's needed, don't be afraid to ask for it!) the problem is with the last 4 lines, the MinRequirments.Processor doesn't go in the middle (the @ sign is Blazor syntax) I tried alot of classes but I'm unsure why it doesn't work, this is how it looks now: enter image description here

I want the bolded text to be in the middle, can anyone help me? (added red background for clarity)

Tags : html bootstrap-4

Related Questions

How to create Sidebar in bootstrap

Updated March 19, 2017 13:26 PM

Angular-ui tooltip with HTML

Updated April 08, 2017 05:26 AM