twitter-bootstrap-4

Horizontally scrollable list of cards in Bootstrap

by

Update 2021 Bootstrap 5 The flexbox utils still exist in Bootstrap 5: https://codeply.com/p/Vo13PAGO7e <div class=”container-fluid py-2″> <h2 class=”font-weight-light”>Bootstrap 5 Horizontal Scrolling Cards with Flexbox</h2> <div class=”d-flex flex-row flex-nowrap”> <div class=”card card-body”>Card</div> <div class=”card card-body”>Card</div> <div class=”card card-body”>Card</div> … </div> </div> Update 2019 Bootstrap 4.3+ The flexbox method still works, so you can use the flexbox … Read more

Open bootstrap modal with vue.js 2.0

by

My code is based on the Michael Tranchida’s answer. Bootstrap 3 html: <div id=”app”> <div v-if=”showModal”> <transition name=”modal”> <div class=”modal-mask”> <div class=”modal-wrapper”> <div class=”modal-dialog”> <div class=”modal-content”> <div class=”modal-header”> <button type=”button” class=”close” @click=”showModal=false”> <span aria-hidden=”true”>&times;</span> </button> <h4 class=”modal-title”>Modal title</h4> </div> <div class=”modal-body”> modal body </div> </div> </div> </div> </div> </transition> </div> <button id=”show-modal” @click=”showModal = true”>Show … Read more

Bootstrap 4 navbar with 2 rows

by

You can use the flex-column flexbox utility class to stack the 2 navs vertically next to the icon. This sets flex-direction: column on the navbar-collapse div so that it’s child elements stack vertically. <nav class=”navbar navbar-toggleable-md navbar-inverse bg-inverse”> <div class=”container”> <button class=”navbar-toggler navbar-toggler-right align-self-center mt-3″ type=”button” data-toggle=”collapse” data-target=”#navbarCollapse”> <span class=”navbar-toggler-icon”></span> </button> <h1 class=”py-2 ml-lg-2 mx-3″><a … Read more

Align the form to the center in Bootstrap 4 [duplicate]

by

You need to use the various Bootstrap 4 centering methods… Use text-center for inline elements. Use justify-content-center for flexbox elements (ie; form-inline) https://codeply.com/go/Am5LvvjTxC Also, to offset the column, the col-sm-* must be contained within a .row, and the .row must be in a container… <section id=”cover”> <div id=”cover-caption”> <div id=”container” class=”container”> <div class=”row”> <div class=”col-sm-10 … Read more

bootstrap 4 – When to use reboot css and grid css?

by

bootstrap.css should contain all the CSS you need to use Bootstrap in your project. The files bootstrap-reboot.css and bootstrap-grid.css are cut down versions containing just the necessary styles for reboot and Bootstrap’s flexbox grid respectively. They are to be used if you don’t want to include the entirety of Bootstrap in your project and will … Read more

How to align content bottom on Bootstrap 4 col

by

You can use align-items-end from the new Bootstrap 4 flexbox utilities… <div class=”container”> <hr> <div class=”row align-items-end”> <div class=”col-md-6″> © BusinessName 2017. </div> <div class=”col-md-3″> <a href=”https://stackoverflow.com/blog”> Blog </a> <br> <a href=”https://stackoverflow.com/blog”> FAQ </a> <br> <a href=”https://stackoverflow.com/blog”> About </a> </div> <div class=”col-md-3″> <strong>Contact</strong> <br> contact@businessname.com <br> more info bla bla <br> more more more info … Read more

Bootstrap 4 card-deck with number of columns based on viewport

by

Updated 2018 If you want a responsive card-deck, use the visibility utils to force a wrap every X columns on different viewport width(breakpoints)… Bootstrap 4 responsive card-deck (v 4.1) Original answer for Bootstrap 4 alpha 2: You can use the grid col-*-* to get the different widths (instead of card-deck) and then set equal height … Read more

btn-xs no longer a valid option in bootstrap 4?

by

@rifton007 posted a quick fix in the GitHub issue on this subject. Add this in your css file: .btn-group-xs > .btn, .btn-xs { padding: .25rem .4rem; font-size: .875rem; line-height: .5; border-radius: .2rem; } Demo: <link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css” rel=”stylesheet”/> <style> .btn-group-xs > .btn, .btn-xs { padding: .25rem .4rem; font-size: .875rem; line-height: .5; border-radius: .2rem; } </style> <button … Read more

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)