Bootstrap - Modal


Keriranje modaliteta pomoću Bootstrap-a

Modal je u osnovi dijaloški okvir ili pop-up prozor koji se koristi za pružanje važnih informacija korisniku ili poziva korisnika da poduzme potrebne radnje prije nego što krene dalje. Modali se široko koriste za upozoravanje korisnika na situacije poput isteka vremena sesije ili za dobijanje njihove konačne potvrde prije nego što izvrše bilo kakve kritične radnje poput spremanja ili brisanja važnih podataka. Pomoću modalnog dodatka lako možete stvoriti vrlo pametne i fleksibilne dijaloške okvire. Sljedeći primjer daje osnovnu strukturu za stvaranje jednostavnog modalnog oblika sa zaglavljem, tijelom poruke i podnožjem koji sadrže dugme za korisnika.

<div class="modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Potvrda</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>                
            </div>
            <div class="modal-body">
                <p>Želite li da sačuvate dokument prije zatvaranja?</p>
                <p class="text-secondary"><small>Ako ne sačuvate izgubićete promjene!</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Odustani</button>
                <button type="button" class="btn btn-primary">Sačuvaj</button>
            </div>
        </div>
    </div>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Modal</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    $(document).ready(function(){
        $("#myModal").modal('show');
    });
</script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div id="myModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Potvrda</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <p>Želite li da sačuvate dokument prije zatvaranja?</p>
                    <p class="text-secondary"><small>Ako ne sačuvate izgubićete promjene!</small></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Odustani</button>
                    <button type="button" class="btn btn-primary">Sačuvaj</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>


Aktiviranje modala putem atributa podataka

Možete aktivirati Bootstrap modal klikom na dugme ili link putem atributa podataka bez pisanja bilo kakvog JavaScript koda. Pogledajte sljedeći primjer da biste vidjeli kako to funkcioniše:

<!-- HTML dugme (to Trigger Modal) -->
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Pokreni Demo Modal</a>
    
<!-- HTML Modal -->
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Potvrda</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <p>Želite li da sačuvate dokument prije zatvaranja?</p>
                <p class="text-secondary"><small>Ako ne sačuvate izgubićete promjene!</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Odustani</button>
                <button type="button" class="btn btn-primary">Sačuvaj</button>
            </div>
        </div>
    </div>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Aktiviranje modala putem atributa podataka</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <!-- HTML dugme (to Trigger Modal) -->
    <a href="#myModal" role="button" class="btn btn-lg btn-primary" data-toggle="modal">Pokreni Demo Modal</a>

    <!-- HTML Modal -->
    <div id="myModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Potvrda</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <p>Želite li da sačuvate dokument prije zatvaranja?</p>
                    <p class="text-secondary"><small>Ako ne sačuvate izgubićete promjene!</small></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Odustani</button>
                    <button type="button" class="btn btn-primary">Sačuvaj</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>


Aktiviranje modala putem JavaScript

Takođe možete aktivirati modalni prozor Bootstrap-a putem JavaScript, samo pozovite modal() metodu Bootstrap-a s modalnim ID-jem ili selektorom klase u svom JavaScript kodu. Pogledajmo primjer:

