bootstrap-4

Non 12-divisible Equal columns on Bootstrap 4

由 耗尽温柔 提交于 2019-12-19 11:16:26
问题 I have a little web app that I want to show 5 columns responsive equal width. But I only want this layout for a devices with ≥992px of width. For devices <992px of width I want to show the 5 HTML elements in one full-width row. Equal-width columns can be broken into multiple lines, but there was a Safari flexbox bug that prevented this from working without an explicit flex-basis or border . Two workarounds have been documented in a reduced test case outside Bootstrap, though if the browser is

Fade transition for Carousel in Bootstrap 4 Beta

由 可紊 提交于 2019-12-19 11:12:10
问题 I'm trying to modify the new Bootstrap 4 Beta Carousel to transition from slide to slide with fade rather than a sliding action, and using CSS. I cannot get it to work. I'm not sure if a special Javascript call is required. Please see Codepen here: .carousel-fade .carousel-inner .item { -webkit-transition-property: opacity; transition-property: opacity; } .carousel-fade .carousel-inner .item, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { opacity:

How to make Navbar and Carousel combined always full screen

由 北城余情 提交于 2019-12-19 10:59:06
问题 I want to have a nav-bar at the top of my page. Below that I want my carousel which should always take up the entire remaining screen. This is my navbar: <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id

Dynamically create a grid layout using div tag in PHP

由 徘徊边缘 提交于 2019-12-19 10:13:31
问题 So I have a question similar to this one but I'm applying it only in vanilla PHP and not in wordpress. After countless hours of struggle I finally got the answer but somehow if I increase the size of my grid number the items are not aligning. I want it to look like this: ----------- - 1 2 3 4 - ----------- But: As stated on my problem if I tried to increase the grid (or more precisely the item) it becomes like this: ----------- - 1 2 3 4 - - 5 - -6 - -7 - ----------- It becomes cluttered.

Bootstrap 4 - Link to specific tab

由 此生再无相见时 提交于 2019-12-19 09:24:02
问题 I have a Bootstrap 4 tabs set in a Wordpress website and want to link to a specific tab from another page link: Index.php: <a href="<?php echo get_site_url(); ?>/services/#innovation">Discover More</a> Services.php: <!-- Nav tabs --> <ul class="nav nav-tabs text-xs-center" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#innovation" role="tab" aria-expanded="true"> <h4>Innovation &<br/>Investigation</h4> </a> </li> <li class="nav-item"> <a class="nav

Bootstrap v4 Navbar bug?

由 自作多情 提交于 2019-12-19 08:14:44
问题 Here is the problem. I took default navbar example from bootstrap side(https://v4-alpha.getbootstrap.com/components/navbar/). They show full size navbar in result, that can collapse, when screen gets smaller. But when I've inserted the code into my project, it shows this: https://ibb.co/fjBNhQ As you can see it is always collapsed. I tried a lot of other examples, but nothing workes. Here is the code: <!DOCTYPE html> <html> <head> <title>Test area</title> <link rel="stylesheet" href="media

How do I hide or show content with CSS depending on screen size?

由 …衆ロ難τιáo~ 提交于 2019-12-19 07:25:17
问题 Just like Bootstrap, Ionic (Ionic 3) lets us resize the width of a column based on screen size using col-sm-8 , col-md-6 , col-lg-4 . Bootstrap also comes with classes like visible-xs , hidden-sm , etc. that enables us to show or hide content according to the screen size. Does Ionic 3 ship with anything that lets us do the same? 回答1: I copied the following CSS classes from Bootstrap 4 Alpha into my project and they work perfectly. .invisible { visibility: hidden !important; } .hidden-xs-up {

How do I hide or show content with CSS depending on screen size?

由 青春壹個敷衍的年華 提交于 2019-12-19 07:24:40
问题 Just like Bootstrap, Ionic (Ionic 3) lets us resize the width of a column based on screen size using col-sm-8 , col-md-6 , col-lg-4 . Bootstrap also comes with classes like visible-xs , hidden-sm , etc. that enables us to show or hide content according to the screen size. Does Ionic 3 ship with anything that lets us do the same? 回答1: I copied the following CSS classes from Bootstrap 4 Alpha into my project and they work perfectly. .invisible { visibility: hidden !important; } .hidden-xs-up {

How to set the brand logo in Bootstrap 4 navbar to the left edge?

由 故事扮演 提交于 2019-12-19 05:53:04
问题 I have a logo as shown below. <nav class="navbar navbar-fixed-top navbar-light bg-primary"> <div class="container-fluid"> <img class="navbar-brand" src="logo.png" alt="logo"> <ul class="nav navbar-nav"> <li class="nav-item"><a href="#" class="nav-link">START</a></li> ... </ul> </div> </nav> Bootstrap adds a piece of padding on the left resulting in the following offset from the edge. Since our logo is a cut off circle, we want it to be placed precisely at the edge to create illusion of a real

Bootstrap 4 Multi Carousel show 4 images instead of 3

由 霸气de小男生 提交于 2019-12-19 04:51:09
问题 I can't figure out how to make it show 4 images instead of 3. Based on this Code: Bootstrap 4 Multiple Item Carousel Script JS $('#recipeCarousel').carousel({ interval: 10000 }) $('.carousel .carousel-item').each(function(){ var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); if (next.next().length>0) { next.next().children(':first-child').clone().appendTo($(this)); } else { $(this).siblings(':first')
订阅 bootstrap-4