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
-1
votes
2 answers

Bootstrap float navbar items to the right

Im trying to float navbar items to the right instead of the left here is the html i have used floats float-right class and i think pull-right is deprecated so anyone that could help would be appreciated
JimClayton
  • 111
  • 1
  • 4
  • 15
-1
votes
2 answers

Buttonset and javascript error

In my console I have this javascript error when the page is loaded: TypeError: $(...).buttonset is not a function closeVariantForm onclick Is it possible to know where the problem is?

Manu
  • 9
-1
votes
1 answer

How can I make this Bootstrap 4 code more responsive?

I am trying to get this code to behave more responsively but I have not been able to find a good solution. As the browser window shrinks towards mobile sizes, the list becomes really narrow, and the picture/video items on the right become really…
-1
votes
1 answer

Any links or HTML form items like button inside the Bootstrap 4 modal is unusable

I have cart icon, which when clicked loads the cart of the user in a Modal. However, any link or HTML form items like input or buttons that are within this modal are unusable. It can never be brought to focus nor clicked. I tried playing with CSS…
esafwan
  • 17,311
  • 33
  • 107
  • 166
-1
votes
1 answer

Vertical alignment of columns in bootstrap 4

I've searched on google and this site for answers on how to vertically align columns to be centered. I've found entries with this exact title but none of them work, they all show how to align horizontally. Even the bootply's etc. links to examples…
-1
votes
1 answer

Align some nav-pills elements to right in Bootstrap 4

I am using Bootstrap 4-beta2's nav-pills to implement tabbed interface. How do I align some elements to the right of the screen? Setting ml-auto on the last li item does not work. Splitting up the ul in two ul's does not work either because it…
-1
votes
2 answers

Does making a Bootstrap row d-flex make its columns equal heights?

Does making a Bootstrap 4 row d-flex make its columns equal heights? Example,

111111111111111111111111111111111111111111111111111 22222222222222222222222222222222222222222222222222 …

-1
votes
1 answer

How to overlap different DIV ID's

Wasn't sure how to word the title so here it goes. I'm wanting to move the tables so the headings are on the blue part of my page, but the body of the table is still on the grey. I tried just margin-bottom:-50px; and as expected was the above…
Matt1966
  • 27
  • 1
  • 5
-1
votes
2 answers

How do you vertically center items in Jumbotron using flex while displaying in block?

I tried this to vertically center all items in a Jumbotron, display: flex; justify-content: center; align-items: center; But the issue is all items are lined up in a single line like they are displaying inline. How do you vertically center them…
CodeMan
  • 314
  • 2
  • 3
  • 5
-1
votes
1 answer

Down-scale Responsive Image Resize Bootstrap

I am having trouble down scaling a responsive image in bootstrap using the example carousel on their website.
....
jackana3
  • 27
  • 6
-1
votes
2 answers

bootstrap 4 vertical alignment

What I am trying to achieve is this: 1 long left column- and next to it, 2 rows on the right, that together - align up to the left column. In a table it would super easy to do: ---------------------------- | | | | col-4 | …
kneidels
  • 956
  • 6
  • 29
  • 55
-1
votes
1 answer

Making a Bootstrap 4 multi image carousel slider

I am working with this Bootstrap 4 carousel slider and instead of having it scroll 3 images at a time I am trying to have it scroll 4 images at a time. How would I best go about making this happen? And it does have to be Bootstrap 4 also.…
kpschwert
  • 99
  • 1
  • 11
-1
votes
2 answers

Bootstrap 4 NavTabs Next/Previous not working

I've think ist's very easy but I have no Idea. My Problem is that I have a Next and a Previous Button to switch the NavTabs in Bootstrap 4 but only the first click working. Here is my Code: jQuery('#next').on('click', function(){ …
-1
votes
2 answers

Launch Bootstrap 4v6 Modal on page load?

I am trying to develop a subscription pop up modal box using the latest framework from Bootstrap 4. However, I do not want my clients to click the button to subscribe, I want the subscription box to pop up as soon the page load. After numerous of…