Bootstrap - Jumbotron


Prikazivanje sadržaja sa Jumbotron-om

Bootstrap komponenta jumbotron pruža izvrstan način za prikazivanje ključnog sadržaja ili informacija na web stranici. Samo umotajte svoj istaknuti sadržaj poput naslova, opisa itd. u element <div> i na njega primijenite klasu .jumbotron.

<div class="jumbotron">
    <h1>Nauči kako da kreiraš Website</h1>
    <p class="lead">U današnjem svijetu Internet je najpopularniji način 
    povezivanja s ljudima. Na stranici <a href="https://www.ittutorijali.net" target="_blank"> ittutorijali.net </a> 
    naučićete tehnologija za web razvoja zajedno sa primjerima iz stvarne 
    prakse, tako da možete stvarati voju web stranicu za povezivanje sa ljudima širom svijeta.</p>

    <p><a href="https://www.ittutorijali.net" target="_blank" class="btn btn-primary btn-lg">
    Kreni još danas s učenjem!</a></p>
</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 Jumbotron</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">    
    <div class="jumbotron">
        <h1>Nauči kako da kreiraš Website</h1>
        <p class="lead">U današnjem svijetu Internet je najpopularniji način 
        povezivanja s ljudima. Na stranici <a href="https://www.ittutorijali.net" target="_blank"> ittutorijali.net </a> 
        naučićete tehnologija za web razvoja zajedno sa primjerima iz stvarne 
        prakse, tako da možete stvarati voju web stranicu za povezivanje sa ljudima širom svijeta.</p>

        <p><a href="https://www.ittutorijali.net" target="_blank" class="btn btn-primary btn-lg">
        Kreni još danas s učenjem!</a></p>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Nauči kako da kreiraš Website

U današnjem svijetu Internet je najpopularniji način povezivanja s ljudima. Na stranici ittutorijali.net naučićete tehnologija za web razvoja zajedno sa primjerima iz stvarne prakse, tako da možete stvarati voju web stranicu za povezivanje sa ljudima širom svijeta.

Kreni još danas s učenjem!



Kreiranja Jumbotrona pune širine stranice

Da biste kreirali jumbotron bez zaobljenih uglova i koji pokriva cijelu širinu okvira za prikaz, postavite ga izvan svih kontejnera, dodajte na njega klasu modifikatora .jumbotron-fluid i dodajte u njega .container ili .container-fluid, kao što je prikazano u slijedećem primjeru:

<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1>Nauči kako da kreiraš Websites</h1>
        <p class="lead">U današnjem svijetu internet je najpopularniji način povezivanja s ljudima...</p>
        <p><a href="https://www.ittutorijali.net" class="btn btn-primary btn-lg">Kreni još danas s učenjem!</a></p>
    </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 Kreiranja Jumbotrona pune širine stranice</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">    
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1>Nauči kako da kreiraš Websites</h1>
            <p class="lead">U današnjem svijetu Internet je najpopularniji način 
            povezivanja s ljudima. Na stranici <a href="https://www.ittutorijali.net" target="_blank"> ittutorijali.net </a> 
            naučićete tehnologija za web razvoja zajedno sa primjerima iz stvarne 
            prakse, tako da možete stvarati voju web stranicu za povezivanje sa ljudima širom svijeta.</p>

            <p><a href="https://www.ittutorijali.net" target="_blank" class="btn btn-primary btn-lg">
            Kreni još danas s učenjem!</a></p>
        </div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Nauči kako da kreiraš Websites

U današnjem svijetu Internet je najpopularniji način povezivanja s ljudima. Na stranici ittutorijali.net naučićete tehnologija za web razvoja zajedno sa primjerima iz stvarne prakse, tako da možete stvarati voju web stranicu za povezivanje sa ljudima širom svijeta.

Kreni još danas s učenjem!