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

Bootstrap 4 Built-in validator - Error text

I made a simple form using Bootstrap 4. I thought the built-in validator in BS4 could be usefull. I made an simple email form field:

My problem is…
-1
votes
3 answers

equal height to columns bootstrap4

I am using the bootstrap 4 and wanted to know how I leave all the columns of the same height ? If possible without using flexbox to be compatible with older browser ( bah !). Thank you
Angelo Merlo
  • 427
  • 1
  • 5
  • 12
-1
votes
1 answer

bootstrap 4 cards scrubles under mobile screen size

I'm making intro site with bootstrap 4 cards check it at http://triangleslabs.com/mazenintro/ the problem that under small screen size the site changes into strange look anyone can help?
-1
votes
1 answer

How to change order of div's on mobile devices

I am currently trying to re-order these elements on resize for mobile devices as currently they are as following: DESKTOP: http://puu.sh/nwFhQ/2ec567f7be.jpg {image}{paragraph} MOBILE: http://puu.sh/nwFto/67ec6ef877.jpg {paragraph} {image}
-1
votes
1 answer

Bootstrap 4 getting started

Here's the minimal configuration that I've figured out so far:
Phillip Senn
  • 46,771
  • 90
  • 257
  • 373
-1
votes
3 answers

Bootstrap 4 overwrite rule

I am trying to change navbar link color in bootstrap 4 like that .nav-link { color: red; } My scss file looks like that @import '../../public_html/static/vendor/bootstrap/scss/bootstrap'; .nav-link { color: red; } But without !important…
Itsmeromka
  • 3,621
  • 9
  • 46
  • 79
-2
votes
1 answer

Hide / show table with javascript

I have a little problem to hide and show table. I tred this, I haven't error in console but it does'nt work. Maybe I forget something wrong or make a mistake. I saw the data inside the code but it does'nt appear when I click on the link. Thank you …
kRIS
  • 3
  • 2
-2
votes
1 answer

Unable to show images of Python code?

Is there some unwritten rule that you are not allowed to show images of Python code on Github websites? I tried to upload images in this manner, however, it doesn't work. Images are png and source linked…
E.E.
  • 24
  • 1
  • 6
-2
votes
2 answers

Using Bootstrap, how do I center my navigation bar?

So I have this code below. Using Bootstrap I would like to have this drop down on the left in the middle of the screen. https://screenshots.firefox.com/WKjwlW5eUiVdS0fO/null How would I do this? Additional Question: How do I make the 3 lines bigger?…
-2
votes
1 answer

Bootstrap slider/carousel

I want to make a bootstrap carousel with text, on top of this 4 circles where everytime 1 circle is 'selected/hovered' the right circle and the right line underneath is shown. Something like this: Who can help me with this issue?
ayoubc
  • 1
-2
votes
3 answers

pull-right replacement in bootstrap 4 does not work

I have read that the pull-right class has been removed and in its place there are classes such as .float-{sm,md,lg,xl}-{left,right,none} - as seen in this question too. but i cant get it to work. I have setup a demo at…
kneidels
  • 956
  • 6
  • 29
  • 55
-2
votes
2 answers

How can I make my navigation bar fixed but on specific sections on my webpage?

My digital portfolio is going to consist of "4 sections" which is 4 separate scrollable web pages together. Please note my sections are also referred to as parts. For example, section one is #part1 and this goes all the way up to 4. On #part1 I…
Jon Bridge
  • 329
  • 1
  • 2
  • 12
-2
votes
2 answers

Will bootstrap 1 wont work in boostrap4 theme?

I have an angular cli project in which the bootstrap version is 4 and recently i put a template with navbar which is done in bootstrap 1.The template is not working in my theme.Is this because of the version mismatch.Can anyone please help…
MMR
  • 2,869
  • 13
  • 56
  • 110
-2
votes
3 answers

Bootstrap table inside other table | Fix the height of table

I have little problem in my web page. I use bootstrap 4 and in table box I set inside other table as in the picture below. How to make the height of table inside the same as the hieght of the box (td)? html: …
Nurzhan Nogerbek
  • 4,806
  • 16
  • 87
  • 193
-2
votes
1 answer

bootstrap Navbar not working with bootstrap 4.0.0-alpha.2

bootstrap Navbar not working with bootstrap 4.0.0-alpha.2 and also scroll spy.I tried to replace both script and css file with bootstrap 3.3.7 which work fine but with this version both styling of navbar and also spy scrolling not…
1 2 3
50
51