twitter-bootstrap-4

I think the standard of Bootstrap 3 and 4 is <div class="container"> <div class="row"> <div class="col-md-4"> ... </div> <div class="col-md-8"> ... </div> <!-- just add up to 12 --> </div> </div> But what if you have a div , table , form , or any element, that you plan to just let it span the whole width? Then do you need the container or row or col-md-12 at all, for the whole page to display well under the styling rules of Bootstrap 3 and 4? P.S. if possible, please point to or quote the official Bootstrap docs related to this. Short answer: you do need to use container , but you don't need

On Bootstrap 3 this was pretty easy, you just had to change span and add whatever icon you wanted instead. But that doesn't seem the case with Bootstrap 4. Or maybe I'm missing something? Anyway, here's the basic code for it: <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a

So in Bootstrap v4, I see there's a new feature for card decks ( http://v4-alpha.getbootstrap.com/components/card/#decks ) that makes a group of cards, with their height equal according to the tallest content in the group. It appears the number of columns are based on how many card-div's are in the group. Is there a way to make the number of columns change based on the viewport? For example, 4 columns / card wide at large width, 2 wide at medium width, and 1 at small width? Currently they stay the same number of columns/cards wide until less than 544px. At 544px and greater, they have display:

I find the naming in Bootstrap v4 less than intuitive. I know they want to minimise the impact all the classes cluttering up the markup, but I just can't come to a reasonable conclusion. I can guess - but I can't find concrete answers. p-1, p-2, p-N : Flexbox related, but what does the p stand for? d-flex : Flexbox related, but what does the d stand for? Perhaps display ? mr-auto - Elliots cousin? Guessing margin related - perhaps margin-right-auto but can't confirm in the docs. mt-auto - ? ml-auto - ? They are the new spacing utility classes. I think they're are very intuitive... p-* is for

Bootstrap 4 uses flex-box for it's modal footers. If I want two buttons, one on the left and one on the right, how do I get it to work properly? The code below tries to use a div.row with col-sm-6 but doesn't work. <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <!--

I am attempting to create a page that is populated by many cards, using bootstrap 4's new card component. I want to create a search bar, that when searched, filters out cards whose titles don't match the search query. Here is a plunker of what I have in mind. Plunker I would like the cards to get something like a display: none , or opacity:0 if they don't match. I currently am attempting to write a function that onChange of the search bar does this. I'll post if I can get it figured out. I've tried to use the built in snippet feature as well. <script src="https://ajax.googleapis.com/ajax/libs

How to use responsive text in bootstrap v4? I tried: @include media-breakpoint-up(sm) { .resp-text { font-size: 16px; } } @include media-breakpoint-up(lg) { .resp-text { font-size: 28px; } } but not working. there could be multiple reasons ensure that you are using SASS with SASS Compiler if not then use normal media queries https://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints if you are using SASS then ensure you have imported the correct mixins file to your core sass file. if you think everything is perfect then compile sass files separately and post screenshot of the

I want to create a responsive grid of squares with Bootstrap 4, to do so, I'm doing something like this (One row): <div class="container"> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> </div> And I'm setting the col class to have the following rule: .col { padding-top: 100%; } But that only creates a row with each column of the height of the viewport. This solution used to work before, but I think it breaks the Bootstrap 4 flexbox. Any ideas? padding-bottom: 100% ...applies a padding value equal

How can I get always display the mobile menu button no matter screen size? I do not want the links to appear until a person clicks the mobile button. Thank you! I realize there is a post here on Bootstrap 3, however it does not work with Bootstrap 4. Will you please advise? Update Bootstrap 4.1.x Exclude the navbar-expand* class. As of beta, the navbar-toggleable-* class was replaced with navbar-expand-* , but now everythings moves up a tier. Since the default state of the navbar is always collapsed/mobile (xs) you'd simply exclude the navbar-expand-* class so that the menu is always collapsed

I've got a website being developed with Bootstrap 4. When viewing from a mobile device and the menu items have collapsed to the 3 bars, the menu items are not clickable. I've tried implementing it the way the bootstrap docs suggest, but it's still not working. I've tried some other tweaks to no avail. What am I doing wrong here (other than using the alpha version)? Here's the site where you can test it: http://www.wrestlestat.com Keep in mind, if you just resize your browser from a desktop to the mobile size, everything works fine, it only doesn't work when viewing from a mobile device. Here's