Do not put the label inline in a form-inline - Bootstrap

I have a form, I have in this two fields inline because they are in a form-inline div, I want to put the label of these above the fields and not next to them. How to remove form-inline from them without affecting the fields?

Here is a CodePen

<main id="contact_part">
    <article class="mb-5 row">
        <h1>Nous Contacter</h1>
        <div class="col-md-12">
            <form action="" method="post" id="contact_form">
                <div class="form-inline">
                    <label class="" for="name_contact">Name</label>
                    <input type="text" class="form-control mb-2 mr-sm-2" id="name_contact" placeholder="Nom" required>

                    <label class="" for="lastNameContact">Name</label>
                    <input type="text" class="form-control mb-2 mr-sm-2" id="lastName_contact" placeholder="Prénom" required>
                </div>
                <div class="form-group">
                    <label class="" for="email_contact">E-Mail</label>
                    <input type="email" name="email_contact" id="email_contact" class="form-control" placeholder="E-Mail" required>
                </div>
                <div class="form-group">
                    <label class="" for="message_contact">Message</label>
                    <textarea class="form-control" id="message_contact" placeholder="Message" required></textarea>
                </div>
            </form>
        </div>
    </article>
</main>

#contact_part article {
    background-color: #FFF989;
    font-family: main, "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #565656;
    padding: 50px;
}

#contact_part .row {
    display: block;
}

#contact_part h1 {
    font-size: 1.7rem;
    text-transform: uppercase;
    margin-bottom: 3rem;
    text-decoration: underline;
    text-align: center;
}

#contact_form {
    width: 50%;
    margin: 0 auto;
}

#contact_form .form-inline label {
    
}

#contact_form input, #contact_form textarea {
    border: none;
    border-bottom: 1px solid #C6C6C6;
    background-color: #FFF989;
}

If I understand correctly you no need to use form-inline class instead use like below code. Your form will look good.

<main id="contact_part">
<div class="container">
<article class="mb-5 row">
<div class="col-12">
<h1>Nous Contacter</h1>
</div>
<div class="col-12">
<form action="" method="post" id="contact_form">
<div class="row">
<div class="col-12 col-md-6">
<div class="form-group">
<label class="custom-control pl-0" for="name_contact">First Name</label>
<input type="text" class="form-control" id="name_contact" placeholder="First Name" required>
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-group">
<label class="custom-control pl-0" for="lastNameContact">Last Name</label>
<input type="text" class="form-control" id="lastName_contact" placeholder="Last Name" required>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label class="custom-control pl-0" for="email_contact">E-Mail</label>
<input type="email" name="email_contact" id="email_contact" class="form-control" placeholder="example@example.com" required>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label class="custom-control pl-0" for="message_contact">Message</label>
<textarea class="form-control" id="message_contact" placeholder="Message" rows="5" required></textarea>
</div>
</div>
</div>
</form>
</div>
</article>
</div>
</main>

Code Pen.

Use col-12 instead of col-md-12 class for better performance. Don't use row without container or container-fluid. If you use only row it give you horizontal scroll bar. Your code will look like this.

<div class="container">
<div class="row">
<div class="col-12"></div>
</div>
</div>

Or

<div class="container-fluid">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12"></div>
</div>
</div>
</div>
</div>

Fluid view or 100% Browser width

<div class="container-fluid">
<div class="row">
<div class="col-12">Content</div>
<div class="col-12">Content</div>
<div class="col-12">Content</div>
<div class="col-12">Content</div>
</div>
</div>

> Hope this help!
1: https://codepen.io/rahulmoral/pen/dyPJeNG

Try this,

.form-inline label
{
margin-bottom:3em;
}

Or You can move the label outside the<div class="form-inline">

Here you go, let me know if this works: https://codepen.io/luke-richter/pen/XWJVqWO

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<!-- language: lang-css -->

#contact_part{
background-color: #FFF989;
font-family: main, "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #565656;
padding: 50px;
}

<!-- language: lang-html -->

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<!------ Include the above in your HEAD tag ---------->
<main id="contact_part">
<div class="container ">
<div class="row">
<h2>Inline form with heading above inputs</h2>
</div>
<form action="#">
<div class="row">
<div class="col-md-3">
<div class="form-group form-group-sm">
<label for="firstname" class="control-label">Firstname1</label>
<input type="text" class="form-control" id="firstname" placeholder="Firstname">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="lastname" class="control-label">Last Name2</label>
<input type="text" class="form-control" id="lastname" placeholder="Last Name">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="lastname" class="control-label">Last Name3</label>
<input type="text" class="form-control" id="lastname" placeholder="Last Name">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<textarea class="form-control"></textarea>
</div>
</div>
<div class="row">
<div class="col-xs-3"><br>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>

<!-- end snippet -->