<p>Lorem ipsum dolor sit amet.</p> <!-- .lead: font-size: 1.25rem;, font-weight: 300; --> <pclass="lead">Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p>
<dlclass="row"> <!-- dt: font-weight: 700; --> <dtclass="col-sm-3">Description lists</dt> <!-- dd: margin-bottom: 0.5rem; , margin-left: 0; --> <ddclass="col-sm-9">A description list is perfect for defining terms.</dd>
<dtclass="col-sm-3">Term</dt> <ddclass="col-sm-9"> <p>Definition for the term.</p> <p>And some more placeholder definition text.</p> </dd>
<dtclass="col-sm-3">Another term</dt> <ddclass="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
<dtclass="col-sm-3 text-truncate">Truncated term is truncated</dt> <ddclass="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
<dtclass="col-sm-3">Nesting</dt> <ddclass="col-sm-9"> <!-- dl, ol, ul : margin-top: 0; , margin-bottom: 1rem; --> <dlclass="row"> <dtclass="col-sm-4">Nested definition list</dt> <ddclass="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd> </dl> </dd> </dl>
<p>Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p> <!-- .text-justify: text-align: justify!important; --> <pclass="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
<!-- .text-left : text-align: left!important; --> <pclass="text-left">Left aligned text on all viewport sizes.</p> <pclass="text-center">Center aligned text on all viewport sizes.</p> <pclass="text-right">Right aligned text on all viewport sizes.</p>
<!-- .text-wrap: white-space: normal!important; (空白換行) --> <divclass="badge badge-primary text-wrap"style="width: 6rem;"> This text should wrap. </div>
<!-- .text-nowrap: white-space: nowrap!important; (不換行) --> <divclass="text-nowrap bd-highlight"style="width: 8rem;"> This text should overflow the parent. Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit deserunt necessitatibus itaque veniam! Nam, officia vero. Fugit eos natus numquam ipsa? Voluptas voluptate natus doloribus molestiae quod perspiciatis provident ipsa. </div>
<!-- Block level --> <divclass="row"> <!-- .text-truncate : overflow: hidden; text-overflow: ellipsis; (over show ...省略符號) white-space: nowrap; --> <divclass="col-2 text-truncate"> Praeterea iter est quasdam res quas ex communi. </div> </div>
<!-- Inline level --> <!-- .d-inline-block: display: inline-block!important; --> <spanclass="d-inline-block text-truncate"style="max-width: 150px;"> Praeterea iter est quasdam res quas ex communi. </span>
t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element
size:
0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25(4px)
2 - (by default) for classes that set the margin or padding to $spacer * .5(8px)
3 - (by default) for classes that set the margin or padding to $spacer(16px)
4 - (by default) for classes that set the margin or padding to $spacer * 1.5(24px)
5 - (by default) for classes that set the margin or padding to $spacer * 3(48px)
auto - for classes that set the margin to auto
Negative margin(padding not support) :
n1 - (by default) for classes that set the margin to -$spacer * .25(4px)
n2 - (by default) for classes that set the margin to -$spacer * .5(8px)
n3 - (by default) for classes that set the margin to -$spacer(16px)
n4 - (by default) for classes that set the margin to -$spacer * 1.5(24px)
n5 - (by default) for classes that set the margin to -$spacer * 3(48px)
Margin
1 2 3 4 5 6 7 8
<div class="mb-0 bg-primary text-white">mb-0 Lorem ipsum dolor sit amet consectetur</div> <div class="mb-1 bg-secondary text-white">mb-1 Lorem ipsum dolor sit amet consectetur</div> <div class="mb-2 bg-success text-white">mb-2 Lorem ipsum dolor sit amet consectetur</div> <div class="mb-3 bg-danger text-white">mb-3 Lorem ipsum dolor sit amet consectetu</div> <div class="mb-4 bg-warning text-dark">mb-4 Lorem ipsum dolor sit amet consectetu</div> <div class="mb-5 bg-info text-white">mb-5 Lorem ipsum dolor sit amet consectetu</div> <div class="mx-auto text-white bg-dark" style="width: 300px;">mx-auto(width: 300px;) Lorem ipsum dolor sit amet consectetu</div> <div class="ml-n3 bg-primary text-white">ml-n3 Lorem ipsum dolor sit amet consectetur</div>
Padding
1 2 3 4 5 6
<div class="p-0 bg-primary text-white">p-0 Lorem ipsum dolor sit amet consectetur</div> <div class="p-1 bg-secondary text-white">p-1 Lorem ipsum dolor sit amet consectetur</div> <div class="p-2 bg-success text-white">p-2 Lorem ipsum dolor sit amet consectetur</div> <div class="p-3 bg-danger text-white">p-3 Lorem ipsum dolor sit amet consectetu</div> <div class="p-4 bg-warning text-dark">p-4 Lorem ipsum dolor sit amet consectetu</div> <div class="p-5 bg-info text-white">p-5 Lorem ipsum dolor sit amet consectetu</div>
<divclass="input-group mb-3"> <divclass="input-group-prepend"> <divclass="input-group-text"> <inputtype="checkbox"aria-label="Checkbox for following text input"> </div> </div> <inputtype="text"class="form-control"aria-label="Text input with checkbox"> </div>
<divclass="input-group mb-3"> <divclass="input-group-prepend"> <divclass="input-group-text"> <inputtype="radio"aria-label="Radio button for following text input"> </div> </div> <inputtype="text"class="form-control"aria-label="Text input with radio button"> </div>
<formclass="needs-validation"novalidate> <divclass="form-row"> <divclass="col-md-6 mb-3"> <labelfor="validationCustom01">First name</label> <inputtype="text"class="form-control"id="validationCustom01"value="Mark"required> <divclass="valid-feedback"> Looks good! </div> </div> <divclass="col-md-6 mb-3"> <labelfor="validationCustom02">Last name</label> <inputtype="text"class="form-control"id="validationCustom02"value="Otto"required> <divclass="valid-feedback"> Looks good! </div> </div> </div> <divclass="form-row"> <divclass="col-md-6 mb-3"> <labelfor="validationCustom03">City</label> <inputtype="text"class="form-control"id="validationCustom03"required> <divclass="invalid-feedback"> Please provide a valid city. </div> </div> <divclass="col-md-3 mb-3"> <labelfor="validationCustom04">State</label> <selectclass="custom-select"id="validationCustom04"required> <optionselecteddisabledvalue="">Choose...</option> <option>...</option> </select> <divclass="invalid-feedback"> Please select a valid state. </div> </div> <divclass="col-md-3 mb-3"> <labelfor="validationCustom05">Zip</label> <inputtype="text"class="form-control"id="validationCustom05"required> <divclass="invalid-feedback"> Please provide a valid zip. </div> </div> </div> <divclass="form-group"> <divclass="form-check"> <inputclass="form-check-input"type="checkbox"value=""id="invalidCheck"required> <labelclass="form-check-label"for="invalidCheck"> Agree to terms and conditions </label> <divclass="invalid-feedback"> You must agree before submitting. </div> </div> </div> <buttonclass="btn btn-primary"type="submit">Submit form</button> </form>
<script> // Example starter JavaScript for disabling form submissions if there are invalid fields (function() { 'use strict'; window.addEventListener('load', function() { // Fetch all the forms we want to apply custom Bootstrap validation styles to var forms = document.getElementsByClassName('needs-validation'); // Loop over them and prevent submission var validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }); }, false); })(); </script>
<divclass="card bg-dark text-white"> <imgsrc="https://via.placeholder.com/600x300"class="card-img"> <!-- .card-img-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 1.25rem; border-radius: calc(0.25rem - 1px); } --> <divclass="card-img-overlay"> <h5class="card-title">Card title</h5> <pclass="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> <pclass="card-text">Last updated 3 mins ago</p> </div> </div>
Horizontal
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<divclass="card mb-3"style="max-width: 540px;"> <divclass="row no-gutters"> <divclass="col-md-4"> <imgclass="img-fluid"src="https://via.placeholder.com/200x300"> </div> <divclass="col-md-8"> <divclass="card-body"> <h5class="card-title">Card title</h5> <pclass="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> <pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div>
<divclass="card text-white bg-primary mb-3"style="max-width: 18rem;"> <!-- .card-header { padding: 0.75rem 1.25rem; margin-bottom: 0; background-color: rgba(0,0,0,.03); border-bottom: 1px solid rgba(0,0,0,.125); } --> <divclass="card-header">Header</div> <divclass="card-body"> <h5class="card-title">Primary card title</h5> <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <divclass="card text-white bg-secondary mb-3"style="max-width: 18rem;"> <divclass="card-header">Header</div> <divclass="card-body"> <h5class="card-title">Secondary card title</h5> <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <divclass="card text-white bg-success mb-3"style="max-width: 18rem;"> <divclass="card-header">Header</div> <divclass="card-body"> <h5class="card-title">Success card title</h5> <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div>
<divclass="card border-primary mb-3"style="max-width: 18rem;"> <divclass="card-header">Header</div> <divclass="card-body text-primary"> <h5class="card-title">Primary card title</h5> <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <divclass="card border-secondary mb-3"style="max-width: 18rem;"> <divclass="card-header">Header</div> <divclass="card-body text-secondary"> <h5class="card-title">Secondary card title</h5> <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <divclass="card border-success mb-3"style="max-width: 18rem;"> <divclass="card-header">Header</div> <divclass="card-body text-success"> <h5class="card-title">Success card title</h5> <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div>
<!-- .card-group { display: flex; flex-flow: row wrap; } --> <divclass="card-group"> <!-- @media (min-width: 576px) .card-group>.card { flex: 1 0 0%; margin-bottom: 0; } --> <!-- .card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0,0,0,.125); border-radius: 0.25rem; } --> <divclass="card"> <imgsrc="https://via.placeholder.com/200"class="card-img-top"alt="..."> <divclass="card-body"> <h5class="card-title">Card title</h5> <pclass="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> </div> <divclass="card-footer"> <smallclass="text-muted">Last updated 3 mins ago</small> </div> </div> <divclass="card"> <imgsrc="https://via.placeholder.com/200"class="card-img-top"alt="..."> <divclass="card-body"> <h5class="card-title">Card title</h5> <pclass="card-text">This card has supporting text below as a natural lead-in to additional content.</p> </div> <divclass="card-footer"> <smallclass="text-muted">Last updated 3 mins ago</small> </div> </div> <divclass="card"> <imgsrc="https://via.placeholder.com/200"class="card-img-top"alt="..."> <divclass="card-body"> <h5class="card-title">Card title</h5> <pclass="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> </div> <divclass="card-footer"> <smallclass="text-muted">Last updated 3 mins ago</small> </div> </div> </div>
<!-- @media (min-width: 576px) .card-deck { display: flex; flex-flow: row wrap; margin-right: -15px; margin-left: -15px; } --> <divclass="card-deck"> <!-- @media (min-width: 576px) .card-deck .card { -ms-flex: 1 0 0%; flex: 1 0 0%; margin-right: 15px; margin-bottom: 0; margin-left: 15px; } --> <divclass="card"> <imgsrc="https://via.placeholder.com/200"class="card-img-top"alt="..."> <divclass="card-body"> <h5class="card-title">Card title</h5> <pclass="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> </div> <divclass="card-footer"> <smallclass="text-muted">Last updated 3 mins ago</small> </div> </div> <divclass="card"> <imgsrc="https://via.placeholder.com/200"class="card-img-top"alt="..."> <divclass="card-body"> <h5class="card-title">Card title</h5> <pclass="card-text">This card has supporting text below as a natural lead-in to additional content.</p> </div> <divclass="card-footer"> <smallclass="text-muted">Last updated 3 mins ago</small> </div> </div> <divclass="card"> <imgsrc="https://via.placeholder.com/200"class="card-img-top"alt="..."> <divclass="card-body"> <h5class="card-title">Card title</h5> <pclass="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> </div> <divclass="card-footer"> <smallclass="text-muted">Last updated 3 mins ago</small> </div> </div> </div>
<divclass="row row-cols-1 row-cols-md-3"> <!-- @media (min-width: 768px) .row-cols-md-3>* { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } --> <divclass="col mb-4"> <!-- .h-100: height: 100%!important; --> <divclass="card h-100"> <imgsrc="https://via.placeholder.com/200"class="card-img-top"alt="..."> <divclass="card-body"> <h5class="card-title">Card title</h5> <pclass="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> <divclass="col mb-4"> <divclass="card h-100"> <imgsrc="https://via.placeholder.com/200"class="card-img-top"alt="..."> <divclass="card-body"> <h5class="card-title">Card title</h5> <pclass="card-text">This is a short card.</p> </div> </div> </div> <divclass="col mb-4"> <divclass="card h-100"> <imgsrc="https://via.placeholder.com/200"class="card-img-top"alt="..."> <divclass="card-body"> <h5class="card-title">Card title</h5> <pclass="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> <divclass="col mb-4"> <divclass="card h-100"> <imgsrc="https://via.placeholder.com/200"class="card-img-top"alt="..."> <divclass="card-body"> <h5class="card-title">Card title</h5> <pclass="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> </div>
<!-- @media (min-width: 576px) .card-columns { column-count: 3; column-gap: 1.25rem; orphans: 1; widows: 1; } --> <divclass="card-columns"> <divclass="card"> <imgsrc="https://via.placeholder.com/200"class="card-img-top"alt="..."> <divclass="card-body"> <h5class="card-title">(1)Card title that wraps to a new line</h5> <pclass="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> <divclass="card p-3"> <blockquoteclass="blockquote mb-0 card-body"> <p>(2)A well-known quote, contained in a blockquote element.</p> <footerclass="blockquote-footer"> <smallclass="text-muted"> Someone famous in <citetitle="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <divclass="card"> <imgsrc="https://via.placeholder.com/200"class="card-img-top"alt="..."> <divclass="card-body"> <h5class="card-title">(3)Card title</h5> <pclass="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p> </div> </div> <divclass="card bg-primary text-white text-center p-3"> <blockquoteclass="blockquote mb-0"> <p>(4)A well-known quote, contained in a blockquote element.</p> <footerclass="blockquote-footer text-white"> <small> Someone famous in <citetitle="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <divclass="card text-center"> <divclass="card-body"> <h5class="card-title">(5)Card title</h5> <pclass="card-text">This card has a regular title and short paragraphy of text below it.</p> <pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p> </div> </div> <divclass="card"> <imgsrc="https://via.placeholder.com/200"class="card-img"alt="..."> </div> <divclass="card p-3 text-right"> <blockquoteclass="blockquote mb-0"> <p>(6)A well-known quote, contained in a blockquote element.</p> <footerclass="blockquote-footer"> <smallclass="text-muted"> Someone famous in <citetitle="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <divclass="card"> <divclass="card-body"> <h5class="card-title">(7)Card title</h5> <pclass="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> <pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div>
<!-- Large button groups (default and split) --> <divclass="btn-group"> <buttonclass="btn btn-secondary btn-lg dropdown-toggle"type="button"data-toggle="dropdown"aria-expanded="false"> Large button </button> <divclass="dropdown-menu"> ... </div> </div>
<!-- Small button groups (default and split) --> <divclass="btn-group"> <buttonclass="btn btn-secondary btn-sm dropdown-toggle"type="button"data-toggle="dropdown"aria-expanded="false"> Small button </button> <divclass="dropdown-menu"> ... </div> </div>
<divclass="btn-group"> <buttontype="button"class="btn btn-secondary dropdown-toggle"data-toggle="dropdown"aria-expanded="false"> Dropdown </button> <divclass="dropdown-menu p-4 text-muted"style="max-width: 200px;"> <p> Some example text that's free-flowing within the dropdown menu. </p> <pclass="mb-0"> And this is more example text. </p> </div> </div>
<divclass="modal fade"id="exampleModalLong"tabindex="-1"aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <divclass="modal-dialog"> <divclass="modal-content"> <divclass="modal-header"> <h5class="modal-title"id="exampleModalLongTitle">Modal title</h5> <buttontype="button"class="close"data-dismiss="modal"aria-label="Close"> <spanaria-hidden="true">×</span> </button> </div> <divclass="modal-body"> <p>What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.</p> <p>We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.</p> <p>Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground.</p> <p>Just own the night like the 4th of July! I’m gon’ put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I’m gon’ put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.</p> <p>You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.</p> <p>I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by?</p> <p>Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.</p> <p>We'd keep all our promises be us against the world. If you get the chance you better keep her. It's time to bring out the big, big, big, big, big, big balloons. I hope you got a healthy appetite. Don't let the greatness get you down, oh, oh yeah. Yeah, she's footloose and so fancy free. I want the jaw droppin', eye poppin', head turnin', body shockin'. End of the rainbow looking treasure.</p> </div> <divclass="modal-footer"> <buttontype="button"class="btn btn-secondary"data-dismiss="modal">Close</button> <buttontype="button"class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
<buttontype="button"class="btn btn-primary"data-toggle="modal"data-target="#exampleModalScrollable"> Launch demo modal </button> <divclass="modal fade"id="exampleModalScrollable"tabindex="-1"aria-labelledby="exampleModalScrollableTitle" aria-hidden="true"> <!-- @media (min-width: 576px) .modal-dialog-scrollable { max-height: calc(100% - 3.5rem); } @media (min-width: 576px) .modal-dialog { max-width: 500px; margin: 1.75rem auto; } --> <divclass="modal-dialog modal-dialog-scrollable"> <divclass="modal-content"> <divclass="modal-header"> <h5class="modal-title"id="exampleModalScrollableTitle">Modal title</h5> <buttontype="button"class="close"data-dismiss="modal"aria-label="Close"> <spanaria-hidden="true">×</span> </button> </div> <divclass="modal-body"> <p>What follows is just some placeholder text for this modal dialog. You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.</p> <p>I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by?</p> <p>Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.</p> <p>We'd keep all our promises be us against the world. In another life I would be your girl. We can dance, until we die, you and I, will be young forever. And on my 18th Birthday we got matching tattoos. So open up your heart and just let it begin. 'Cause she's the muse and the artist. She eats your heart out. Like Jeffrey Dahmer (woo). Pop your confetti. (This is how we do) I know one spark will shock the world, yeah yeah. If you only knew what the future holds.</p> <p>Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.</p> <p>We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.</p> <p>Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground.</p> <p>Just own the night like the 4th of July! I’m gon’ put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I’m gon’ put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.</p> </div> <divclass="modal-footer"> <buttontype="button"class="btn btn-secondary"data-dismiss="modal">Close</button> <buttontype="button"class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
Vertically centered
Add .modal-dialog-centered to .modal-dialog to vertically center the modal at view
<buttontype="button"class="btn btn-primary"data-toggle="modal"data-target="#exampleModalCenter"> Vertically centered modal </button> <buttontype="button"class="btn btn-primary"data-toggle="modal"data-target="#exampleModalCenteredScrollable"> Vertically centered scrollable modal </button> <divclass="modal fade"id="exampleModalCenter"tabindex="-1"aria-labelledby="exampleModalCenterTitle"aria-hidden="true"> <!-- .modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 1rem); } --> <divclass="modal-dialog modal-dialog-centered"> <divclass="modal-content"> <divclass="modal-header"> <h5class="modal-title"id="exampleModalCenterTitle">Modal title</h5> <buttontype="button"class="close"data-dismiss="modal"aria-label="Close"> <spanaria-hidden="true">×</span> </button> </div> <divclass="modal-body"> <p>Placeholder text for this demonstration of a vertically centered modal dialog.</p> </div> <divclass="modal-footer"> <buttontype="button"class="btn btn-secondary"data-dismiss="modal">Close</button> <buttontype="button"class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <divclass="modal fade"id="exampleModalCenteredScrollable"tabindex="-1"aria-labelledby="exampleModalCenteredScrollableTitle"aria-hidden="true"> <divclass="modal-dialog modal-dialog-centered modal-dialog-scrollable"> <divclass="modal-content"> <divclass="modal-header"> <h5class="modal-title"id="exampleModalCenteredScrollableTitle">Modal title</h5> <buttontype="button"class="close"data-dismiss="modal"aria-label="Close"> <spanaria-hidden="true">×</span> </button> </div> <divclass="modal-body"> <p>Placeholder text for this demonstration of a vertically centered modal dialog.</p> <p>In this case, the dialog has a bit more content, just to show how vertical centering can be added to a scrollable modal.</p> <p>What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.</p> <p>We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.</p> </div> <divclass="modal-footer"> <buttontype="button"class="btn btn-secondary"data-dismiss="modal">Close</button> <buttontype="button"class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
<p> <aclass="btn btn-primary"data-toggle="collapse"href="#collapseExample"role="button"aria-expanded="false"aria-controls="collapseExample"> Link with href </a> <buttonclass="btn btn-primary"type="button"data-toggle="collapse"data-target="#collapseExample"aria-expanded="false"aria-controls="collapseExample"> Button with data-target </button> </p> <divclass="collapse"id="collapseExample"> <divclass="card card-body"> Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. </div> </div>
Multiple targets
Multiple <button> or <a> can show and hide an element if they each reference it with their href or data-target attribute
<p> <aclass="btn btn-primary"data-toggle="collapse"href="#multiCollapseExample1"role="button"aria-expanded="false"aria-controls="multiCollapseExample1">Toggle first element</a> <buttonclass="btn btn-primary"type="button"data-toggle="collapse"data-target="#multiCollapseExample2"aria-expanded="false"aria-controls="multiCollapseExample2">Toggle second element</button> <buttonclass="btn btn-primary"type="button"data-toggle="collapse"data-target=".multi-collapse"aria-expanded="false"aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button> </p> <divclass="row"> <divclass="col"> <divclass="collapse multi-collapse"id="multiCollapseExample1"> <divclass="card card-body"> Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger. </div> </div> </div> <divclass="col"> <divclass="collapse multi-collapse"id="multiCollapseExample2"> <divclass="card card-body"> Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger. </div> </div> </div> </div>
<!-- 1st show --> <divid="collapseOne"class="collapse show"aria-labelledby="headingOne"data-parent="#accordionExample"> <divclass="card-body"> Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class. </div> </div> </div> <divclass="card"> <divclass="card-header"id="headingTwo"> <h2class="mb-0"> <buttonclass="btn btn-link btn-block text-left collapsed"type="button"data-toggle="collapse"data-target="#collapseTwo"aria-expanded="false"aria-controls="collapseTwo"> Collapsible Group Item #2 </button> </h2> </div> <divid="collapseTwo"class="collapse"aria-labelledby="headingTwo"data-parent="#accordionExample"> <divclass="card-body"> Some placeholder content for the second accordion panel. This panel is hidden by default. </div> </div> </div> <divclass="card"> <divclass="card-header"id="headingThree"> <h2class="mb-0"> <buttonclass="btn btn-link btn-block text-left collapsed"type="button"data-toggle="collapse"data-target="#collapseThree"aria-expanded="false"aria-controls="collapseThree"> Collapsible Group Item #3 </button> </h2> </div> <divid="collapseThree"class="collapse"aria-labelledby="headingThree"data-parent="#accordionExample"> <divclass="card-body"> And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default. </div> </div> </div> </div>
<!-- title="Tooltip on top" : show data data-toggle="tooltip" : set for tooltip data-placement="top" : show direction --> <buttontype="button"class="btn btn-secondary"data-toggle="tooltip"data-placement="top"title="Tooltip on top"> Tooltip on top </button> <buttontype="button"class="btn btn-secondary"data-toggle="tooltip"data-placement="right"title="Tooltip on right"> Tooltip on right </button> <buttontype="button"class="btn btn-secondary"data-toggle="tooltip"data-placement="bottom"title="Tooltip on bottom"> Tooltip on bottom </button> <buttontype="button"class="btn btn-secondary"data-toggle="tooltip"data-placement="left"title="Tooltip on left"> Tooltip on left </button>
Custom HTML adde
1 2 3
<buttontype="button"class="btn btn-secondary"data-toggle="tooltip"data-html="true"title="<em>Tooltip</em> <u>with</u> <b>HTML</b>"> Tooltip with HTML </button>
Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
<divclass="list-group mb-3"> <ahref="#"class="list-group-item list-group-item-action active"aria-current="true"> The current link item </a> <ahref="#"class="list-group-item list-group-item-action">A second link item</a> <ahref="#"class="list-group-item list-group-item-action">A third link item</a> <ahref="#"class="list-group-item list-group-item-action">A fourth link item</a> <aclass="list-group-item list-group-item-action disabled">A disabled link item</a> </div>
<divclass="list-group"> <buttontype="button"class="list-group-item list-group-item-action active"aria-current="true"> The current button </button> <buttontype="button"class="list-group-item list-group-item-action">A second item</button> <buttontype="button"class="list-group-item list-group-item-action">A third button item</button> <buttontype="button"class="list-group-item list-group-item-action">A fourth button item</button> <buttontype="button"class="list-group-item list-group-item-action"disabled>A disabled button item</button> </div>
Flush(緊貼)
Add .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container
1 2 3 4 5 6 7
<ulclass="list-group list-group-flush"> <liclass="list-group-item">An item</li> <liclass="list-group-item">A second item</li> <liclass="list-group-item">A third item</li> <liclass="list-group-item">A fourth item</li> <liclass="list-group-item">And a fifth one</li> </ul>
Horizontal
Add .list-group-horizontal to change the layout of list group items from vertical to horizontal across all breakpoints
<ulclass="list-group mb-3"> <liclass="list-group-item">A simple default list group item</li>
<liclass="list-group-item list-group-item-primary">A simple primary list group item</li> <liclass="list-group-item list-group-item-secondary">A simple secondary list group item</li> <liclass="list-group-item list-group-item-success">A simple success list group item</li> <liclass="list-group-item list-group-item-danger">A simple danger list group item</li> <liclass="list-group-item list-group-item-warning">A simple warning list group item</li> <liclass="list-group-item list-group-item-info">A simple info list group item</li> <liclass="list-group-item list-group-item-light">A simple light list group item</li> <liclass="list-group-item list-group-item-dark">A simple dark list group item</li> </ul>
<divclass="list-group"> <ahref="#"class="list-group-item list-group-item-action">A simple default list group item</a> <!-- .list-group-item-primary.list-group-item-action:focus, .list-group-item-primary.list-group-item-action:hover { color: #004085; background-color: #9fcdff; } --> <ahref="#"class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a> <ahref="#"class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a> <ahref="#"class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a> <ahref="#"class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a> <ahref="#"class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a> <ahref="#"class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a> <ahref="#"class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a> <ahref="#"class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a> </div>
To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x class for the regularly sized icon, and fa-stack-2x for the larger icon. The fa-inverse class can be used as an alternative icon color. You can also add larger icon classes to the parent to further control the sizing.
The fa-border, fa-pull-right or fa-pull-left classes are used for for pull quotes or article icons
1 2 3 4 5 6 7 8 9 10 11
<!-- .fa-border { border: solid 0.08em #eee; border-radius: 0.1em; padding: 0.2em 0.25em 0.15em; } --> <!-- .fa-pull-left { margin-right: 0.3em; width: auto; } --> <iclass="fas fa-quote-left fa-3x fa-pull-left fa-border"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.