RenklerTüm RenklerBlueIndigoPurplePinkRedOrangeYellowGreenTealCyanTema RenkleriPrimarySecondarySuccessDangerWarningInfoLightDarkGriler100200300400500600700800900Metin RenkleriGrid Sistemi bootstrap'in temelini oluşturur. Dökümantasyonuna buraya tıklayarak ulaşabilirsiniz. .text-primary.text-secondary.text-success.text-danger.text-warning.text-info.text-light.text-dark.text-body.text-muted.text-white.text-black-50.text-white-50<p class="text-primary">.text-primary</p><p class="text-secondary">.text-secondary</p><p class="text-success">.text-success</p><p class="text-danger">.text-danger</p><p class="text-warning">.text-warning</p><p class="text-info">.text-info</p><p class="text-light bg-dark">.text-light</p><p class="text-dark">.text-dark</p><p class="text-body">.text-body</p><p class="text-muted">.text-muted</p><p class="text-white bg-dark">.text-white</p><p class="text-black-50">.text-black-50</p><p class="text-white-50 bg-dark">.text-white-50</p>
Grid SitemiGrid Sistemi bootstrap'in temelini oluşturur. Dökümantasyonuna buraya tıklayarak ulaşabilirsiniz. Extra small <576px Small ≥576px Medium ≥768px Large ≥992px Extra large ≥1200px Max container widthNone (auto)540px720px960px1140pxClass prefix.col- .col-sm- .col-md- .col-lg- .col-xl- # of columns12Gutter width20px (10px on each side of a column)NestableYesColumn orderingYes
TipografiDökümantasyonuna buraya tıklayarak ulaşabilirsiniz. Başlıkh1. Bootstrap başlıkh2. Bootstrap başlıkh3. Bootstrap başlıkh4. Bootstrap başlıkh5. Bootstrap başlıkh6. Bootstrap başlık<h1>h1. Bootstrap başlık</h1><h2>h2. Bootstrap başlık</h2><h3>h3. Bootstrap başlık</h3><h4>h4. Bootstrap başlık</h4><h5>h5. Bootstrap başlık</h5><h6>h6. Bootstrap başlık</h6> Display BaşlıkDisplay 1Display 2Display 3Display 4<h1 class="display-1">Display 1</h1><h1 class="display-2">Display 2</h1><h1 class="display-3">Display 3</h1><h1 class="display-4">Display 4</h1> Satır İçi Metin ÖğeleriYou can use the mark tag to highlight text. This line of text is meant to be treated as deleted text. This line of text is meant to be treated as no longer accurate. This line of text is meant to be treated as an addition to the document. This line of text will render as underlined This line of text is meant to be treated as fine print. This line rendered as bold text. This line rendered as italicized text. <p>You can use the mark tag to <mark>highlight</mark> text.</p><p><del>This line of text is meant to be treated as deleted text.</del></p><p><s>This line of text is meant to be treated as no longer accurate.</s></p><p><ins>This line of text is meant to be treated as an addition to the document.</ins></p><p><u>This line of text will render as underlined</u></p><p><small>This line of text is meant to be treated as fine print.</small></p><p><strong>This line rendered as bold text.</strong></p><p><em>This line rendered as italicized text.</em></p> Alıntı MetinLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<blockquote class="blockquote"><p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote>
ResimlerDökümantasyonuna buraya tıklayarak ulaşabilirsiniz. Responsive Resimler<img src="/elements/images/main-photo-no-image.png" alt="Responsive Resim" class="img-fluid" /> Küçük Resimler<img src="/elements/images/main-photo-no-image_300w.png" alt="Küçük Resim" class="img-thumbnail" /> Resim Hizalama<img src="/elements/images/main-photo-no-image_300w.png" alt="Resim Hizalama" class="float-left" /><img src="/elements/images/main-photo-no-image_300w.png" alt="Resim Hizalama" class="float-right" /> <img src="/elements/images/main-photo-no-image_300w.png" alt="Resim Hizalama" class="mx-auto d-block" /> <div class="text-center"><img src="/elements/images/main-photo-no-image_300w.png" alt="Resim Hizalama" /></div> Picture Tag'ı<picture><source media="(max-width:576px)" srcset="/elements/images/beykent-universitesi-slider-2_576w.jpg" type="image/svg+xml" /><source media="(max-width:992px)" srcset="/elements/images/beykent-universitesi-slider-2_992w.jpg" type="image/svg+xml" /><img src="/elements/images/beykent-universitesi-slider-2.jpg" width="1920" height="700" alt="Picture Kullanımı" class="img-fluid" /></picture>
TablolarDökümantasyonuna buraya tıklayarak ulaşabilirsiniz. #FirstLastHandle1MarkOttomdo2JacobThorntonfat3Larrythe Birdtwitter<table class="table"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>twitter</td></tr></tbody></table> #FirstLastHandle1MarkOttomdo2JacobThorntonfat3Larrythe Birdtwitter<table class="table table-striped"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>twitter</td></tr></tbody></table> #FirstLastHandle1MarkOttomdo2JacobThorntonfat3Larry the Birdtwitter<table class="table table-bordered"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>twitter</td></tr></tbody></table>
Figure Tag'ıDökümantasyonuna buraya tıklayarak ulaşabilirsiniz. A caption for the above image.<figure class="figure"><img src="/elements/images/main-photo-no-image.png" alt="Figure" class="figure-img img-fluid rounded" /><figcaption class="figure-caption">A caption for the above image.</figcaption></figure> A caption for the above image.<figure class="figure"><img src="/elements/images/main-photo-no-image.png" alt="Figure" class="figure-img img-fluid rounded" /><figcaption class="figure-caption text-right">A caption for the above image.</figcaption></figure>
Uyarı AlanlarıDökümantasyonuna buraya tıklayarak ulaşabilirsiniz. AlarmA simple primary alert—check it out! A simple secondary alert—check it out! A simple success alert—check it out! A simple danger alert—check it out! A simple warning alert—check it out! A simple info alert—check it out! A simple light alert—check it out! A simple dark alert—check it out! <div class="alert alert-primary" role="alert">A simple primary alert—check it out!</div><div class="alert alert-secondary" role="alert">A simple secondary alert—check it out!</div><div class="alert alert-success" role="alert">A simple success alert—check it out!</div><div class="alert alert-danger" role="alert">A simple danger alert—check it out!</div><div class="alert alert-warning" role="alert">A simple warning alert—check it out!</div><div class="alert alert-info" role="alert">A simple info alert—check it out!</div><div class="alert alert-light" role="alert">A simple light alert—check it out!</div><div class="alert alert-dark" role="alert">A simple dark alert—check it out!</div> Dikkat Çekici AlanlarWell done!Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.Whenever you need to, be sure to use margin utilities to keep things nice and tidy.<div class="alert alert-success" role="alert"><h4 class="alert-heading">Well done!</h4><p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p><hr><p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div>
DüğmelerDökümantasyonuna buraya tıklayarak ulaşabilirsiniz. PrimarySecondarySuccessDangerWarningInfoLightDarkLink<button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button><button type="button" class="btn btn-success">Success</button><button type="button" class="btn btn-danger">Danger</button><button type="button" class="btn btn-warning">Warning</button><button type="button" class="btn btn-info">Info</button><button type="button" class="btn btn-light">Light</button><button type="button" class="btn btn-dark">Dark</button><button type="button" class="btn btn-link">Link</button> Düğme ÇeşitleriLink Button<a class="btn btn-primary" href="#" role="button">Link</a><button class="btn btn-primary" type="submit">Button</button><input class="btn btn-primary" type="button" value="Input"><input class="btn btn-primary" type="submit" value="Submit"><input class="btn btn-primary" type="reset" value="Reset"> Çerçeve DüğmelerPrimarySecondarySuccessDangerWarningInfoLightDark<button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button><button type="button" class="btn btn-outline-success">Success</button><button type="button" class="btn btn-outline-danger">Danger</button><button type="button" class="btn btn-outline-warning">Warning</button><button type="button" class="btn btn-outline-info">Info</button><button type="button" class="btn btn-outline-light">Light</button><button type="button" class="btn btn-outline-dark">Dark</button>
Kart ModülüDökümantasyonuna buraya tıklayarak ulaşabilirsiniz. Card titleSome quick example text to build on the card title and make up the bulk of the card's content.<div class="alert alert-success" role="alert"><h4 class="alert-heading">Well done!</h4><p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p><hr><p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div> Card titleCard subtitleSome quick example text to build on the card title and make up the bulk of the card's content.Card link Another link <div class="card" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Card title</h5><h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="#" class="card-link">Card link</a><a href="#" class="card-link">Another link</a></div></div> Card titleSome quick example text to build on the card title and make up the bulk of the card's content.Cras justo odioDapibus ac facilisis inVestibulum at erosCard link Another link <div class="card" style="width: 18rem;"> <img src="/elements/images/main-photo-no-image_300w.png" alt="Kart Modülü" class="card-img-top" /><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div><ul class="list-group list-group-flush"><li class="list-group-item">Cras justo odio</li><li class="list-group-item">Dapibus ac facilisis in</li><li class="list-group-item">Vestibulum at eros</li></ul><div class="card-body"> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div></div> Featured Special title treatmentWith supporting text below as a natural lead-in to additional content.Go somewhere <div class="card"><div class="card-header"> Featured </div><div class="card-body"><h5 class="card-title">Special title treatment</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary">Go somewhere</a> </div></div> Quote Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<div class="card"><div class="card-header"> Quote </div><div class="card-body"><blockquote class="blockquote mb-0"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote></div></div> Featured Special title treatmentWith supporting text below as a natural lead-in to additional content.Go somewhere <div class="card text-center"><div class="card-header"> Featured </div><div class="card-body"><h5 class="card-title">Special title treatment</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary">Go somewhere</a> </div><div class="card-footer text-muted"> 2 days ago </div></div> Metin HizalamaSpecial title treatmentWith supporting text below as a natural lead-in to additional content.Go somewhere Special title treatmentWith supporting text below as a natural lead-in to additional content.Go somewhere Special title treatmentWith supporting text below as a natural lead-in to additional content.Go somewhere <div class="card" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Special title treatment</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary">Go somewhere</a> </div></div><div class="card text-center" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Special title treatment</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary">Go somewhere</a> </div></div><div class="card text-right" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Special title treatment</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary">Go somewhere</a> </div></div> Card titleThis is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.Last updated 3 mins ago Card titleThis is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.Last updated 3 mins ago <div class="card"> <img src="/elements/images/main-photo-no-image.png" alt="Kart" class="card-img-top" /><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p><p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p></div></div><div class="card"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p><p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p></div><img src="/elements/images/main-photo-no-image.png" alt="Kart" class="card-img-top" /></div> Resim Üstü MetinCard titleThis is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.Last updated 3 mins ago<div class="card bg-dark text-white"> <img src="/elements/images/main-photo-no-image.png" alt="Kart" class="card-img-top" /><div class="card-img-overlay"><h5 class="card-title">Card title</h5><p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p><p class="card-text">Last updated 3 mins ago</p></div></div> Kart GurupCard titleThis is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.Last updated 3 mins ago Card titleThis card has supporting text below as a natural lead-in to additional content.Last updated 3 mins ago Card titleThis is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.Last updated 3 mins ago <div class="card-group"><div class="card"> <img src="/elements/images/main-photo-no-image_300w.png" alt="Kart Gurup" class="card-img-top" /><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p><p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p></div></div><div class="card"> <img src="/elements/images/main-photo-no-image_300w.png" alt="Kart Gurup" class="card-img-top" /><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p><p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p></div></div><div class="card"> <img src="/elements/images/main-photo-no-image_300w.png" alt="Kart Gurup" class="card-img-top" /><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p><p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p></div></div></div> Kart DestesiCard titleThis is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.Last updated 3 mins ago Card titleThis card has supporting text below as a natural lead-in to additional content.Last updated 3 mins ago Card titleThis is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.Last updated 3 mins ago <div class="card-deck"><div class="card"> <img src="/elements/images/main-photo-no-image_300w.png" alt="Kart Destesi" class="card-img-top" /><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p><p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p></div></div><div class="card"> <img src="/elements/images/main-photo-no-image_300w.png" alt="Kart Destesi" class="card-img-top" /><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p><p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p></div></div><div class="card"> <img src="/elements/images/main-photo-no-image_300w.png" alt="Kart Destesi" class="card-img-top" /><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p><p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p></div></div></div> Kart MasonryCard title that wraps to a new lineThis is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.Card titleThis card has supporting text below as a natural lead-in to additional content.Last updated 3 mins ago Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.Card titleThis card has a regular title and short paragraphy of text below it.Last updated 3 mins ago Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.Card titleThis is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.Last updated 3 mins ago <div class="card-columns"><div class="card"> <img src="/elements/images/main-photo-no-image_300w.png" alt="Kart Masonry" class="card-img-top" /><div class="card-body"><h5 class="card-title">Card title that wraps to a new line</h5><p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p></div></div><div class="card p-3"><blockquote class="blockquote mb-0 card-body"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footer class="blockquote-footer"> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer></blockquote></div><div class="card"> <img src="/elements/images/main-photo-no-image_300w.png" alt="Kart Masonry" class="card-img-top" /><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p><p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p></div></div><div class="card bg-primary text-white text-center p-3"><blockquote class="blockquote mb-0"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p><footer class="blockquote-footer text-white"> <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer></blockquote></div><div class="card text-center"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">This card has a regular title and short paragraphy of text below it.</p><p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p></div></div><div class="card"> <img src="/elements/images/main-photo-no-image_300w.png" alt="Kart Masonry" class="card-img-top" /> </div><div class="card p-3 text-right"><blockquote class="blockquote mb-0"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footer class="blockquote-footer"> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer></blockquote></div><div class="card"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p><p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p></div></div></div>
SliderDökümantasyonuna buraya tıklayarak ulaşabilirsiniz. First slide labelNulla vitae elit libero, a pharetra augue mollis interdum.Second slide labelLorem ipsum dolor sit amet, consectetur adipiscing elit.Third slide labelPraesent commodo cursus magna, vel scelerisque nisl consectetur.Previous Next <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li><li data-target="#carouselExampleIndicators" data-slide-to="1"></li><li data-target="#carouselExampleIndicators" data-slide-to="2"></li></ol><div class="carousel-inner"><div class="carousel-item active"> <img src="/elements/images/main-photo-no-image.png" alt="Slider" class="d-block w-100" /><div class="carousel-caption d-none d-md-block"><h5>First slide label</h5><p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p></div></div><div class="carousel-item"> <img src="/elements/images/main-photo-no-image.png" alt="Slider" class="d-block w-100" /><div class="carousel-caption d-none d-md-block"><h5>Second slide label</h5><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div><div class="carousel-item"> <img src="/elements/images/main-photo-no-image.png" alt="Slider" class="d-block w-100" /><div class="carousel-caption d-none d-md-block"><h5>Third slide label</h5><p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p></div></div></div><a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
Açılan Alanlar/MenüDökümantasyonuna buraya tıklayarak ulaşabilirsiniz. Link with href Button with data-target Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. <p><a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Link with href</a><button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Button with data-target</button></p><div class="collapse" id="collapseExample"><div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div></div> AkordiyonCollapsible Group Item #1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. Collapsible Group Item #2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. Collapsible Group Item #3 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. <div class="accordion" id="accordionExample"><div class="card"><div class="card-header" id="headingOne"><h2 class="mb-0"><button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </button></h2></div><div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"><div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div></div></div><div class="card"><div class="card-header" id="headingTwo"><h2 class="mb-0"><button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </button></h2></div><div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"><div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div></div></div><div class="card"><div class="card-header" id="headingThree"><h2 class="mb-0"><button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </button></h2></div><div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"><div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div></div></div></div>
JumbotronDökümantasyonuna buraya tıklayarak ulaşabilirsiniz. Hello, world!This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.It uses utility classes for typography and spacing to space content out within the larger container.Learn more <div class="jumbotron"><h1 class="display-4">Hello, world!</h1><p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p><hr class="my-4"><p>It uses utility classes for typography and spacing to space content out within the larger container.</p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></div> Fluid jumbotronThis is a modified jumbotron that occupies the entire horizontal space of its parent.<div class="jumbotron jumbotron-fluid"><div class="container"><h1 class="display-4">Fluid jumbotron</h1><p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p></div></div>
Liste GurupDökümantasyonuna buraya tıklayarak ulaşabilirsiniz. Cras justo odioDapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros<ul class="list-group"><li class="list-group-item">Cras justo odio</li><li class="list-group-item">Dapibus ac facilisis in</li><li class="list-group-item">Morbi leo risus</li><li class="list-group-item">Porta ac consectetur ac</li><li class="list-group-item">Vestibulum at eros</li></ul> Linkler ve ButonlarCras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros <div class="list-group"><a href="#" class="list-group-item list-group-item-action active">Cras justo odio</a><a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a><a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a><a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a><a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a></div> Rozetli ListeCras justo odio 14 Dapibus ac facilisis in 2 Morbi leo risus 1 <ul class="list-group"><li class="list-group-item d-flex justify-content-between align-items-center">Cras justo odio<span class="badge badge-primary badge-pill">14</span></li><li class="list-group-item d-flex justify-content-between align-items-center">Dapibus ac facilisis in<span class="badge badge-primary badge-pill">2</span></li><li class="list-group-item d-flex justify-content-between align-items-center">Morbi leo risus<span class="badge badge-primary badge-pill">1</span></li></ul> İçerikle List group item heading3 days ago Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta. List group item heading3 days ago Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta. List group item heading3 days ago Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta. <div class="list-group"><a href="#" class="list-group-item list-group-item-action active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">List group item heading</h5><small>3 days ago</small></div><p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p><small>Donec id elit non mi porta.</small></a><a href="#" class="list-group-item list-group-item-action"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">List group item heading</h5><small class="text-muted">3 days ago</small></div><p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p><small class="text-muted">Donec id elit non mi porta.</small></a><a href="#" class="list-group-item list-group-item-action"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">List group item heading</h5><small class="text-muted">3 days ago</small></div><p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p><small class="text-muted">Donec id elit non mi porta.</small></a></div>
Media NesnesiDökümantasyonuna buraya tıklayarak ulaşabilirsiniz. Media headingCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. <div class="jumbotron"><h1 class="display-4">Hello, world!</h1><p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p><hr class="my-4"><p>It uses utility classes for typography and spacing to space content out within the larger container.</p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></div>
TablarDökümantasyonuna buraya tıklayarak ulaşabilirsiniz. Home Profile Contact İçerik 1İçerik 2İçerik 3<ul class="nav nav-tabs" id="myTab" role="tablist"><li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li><li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li><li class="nav-item"> <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> </li></ul><div class="tab-content" id="myTabContent"><div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">İçerik 1</div><div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">İçerik 2</div><div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">İçerik 3</div></div>
Gömülü (Embed) NesnelerDökümantasyonuna buraya tıklayarak ulaşabilirsiniz. <div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe></div> Oranlar<!-- 21:9 aspect ratio --><div class="embed-responsive embed-responsive-21by9"><iframe class="embed-responsive-item" src="..."></iframe></div><!-- 16:9 aspect ratio --><div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="..."></iframe></div><!-- 4:3 aspect ratio --><div class="embed-responsive embed-responsive-4by3"><iframe class="embed-responsive-item" src="..."></iframe></div><!-- 1:1 aspect ratio --><div class="embed-responsive embed-responsive-1by1"><iframe class="embed-responsive-item" src="..."></iframe></div>
GölgelerDökümantasyonuna buraya tıklayarak ulaşabilirsiniz. No shadowSmall shadowRegular shadowLarger shadow<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div><div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div><div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div><div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>