Questions tagged [twitter-bootstrap-4]

Bootstrap 4 is the fourth generation of the front-end framework allowing for speedier web development with an attractive look and feel. For questions on previous versions, please use [tag:twitter-bootstrap-2] or [tag:twitter-bootstrap-3]

Twitter is no longer part of the Bootstrap brand: the official tag on Stackoverflow is bootstrap-4 https://stackoverflow.com/tags/bootstrap-4/info

Sources:

http://v4-alpha.getbootstrap.com/about/brand/#name https://github.com/twbs/bootstrap#community

Bootstrap 4 will build on top of the concepts already introduced by the Bootstrap Framework.

The release is not yet public, but here's the second beta release of Bootstrap 4 is out and it includes the following features:

  • Moved from Less to Sass. Bootstrap now compiles faster than ever thanks to Libsass, and we join an increasingly large community of Sass developers.
  • Improved grid system. We’ve added a new grid tier to better target mobile devices and completely overhauled our semantic mixins.
  • flexbox support is here. You can now take advantage of a flexbox-based grid system and components.
  • Dropped wells, thumbnails, and panels for cards. Cards are a brand new component to Bootstrap, but they’ll feel super familiar as they do nearly everything wells, thumbnails, and panels did, only better.
  • Consolidated all our HTML resets into a new module, Reboot. Reboot steps in where Normalize.css stops, giving you more opinionated resets like box-sizing: border-box, margin tweaks, and more all in a single Sass file.
  • Brand new customization options. Instead of relegating style embellishments like gradients, transitions, shadows, and more to a separate stylesheet like v3, we’ve moved all those options into Sass variables. Want default transitions on everything or to disable rounded corners? Simply update a variable and recompile.
  • Dropped IE8 support and moved to rem and em units. Dropping support for IE8 means we can take advantage of the best parts of CSS without being held back with CSS hacks or fallbacks. Pixels have been swapped for rems and ems where appropriate to make responsive typography and component sizing even easier. If you need IE8 support, keep using Bootstrap 3.
  • Rewrote all our JavaScript plugins. Every plugin has been rewritten in ES6 to take advantage of the newest JavaScript enhancements. They also now come with UMD support, generic teardown methods, option type checking, and tons more.
  • Improved auto-placement of tooltips and popovers thanks to the help of a library called Tether.
  • Improved documentation. We rewrote it all in Markdown and added a few handy plugins to streamline examples and code snippets to make working with our docs way easier. Improved search is also on it’s way.
  • And tons more! Custom form controls, margin and padding classes, new utility classes, and more have also been included.

Current version: Bootstrap v4.0.0-beta.2

759 questions
231
votes
6 answers

`col-xs-*` not working in Bootstrap 4

I have not encountered this before, and I am having a very hard time trying to find the solution. When having a column equal to medium in bootstrap like so:

Hello, world!

YoungCoder
  • 2,539
  • 2
  • 12
  • 17
174
votes
13 answers

How to remove the arrow in dropdown in Bootstrap 4?

I am using Bootstrap 4. I tried to remove the arrow in dropdown. The answers I found for Bootstrap 3 do not work any more. The jsfiddle is here.
171
votes
13 answers

Does bootstrap 4 have a built in horizontal divider?

Does bootstrap 4 have a built in horizontal divider? I can do this, But I want to use the built in bootstrap…
user7339197
  • 1,879
  • 2
  • 9
  • 12
160
votes
8 answers

What is the '.well' equivalent class in Bootstrap 4

In bootstrap-3 there is .well class which adds a rounded border around an element with a gray background color and some padding.
Basic Well
But, I didn't find any .well class in bootstrap-4. Is there any tag equivalent to…
119
votes
5 answers

bootstrap 4 responsive utilities visible / hidden xs sm lg not working

Having an issue with the new responsive utilities hidden / visible classes, when migrating to Bootstrap 4. I am aware that .hidden- classes have been removed from v3 and replaced with .hidden-*-up .hidden-*-down. Using the new…
97
votes
12 answers

Left & right align modal footer buttons in Bootstrap 4

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.
Sean
  • 14,359
  • 13
  • 74
  • 124
96
votes
7 answers

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

I just migrated to bootstrap 4 and my xs buttons no longer seem to be extra small! Looking at the docs for buttons in bootstrap 4 I don't see the option for extra small buttons? Can anyone confirm this for me? Thanks!
Dragan
  • 3,713
  • 12
  • 42
  • 59
74
votes
11 answers

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

I'm trying to implement the card-deck feature in bootstrap 4 to make all of my cards the same height. The examples that bootstrap provides show 4 nice cards, but it's 4 cards on the row, no matter the viewport. See the codeply here. This doesn't…
ganders
  • 7,285
  • 17
  • 66
  • 114
56
votes
2 answers

How to align content bottom on Bootstrap 4 col

I have the following code for a footer:

© BusinessName 2017.
52
votes
1 answer

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

I am trying to migrate my application from bootstrap 3.3.7 to Bootstrap v4.0.0-alpha.6. When I downloaded the Bootstrap v4.0.0-alpha.6 into my project using NuGet, I saw bootstrap-reboot.css and bootstrap-grid.css in addition to bootstrap.css. I…
JGV
  • 5,037
  • 9
  • 50
  • 94
47
votes
3 answers

Align the form to the center in Bootstrap 4

I am trying to align the form to the center and keep it responsive. I have tried several ways but no success. I am trying to center all the text and the form. I am using Bootstrap v4. I am not sure if that helps. HTML:
eyedfox
  • 714
  • 1
  • 7
  • 14
43
votes
3 answers

Bootstrap 4 navbar with 2 rows

I have created a navbar with Bootstrap 4 alpha 6 that has a large brand/icon on the left, and 2 navbar-nav's with links to the right of the icon. One nav has links, and the other nav has icons. It's working exactly as I want except for one…
41
votes
1 answer

Bootstrap 4 - "Complete JavaScript" vs "Complete JavaScript Bundle"

What am I missing? The examples use min.js. The bundle.min.js has more code, but I can't find a description of that extra…
Michael Cole
  • 15,473
  • 7
  • 79
  • 96
41
votes
9 answers

Open bootstrap modal with vue.js 2.0

Does anyone know how to open a bootstrap modal with vue 2.0? Before vue.js I would simply open the modal by using jQuery: $('#myModal').modal('show'); However, is there a proper way I should do this in Vue? Thank you.
Trung Tran
  • 13,141
  • 42
  • 113
  • 200
39
votes
1 answer

table caption goes bottom using bootstrap

Table caption is at the top of the table but when I use a bootstrap class it goes to bottom of the table. …
Ali Rasooli
  • 501
  • 1
  • 5
  • 8
1
2 3
50 51
why?
1 2 3