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
1 answer

Center Image Being Weird

I have centered my image using CSS .center-block{ margin-left:auto; margin-right:auto; } when using this code it makes them very weirdly centered. Here is all my code HTML & CSS https://hastebin.com/uzavakecic.xml. Here is the image showing what…
Nydigov
  • 15
  • 4
-1
votes
3 answers

How can I put my icons at the bottom centre of the webpage?

Is anyone here able to think of a way which I can put my icons .chevron-row at the bottom centre of each section of my webpage without using position: relativeand position: absolute due to the impacts it has. Site code SECTION1
Jon Bridge
  • 329
  • 1
  • 2
  • 12
-1
votes
1 answer

Hamburger menu - background color delay (bootstrap4)

I started coding a couple of months ago and i'm almost done with a basic portfolio site. The issue I can't work out is the hamburger menu background. I've managed to give the menu a background colour with CSS, but when clicking on it, the menu…
-1
votes
2 answers

Bootstrap 4 - limit responsivenes

I need to limit responsivenes of my bootstrap project. lets say we have following element
column
I need bootstrap to do not resize webstie on .col-sm (website should be resized only on col-lg-4 - show…
stan
  • 51
  • 1
  • 8
-1
votes
2 answers

Bootstrap 4 column grid - responsivity

We're trying to achieve layout like this ... the problem is I'm not able to make it responsive, can someone give me a hint ? Should we add just col-* classes ? also we can't set specific height etc. cuz it has to look like "a…
Bezdutchek
  • 77
  • 1
  • 8
-1
votes
1 answer

Where is Bootstrap 4's SASS files?

I followed Bootstrap 4' installation guide from source and 'grunt dist' is supposed to build the SASS files but they are nowhere. Why are they missing?
-1
votes
2 answers

Bootstrap - Assistance with layout needed

I'm new to coding and figured best way to learn is to get a gig, which I did. I've got some basic (like very basic) HTML & CSS knowledge, but bootstraps layout seemed to fit for what I'm trying to accomplish. Please keep in mind this is my very…
OLEDdie
  • 1
  • 1
-1
votes
3 answers

Expand/Collapse several blocks at the same time?

I have several blocks in my page. I use bootstrap 4 alpha 6 version. I want expand/collapse these blocks by clicking one button. Right know I use next js code and it only open all blocks but how to close them?! How to fix this problem? HTML:
-1
votes
2 answers

Various background color combinations for different tabs

I want to use different color combinations of background-color on different tabs selection. For example: about: red .nav-tabs, dark red for .active, services: yellow .nav-tabs, dark yellow for .active, .... .... and so on. So what would be the…
Litestone
  • 529
  • 7
  • 22
-1
votes
1 answer

Bootstrap Align inputs and label for different columns size

I have a big form and the problem with alignment. I cut some fields, but the demo will show the problem. I have two columns in the begining of the form, some rows use half of the width, some rows use full witdh. And, the problem with the last one.…
user348173
  • 8,818
  • 18
  • 66
  • 102
-1
votes
1 answer

Bootstrap 4 Alpha 6 - label checkbox radio buttons break entire toolbar styling

Using the breaks the entire tool bar in Bootstrap 4 - Alpha 6 See Bootply This is the visual of good and bad code
David Cruwys
  • 6,262
  • 12
  • 45
  • 91
-1
votes
1 answer

Line break when page is vertically full

I have a page with a lot of Bootstrap 4 cards in a line. I want to insert a line break when the vertical scroll bar would appear. How can I do that? Code:
skiilaa
  • 1,212
  • 11
  • 20
-1
votes
1 answer

bootstrap 4 alpha 6 flexbox responsive trouble

...I being checking the new bootstrap 4 flexbox grid https://v4-alpha.getbootstrap.com/utilities/flexbox/ And I have some questions about it...I try to understand how use the responsive flexbox classes created by bootstrap...I have something like…
-1
votes
2 answers

Why does this bootstrap layout grid wrap when it should not?

(Note: This site only works with Chrome, IE will not display it as it does not support the Fetch spec yet) http://greggum.com/#/entity-shell/entityDetails/14 If you go to this page, there is a row with two child divs that should both fit on one row.…
Greg Gum
  • 33,478
  • 39
  • 162
  • 233
-1
votes
2 answers

Bootstrap 4 Card image overlay float issue

I'm using Bootstrap 4 and am trying to use a card based layout to display my stores. I have a location marker that's supposed to come over the store and on the same line, floating to the right, I want a 5 star rating. (Icons from…