<script>
$(document).ready(function(){
    $(".btn").click(function(){
        $("#myModal").modal("show");
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Modals sa JavaScript-om</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    $(document).ready(function(){
        $(".btn").click(function(){
            $("#myModal").modal('show');
        });
    });
</script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <!-- HTML dugme (to Trigger Modal) -->
    <button type="button" class="btn btn-lg btn-primary" data-toggle="modal">Pokreni Demo Modal</button>

    <!-- HTML Modal -->
    <div id="myModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Potvrda</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <p>Želite li da sačuvate dokument prije zatvaranja?</p>
                    <p class="text-secondary"><small>Ako ne sačuvate izgubićete promjene!</small></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Odustani</button>
                    <button type="button" class="btn btn-primary">Sačuvaj</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>                            


Promjena veličine modaliteta

Bootstrap vam daje mogućnost daljeg skaliranja modaliteta gore ili dolje. Možete stvoriti male, velike, kao i ekstra velike modele dodavanjem dodatne klase .modal-sm, .modal-lg i .modal-xl, odnosno u .modal-dialog. Pogledajmo primjer:

<!-- Extra veliki modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#extraLargeModal">Extra veliki modal</button>
    
<div id="extraLargeModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Extra veliki Modal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <p>Dodajte klasu<code>.modal-xl</code> u klasu <code>.modal-dialog</code>
                da kreirate extra veliki modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Odustani</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>

<!-- Veliki modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#largeModal">Veliki modal</button>

<div id="largeModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Veliki Modal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <p>Dodaj klasu  <code>.modal-lg</code> u <code>.modal-dialog</code> da kreirate velikimodal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Odustani</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>

<!-- Mali modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#smallModal">Mali modal</button>
<div id="smallModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Mali Modal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <p>Dodaj klasu <code>.modal-sm</code> u klasu <code>.modal-dialog</code> da kreirate mali modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Odustani</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IT TUTORIJALI  | Bootstrap 4 Veliki, Extra veliki i mali modal</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
<!-- Extra veliki modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#extraLargeModal">Extra veliki modal</button>

<div id="extraLargeModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Extra veliki Modal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <p>Dodajte klasu <code>.modal-xl</code> u klasu <code>.modal-dialog</code>
                da kreirate extra veliki modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Odustani</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>

<!-- Veliki modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#largeModal">Veliki modal</button>
    
<div id="largeModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Veliki Modal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <p>Dodaj klasu  <code>.modal-lg</code> u <code>.modal-dialog</code> da kreirate veliki modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Odustani</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>
    
<!-- Mali modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#smallModal">Mali modal</button>
    
<div id="smallModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Mali Modal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <p>Dodaj klasu <code>.modal-sm</code> u klasu <code>.modal-dialog</code> da kreirate mali modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Odustani</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>


Promjena modalnog sadržaja na osnovu tipke okidača

Često nekoliko modalnih stranica ima gotovo isti sadržaj s manjim razlikama. Modalne događaje možete koristiti za stvaranje malo drugačijih modalnih prozora temeljenih na istom modalnom HTML-u. Sljedeći primjer pokazaće vam kako promijeniti naslov modalnog prozora prema vrijednosti atributa data-title dugmeta.

<script>
$(document).ready(function(){
    $("#myModal").on("show.bs.modal", function(event){
        // Uzmi dugme koje je pokrenulo modal
        var button = $(event.relatedTarget);

        // Izdvoji vrijednost iz prilagođenog atributa data-*
        var titleData = button.data("title");
        $(this).find(".modal-title").text(titleData);
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Promjena modalnog sadržaja prema dugmetu okidača u Bootstrapu 4</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
    $("#myModal").on("show.bs.modal", function(event){
        // Uzmi dugme koje je pokrenulo modal
        var button = $(event.relatedTarget);

        // Izdvoji vrijednost iz prilagođenog atributa data-*
        var titleData = button.data("title");
        $(this).find(".modal-title").text(titleData);
    });
});
</script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <!-- Button HTML (Trigger Modal) -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" 
    data-title="Feedback">Feedback</button>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" 
    data-title="Prijavi grešku">Prijavi grešku</button>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" 
    data-title="Kontaktiraj nas">Kontaktiraj nas</button>

    <div id="myModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form>
                    <div class="modal-header">
                        <h5 class="modal-title">Prozor modala</h5>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">                        
                        <div class="form-group">
                            <label class="control-label">Email:</label>
                            <input type="text" class="form-control">
                        </div>
                        <div class="form-group">
                            <label class="control-label">Vaša poruka:</label>
                            <textarea class="form-control"></textarea>
                        </div>                        
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Odustani</button>
                        <button type="button" class="btn btn-primary">Pošalji</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>


Kreiranje vertikalno centriranog modala

Jednostavno dodajte klasu .modal-dialog-centrirano u .modal-dialog element da biste okomito centrirali modal. Ako modal ima dugačak sadržaj, možete dodatno primijeniti klasu .modal-dialog-scrollable na .modal-dialog kako biste modalno tijelo učinili pomičnim. Pogledajmo primjer:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vertikalno poravnanje modalnog središta u Bootstrapu 4</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <!-- HTML dugme (Trigger Modal) -->
    <a href="#modalCenter" role="button" class="btn btn-primary" data-toggle="modal">Vertically Centered Modal</a>
    <!-- HTML  dugme (Trigger Modal) -->
    <a href="#modalScrollableCenter" role="button" class="btn btn-primary" data-toggle="modal">
    Vertikalno centriran modal koji se može pomicati</a>

    <!-- HTML modal -->
    <div id="modalCenter" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">DEMO</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing
                    elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna
                    metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum
                    id metus ac nisl bibendum scelerisque non non purus. Suspendisse
                    varius nibh non aliquet sagittis. In tincidunt orci sit amet.</p>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Zatvori</button>
                    <button type="button" class="btn btn-primary">OK!</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- HTML pomični modal -->
    <div id="modalScrollableCenter" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">DEMO</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing
                    elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna
                    metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum
                    id metus ac nisl bibendum scelerisque non non purus. Suspendisse
                    varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum
                    vestibulum. Vivamus fermentum in arcu in aliquam. Quisque
                    aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum
                    eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id
                    interdum neque porttitor. Integer faucibus ligula.</p>

                    <p>Quis quam ut magna consequat faucibus. Pellentesque
                    eget nisi a mi suscipit tincidunt. Ut tempus dictum risus.
                    Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. 
                    Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus 
                    auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam
                    vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce
                    quam tortor, commodo ac dui quis, bibendum viverra erat.
                    Maecenas mattis lectus enim, quis tincidunt dui molestie euismod.
                    Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.
                    </p>

                    <p>Orci facilisis, dignissim tortor vitae, ultrices mi. 
                    Vestibulum a iaculis lacus. Phasellus vitae convallis ligula, nec
                    volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit 
                    egestas a. Sed luctus metus id mi gravida, faucibus convallis neque
                    pretium. Maecenas quis sapien ut leo fringilla tempor vitae sit amet
                    leo. Donec imperdiet tempus placerat. Pellentesque pulvinar
                    ultrices nunc sed ultrices. Morbi vel mi pretium, fermentum lacus 
                    et, viverra tellus. Phasellus sodales libero nec dui convallis, sit amet
                    fermentum sapien auctor. Vestibulum ante ipsum primis in faucibus 
                    orci luctus et ultrices posuere cubilia Curae; Sed eu elementum
                    nibh, quis varius libero.</p>

                    <p>Nam eget purus nec est consectetur vehicula. Nullam
                    ultrices nisl risus, in viverra libero egestas sit amet. Etiam porttitor 
                    dolor non eros pulvinar malesuada. Vestibulum sit amet est mollis 
                    nulla tempus aliquet. Praesent luctus hendrerit arcu non laoreet. 
                    Morbi consequat placerat magna, ac ornare odio sagittis sed. Donec
                    vitae ullamcorper purus. Vivamus non metus ac justo porta volutpat.</p>

                    <p>Pulvinar leo id risus pellentesque vestibulum. Sed diam
                    libero, sodales eget sapien vel, porttitor bibendum enim. Donec 
                    sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae
                    metus ipsum. Phasellus sed nunc ac sem malesuada 
                    condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec 
                    pharetra id arcu eget blandit. Proin imperdiet mattis augue in 
                    porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse 
                    tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus 
                    lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl 
                    semper tortor, vel sagittis lacus est consequat eros. Sed id pretium 
                    nisl. Curabitur dolor nisl, laoreet vitae aliquam id.</p>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Zatvori</button>
                    <button type="button" class="btn btn-primary">OK!</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>                            


Korištenje Grid-a unutar modala

Također možete koristiti Bootstrap grid za stvaranje izgleda mreže unutar modala. Jednostavno, koristite .row klasu za stvaranje redova i koristite .col-*, .col-sm-*, .col-md-*, .col-lg-* i .col-xl-* klase za stvaranje redova unutar .modal-body. Pogledajmo primjer:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Korištenje Grid-a unutar modala u Bootstrap-u 4</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    $(document).ready(function(){
        $("#myModal").modal('show');
    });
</script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div id="myModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Pošalji nam poruku</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Ime</label>
                                <input type="text" class="form-control">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Prezime</label>
                                <input type="text" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label>Email</label>
                                <input type="email" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label>Poruka</label>
                                <textarea class="form-control"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Odustani</button>
                    <button type="button" class="btn btn-primary">Pošalji poruku</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>