Is responding to a site with Bootstrap a design flaw?

Advertising

y u no do it?

Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

Starts at just $1 per CPM or $0.10 per CPC.

Bootstrap Barrio – can’t override node template

I have installed Barrio Bootstrap (8.x-4.33) and it worked so far.
But I can’t override a template for a specific node type.
I copied the original template into my subtheme/template folder and named it like suggested in the FILE NAME SUGGESTION (debug mode).
E.g.: bs-2col-bricked–node-cuba-casa-particular-full.html.twig

This doesn’t work.

Only when I name it like the original file (bs-2col-bricked.html.twig) it works.

I tried also 5.1.4, but it’s the same. Anything wrong with the FILE NAME SUGGESTIONS?

In my Bootstrap3 theme it worked.

Can anybody help, please.

html – Opacidade da Navbar com Bootstrap

Estou começando a fazer um site com Bootstrap e preciso deixar o background da navbar com transparência. Porém quando eu adiciono a opacidade o texto também fica transparente, não sei como posso fazer para deixar o fundo com transparência e o texto com cor sólida.

Segue abaixo o código da Navbar:

<header>
        <nav class="navbar navbar-expand-md navbar-light bg-primary fixed-top">
            <div class="container">
            <a id="brand" class="navbar-brand h1 mb-0 ml-0 mr-4 text-primary" href="#">Salão</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSite">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSite">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item"><a class="nav-link text-primary" href="#">Meus Atendimentos</a></li>
                    <li class="nav-item"><a class="nav-link text-primary" href="#">Lista de Atendimentos</a></li>
                    <li class="nav-item"><a class="nav-link text-primary" href="#">Clientes</a></li>
                    <li class="nav-item"><a class="nav-link text-primary" href="#">Serviços</a></li>
                    <li class="nav-item"><a class="nav-link text-primary" href="#">Funcionários</a></li>
                    <li class="nav-item"><a class="nav-link text-primary" href="#">Meu Salão</a></li>
                </ul>
        </header> 

html – Why is my bootstrap tab not displayed when the page loads?

I am writing to you because I used the bootstrap tabs, but I have a problem. The tabs work well on click, each click leads to the desired content. The problem is that when the page loads, the content is empty. I have to click to display some content, whereas normally the first tab should appear by default (I believe this is done thanks to aria-selected = “true”)

Can you tell me why it is not displayed by default please? Thank you very much !

Here is the link to the documentation of the bootstrap tabs :
https://getbootstrap.com/docs/4.5/components/navs/#tabs

My HTML code :

                <nav>
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                          <a class="nav-link active" id="home-tab" data-toggle="tab" href="#reservation" role="tab" aria-controls="home" aria-selected="true">Ma réservation en détail</a>
                        </li>
                        <li class="nav-item" role="presentation">
                          <a class="nav-link" id="profile-tab" data-toggle="tab" href="#imprimer" role="tab" aria-controls="profile" aria-selected="false">Imprimer mes documents de voyage</a>
                        </li>
                        <li class="nav-item" role="presentation">
                          <a class="nav-link" id="contact-tab" data-toggle="tab" href="#payer" role="tab" aria-controls="contact" aria-selected="false">Payer le solde de mon séjour</a>
                        </li>
                    </ul>
                </nav>
<div class="tab-pane fade show active" id="reservation" role="tabpanel" aria-labelledby="home-tab">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

<div class="tab-pane fade" id="imprimer" role="tabpanel" aria-labelledby="profile-tab">Lorem ipsum dolor</div>

<div class="tab-pane fade" id="payer" role="tabpanel" aria-labelledby="contact-tab">Lorem ipsum dolor sit amet.</div>

Utilizar Modal Bootstrap 4 com URL remota (abrir modal de um arquivo PHP em outro)

Como fazer para abrir uma modal em um arquivo php, chamando-a de outro arquivo php? (URL Remote)

Percebi que era bem fácil fazer no Bootstrap 3 (com o url-remote), mas no 4, não achei a solução ainda.

Se houver algum jeito de fazer sem utilizar Ajax (somente com JS JQUERY) seria melhor para solucionar meu problema.

Obrigado.

html – Erros e detalhes no Bootstrap 4

Estou aprendendo a utilizar o Bootstrap 4 para criar um site responsivo, ou seja, quero que funcione de boa maneira tanto no computador, quanto no celular.

Porém to enfrentando algumas dificuldades em alguns detalhes…

Vou citar alguns pontos:

PONTO 1

Ao abrir o site no celular, o nome da empresa está sendo exibido embaixo da logo, o que de certa forma está deixando o navbar feio de se ver no celular.
(Estou utilizando o nome da empresa com <h1> e a logo com img src)

Não estou conseguindo deixar o nome do lado de maneira alguma.

Navbar

PONTO 2

A estética do Navbar está desalinhada com as opções do menu, conforme pode ver na imagem.
E mesmo apagando um dos botões, ainda parece desalinhado.

Navbar

PONTO 3

No celular, o Navbar está sobrepondo algumas informações que estão em uma section
Neste caso o que devo fazer?

Navbar

Segue código:

<!doctype html>
<html lang="pt-br">
  <head>

      <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

      <!-- CSS EDITADO POR MIM -->
      <link rel="stylesheet" href="css/estiloindex.css">

      <!-- Logo do Tittle-->
      <link rel = "shortcut icon" href =  
      "images/visaologo.jpg" 
              type = "image/x-icon" sizes="16x16"> 
                


    <title>Visão Armaria</title>
  </head>
  <body>



      <header>
        <nav id="menu" class="navbar navbar-light bg-dark fixed-top">
          <div id="logotop">
          <img src="images/visaologo7070.png" class="rounded-circle mr-4">
          <a class="navbar-brand h2 text-white font-weight-bold font-italic"><h1>Visão Armaria</h1></a>
        </div>
        
          <ul class="nav">
            <li class="nav-item">
              <a class="nav-link text-white" href="index.html">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-white" href="fotos.html">Fotos</a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-white" href="sobre.html">Sobre</a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-white" href="missao.html">Missão</a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-white" href="contatos.html">Contatos</a>
            </li>
            
          </ul>
        </nav>
      </header>
      <section>
        <div id="carouselExampleFade" class="carousel slide carousel-fade" data-interval="5000" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active" data-interval="5000">   <!-- LEMBRAR DE TROCAR IMAGEM-->
              <img src="images/carousel1.png" class="d-block w-100" alt="..."> 
            </div>
            <div class="carousel-item" data-interval="5000"> <!-- LEMBRAR DE TROCAR IMAGEM-->
              <img src="images/carousel2.png" class="d-block w-100" alt="...">
            </div> 
            <div class="carousel-item" data-interval="5000"> <!-- LEMBRAR DE TROCAR IMAGEM-->
              <img src="images/carousel3.png" class="d-block w-100" alt="...">
            </div>
          </div>
        </div>
      </section>
      <section>
        <div class="container">
          <div class="row">
            <div class="col-sm-12 text-white text-center my-3">
              <h1 id="produtoshome">Alguns Produtos</h1>
            </div>
          </div>
          <div class="card-deck rounded-circle border p-5">
            <div class="card">
              <img class="card-img-top" src="images/foto6.jpg"Imagem de capa do card">
              <div class="card-body">
                <h5 class="card-title">Pistola N413</h5>
                <p class="card-text">Glock modelo v433 cor cinza bege e pegador modificado</p>
              </div>
              <div class="card-footer">
                <small class="text-muted">Por: Gabriel Fróes</small>
              </div>
            </div>
            <div class="card">
              <img class="card-img-top" src="images/foto5.jpg" alt="Imagem de capa do card">
              <div class="card-body">
                <h5 class="card-title">Pistola B355</h5>
                <p class="card-text">Pistola B355 de cor cinza e punhos totalmente customizados</p>
              </div>
              <div class="card-footer">
                <small class="text-muted">Por: Gabriel Fróes</small>
              </div>
            </div>
            <div class="card">
              <img class="card-img-top" src="images/foto1.jpg" alt="Imagem de capa do card">
              <div class="card-body">
                <h5 class="card-title">Revolver B413</h5>
                <p class="card-text">Revolver semi-novo com mira X313 e amaciamento de gatilho</p>
              </div>
              <div class="card-footer">
                <small class="text-muted">Por: Gabriel Fróes</small>
              </div>
            </div>
          </div>
        </div>
    </section>    
      <footer>
        <div class="container-fluid text-center text-white">
          <div class="row">
            <div class="col-sm-12">
              Desenvolvido por Gabriel Fróes
            </div>
          </div>
        </div>
      </footer>





    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> 

    
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

<script type='text/javascript'>
$(document).ready(function () {
var cookieMessagePrimary = $.cookie("wc_whatsapp_primary");
if (cookieMessagePrimary !== '1') {
$.cookie("wc_whatsapp_primary", 1, {expires: 30}); //Mensagem Principal volta exibir após de 30 dias
setTimeout(showMessagePrimary, 4000);
} else {
//se tiver no mobile, a mensagem primária não exibe
if (screen.width > 550) {
setTimeout(showMessageSecondary, 4000);
}
}



});
</script>
<div class="wc_whatsapp_app left">
<a href="https://wa.me/5521964265138" target="_blank" class="wc_whatsapp" >
<span class="wc_whatsapp_primary">
</a>
</div>
  </body>
</html>

html – Como exibir múltiplos itens no carousel bootstrap?

Eu tenho um carousel em bootstrap que exibe 4 itens na página e passa um de cada vez quando clica na seta, mas eu gostaria que ele exibisse pelo ou menos 6 itens passando um de cada vez também. Tentei alterar utilizando media queries mas não funcionou. Seria algo desse tipo, mas exibindo 6 itens.
Meu código está assim:

div#logoFornecedores .carousel-control-prev-icon, div#logoFornecedores .carousel-control-next-icon {
    height: 20px;
    width: 20px;
    margin-bottom: 15px;
}  

div#logoFornecedores{
    margin-bottom: 65px;
}
div#logoFornecedores .carousel-control-prev-icon{
    filter: invert(100%);
}
div#logoFornecedores .carousel-control-next-icon {
    filter: invert(100%);
}
div#logoFornecedores .row{
    padding: 0 20px;
    flex-wrap: nowrap;
}
div#logoFornecedores .carousel-item {
    padding: 0px;
    max-height: 150px;
    max-width: 150px;
}
div#logoFornecedores .carousel-item img {
    height: 100%;
    width: 100%;
    padding: 0px;
    border-radius: 30px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.493);
}

@media (min-width: 1260px) {
    div#carousel-logoFornecedores .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item{
        display: block;
    }
    div#carousel-logoFornecedores .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }
    div#carousel-logoFornecedores .carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -20%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    div#carousel-logoFornecedores .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    div#carousel-logoFornecedores .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}
    <div id="logoFornecedores">
      <div class="top-content">
        <div class="container-fluid">
          <div id="carousel-logoFornecedores" class="carousel slide" data-interval="false">
            <div class="carousel-inner row w-100 mx-auto" role="listbox">
              <div class="carousel-item col-12 col-sm-6 col-md-8 col-lg-3 active">
                <img class="d-block w-100" src="//placehold.it/600x400/000/fff?text=1" alt="">
              </div>
              <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
                <img class="d-block w-100" src="//placehold.it/600x400?text=2" alt="">
              </div>
              <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
                <img class="d-block w-100" src="//placehold.it/600x400?text=3" alt="">
              </div>
              <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
                <img class="d-block w-100" src="//placehold.it/600x400?text=4" alt="">
              </div>
              <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
                <img class="d-block w-100" src="//placehold.it/600x400?text=5" alt="">
              </div>
              <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
                <img class="d-block w-100" src="//placehold.it/600x400?text=6" alt="">
              </div>
              <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
                <img class="d-block w-100" src="//placehold.it/600x400?text=7" alt="">
              </div>
              <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
                <img class="d-block w-100" src="//placehold.it/600x400?text=8" alt="">
              </div>
            </div>
            <a class="carousel-control-prev w-auto" href="#carousel-logoFornecedores" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next w-auto" href="#carousel-logoFornecedores" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        </div>
      </div>
    </div>

design – How can I Change Breakpoint Infix (xs,sm…) position when Pseudo-Class Variants Option is activated in Utility API? – Bootstrap

For some time now I’ve been working on an academic project using SCSS
I reached an advanced level with my project, but I stumbled upon a task :

I made a Pseudo-Class Variants creator using SCSS it make me to add pseudo-classes such as (hover, focus) in Utilities.

if want to know more about Pseudo-Class Variants and How it work take a look
to tailwind css Docs.

and don’t forget to look also in Bootstrap Utilities API and How it work.

Let’s move now to my problem and what I want to solve in my code.

Here is my Full Code :

// Options

$enable-important-utilities:  true  !default;
$breakpoint-infix-namespace: "\:" !default;

// Functions

@mixin _assert-ascending($map, $map-name) {
  $prev-key: null;
  $prev-num: null;
  @each $key, $num in $map {
    @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
      // Do nothing
    } @else if not comparable($prev-num, $num) {
      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
    } @else if $prev-num >= $num {
      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
    }
    $prev-key: $key;
    $prev-num: $num;
  }
}

@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
  @if length($map) > 0 {
    $values: map-values($map);
    $first-value: nth($values, 1);
    @if $first-value != 0 {
      @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
    }
  }
}

@function map-get-multiple($map, $values) {
  $result: ();
  @each $key, $value in $map {
    @if (index($values, $key) != null) {
      $result: map-merge($result, ($key: $value));
    }
  }
  @return $result;
}

@function str-replace($string, $search, $replace: "") {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
  $n: index($breakpoint-names, $name);
  @if not $n {
    @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
  }
  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}

@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
  $min: map-get($breakpoints, $name);
  @return if($min != 0, $min, null);
}

@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
  $max: map-get($breakpoints, $name);
  @return if($max and $max > 0, $max - .02, null);
}

@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
  @return if(breakpoint-min($name, $breakpoints) == null, "", "#{$name}#{$breakpoint-infix-namespace}");
}

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
  $max: breakpoint-max($name, $breakpoints);
  @if $max {
    @media (max-width: $max) {
      @content;
    }
  } @else {
    @content;
  }
}

@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($lower, $breakpoints);
  $max: breakpoint-max($upper, $breakpoints);

  @if $min != null and $max != null {
    @media (min-width: $min) and (max-width: $max) {
      @content;
    }
  } @else if $max == null {
    @include media-breakpoint-up($lower, $breakpoints) {
      @content;
    }
  } @else if $min == null {
    @include media-breakpoint-down($upper, $breakpoints) {
      @content;
    }
  }
}

@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
  $min:  breakpoint-min($name, $breakpoints);
  $next: breakpoint-next($name, $breakpoints);
  $max:  breakpoint-max($next);

  @if $min != null and $max != null {
    @media (min-width: $min) and (max-width: $max) {
      @content;
    }
  } @else if $max == null {
    @include media-breakpoint-up($name, $breakpoints) {
      @content;
    }
  } @else if $min == null {
    @include media-breakpoint-down($next, $breakpoints) {
      @content;
    }
  }
}

// Pseudo-Class Variants

$variant-position: 'before' !default;
$variant-namespace: '\:' !default;
$option-character: '-' !default;

@function _remove($list, $value) {
    $result: ();
    @for $i from 1 through length($list) {
        @if nth($list, $i) != $value {
            $result: append($result, nth($list, $i));
        }
    }
    @return $result;
}

@function _selector($variant: null) {
    $selectors: ();

    @each $selector in & {
        $selector: nth($selector, 1);
        @if type-of($selector) == "string" {
            $selector: str-slice($selector, 2);
        }

        @if $variant {
            @if $variant-position == "after" {
                $selector: "#{$selector}#{$variant-namespace}#{$variant}";
            } @else {
                $selector: "#{$variant}#{$variant-namespace}#{$selector}";
            }
        }

        @if $selector {
            $selectors: append($selectors, ".#{$selector}", comma);
        }
    }
    @return $selectors;
}

@function _pseudo-class($selector, $pseudo-class: null) {
    @if $pseudo-class {
        $selector: selector-nest($selector, "&:#{$pseudo-class}");
    }
    @return $selector;
}

@mixin _variant($variant) {
    $pseudo-class: $variant;
    $group: null;

    @if type-of($variant) == "string" and str-index($variant, "group-") {
        $pseudo-class: str-slice($pseudo-class, 7);
        $group: ".group";
    }

    $selector: _selector($variant);
    @if $group {
        #{_pseudo-class($group, $pseudo-class)} {
            #{$selector} {
                @content;
            }
        }
    } @else {
        #{_pseudo-class($selector, $pseudo-class)} {
            @content;
        }
    }
}

@mixin _io($variants) {
    @if & {
        @include _variant(null) {
            @content;
        }
        @each $variant in $variants {
            @include _variant($variant) {
                @content;
            }
        }
    } @else {
        @content($variants);
    }
}

@mixin variants($variants: ()) {
    @at-root {
        @include _io($variants) using ($data...) {
            @content ($data...);
        }
    }
}

@mixin options($options, $variants: ()) {
    @if & {
        @each $key, $value in $options {
            &#{$option-character}#{$key} {
                @include variants($variants) {
                    @content ($value);
                }
            }
        }
    } @else {
        @include variants($variants) using ($props...) {
            @each $key, $value in $options {
                .#{$key} {
                    @include variants($props...) {
                        @content ($value);
                    }
                }
            }
        }
    }
}

// .test-class {
//   @include variants('hover' 'focus') {
//     color: #FFE135;
//   }
// }

// Variables

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
) !default;

@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");

$utilities: () !default;
$utilities: map-merge(
    (
    "float": (
      // if variants option contain a data in this case
      // it contain "hover" means it will generate Pseudo-Class "hover"
      // for this Utility "float".
      variants: ('hover'),
      responsive: true,
      property: float,
      values: left
    ),
    ),
    $utilities
);

// Utility generator

@mixin generate-utility($utility, $infix, $is-rfs-media-query: false) {
  $values: map-get($utility, values);
  
  @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
    $values: zip($values, $values);
  }

  @each $key, $value in $values {
    
    $variants: map-get($utility, variants);
        
    @if type-of($variants) == "string" {
        $variants: append((), $variants);
    }
    
    $properties: map-get($utility, property);

    @if type-of($properties) == "string" {
      $properties: append((), $properties);
    }

    $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
    $property-class: if($property-class == null, "", $property-class);

    $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);

    $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");

    @if map-get($utility, rfs) {
      @if $is-rfs-media-query {
        $val: rfs-value($value);
        $value: if($val == rfs-fluid-value($value), null, $val);
      }
      @else {
        $value: rfs-fluid-value($value);
      }
    }

    @if $value != null {
      .#{$infix + $property-class + $property-class-modifier} {
        @each $property in $properties {
            @include variants($variants) {
              #{$property}: $value if($enable-important-utilities, !important, null);
            }
        }
      }
    }
  }
}

// stylelint-disable property-blacklist, scss/dollar-variable-default

// SCSS RFS mixin
//
// Automated responsive values for font sizes, paddings, margins and much more
//
// Licensed under MIT (https://github.com/twbs/rfs/blob/master/LICENSE)

// Configuration

// Base value
$rfs-base-value: 1.25rem !default;
$rfs-unit: rem !default;

@if $rfs-unit != rem and $rfs-unit != px {
  @error "`#{$rfs-unit}` is not a valid unit for $rfs-unit. Use `px` or `rem`.";
}

// Breakpoint at where values start decreasing if screen width is smaller
$rfs-breakpoint: 1200px !default;
$rfs-breakpoint-unit: px !default;

@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {
  @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
}

// Resize values based on screen height and width
$rfs-two-dimensional: false !default;

// Factor of decrease
$rfs-factor: 10 !default;

@if type-of($rfs-factor) != number or $rfs-factor <= 1 {
  @error "`#{$rfs-factor}` is not a valid  $rfs-factor, it must be greater than 1.";
}

// Mode. Possibilities: "min-media-query", "max-media-query"
$rfs-mode: min-media-query !default;

// Generate enable or disable classes. Possibilities: false, "enable" or "disable"
$rfs-class: false !default;

// 1 rem = $rfs-rem-value px
$rfs-rem-value: 16 !default;

// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
$rfs-safari-iframe-resize-bug-fix: false !default;

// Disable RFS by setting $enable-rfs to false
$enable-rfs: true !default;

// Cache $rfs-base-value unit
$rfs-base-value-unit: unit($rfs-base-value);

// Remove px-unit from $rfs-base-value for calculations
@if $rfs-base-value-unit == px {
  $rfs-base-value: $rfs-base-value / ($rfs-base-value * 0 + 1);
}
@else if $rfs-base-value-unit == rem {
  $rfs-base-value: $rfs-base-value / ($rfs-base-value * 0 + 1 / $rfs-rem-value);
}

// Cache $rfs-breakpoint unit to prevent multiple calls
$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);

// Remove unit from $rfs-breakpoint for calculations
@if $rfs-breakpoint-unit-cache == px {
  $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);
}
@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" {
  $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);
}

// Calculate the media query value
$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit});
$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);

// Internal mixin used to determine which media query needs to be used
@mixin _rfs-media-query {
  @if $rfs-two-dimensional {
    @if $rfs-mode == max-media-query {
      @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
        @content;
      }
    }
    @else {
      @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
        @content;
      }
    }
  }
  @else {
    @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
      @content;
    }
  }
}

// Internal mixin that adds disable classes to the selector if needed.
@mixin _rfs-rule {
  @if $rfs-class == disable and $rfs-mode == max-media-query {
    // Adding an extra class increases specificity, which prevents the media query to override the property
    &,
    .disable-rfs &,
    &.disable-rfs {
      @content;
    }
  }
  @else if $rfs-class == enable and $rfs-mode == min-media-query {
    .enable-rfs &,
    &.enable-rfs {
      @content;
    }
  }
  @else {
    @content;
  }
}

// Internal mixin that adds enable classes to the selector if needed.
@mixin _rfs-media-query-rule {

  @if $rfs-class == enable {
    @if $rfs-mode == min-media-query {
      @content;
    }

    @include _rfs-media-query {
      .enable-rfs &,
      &.enable-rfs {
        @content;
      }
    }
  }
  @else {
    @if $rfs-class == disable and $rfs-mode == min-media-query {
      .disable-rfs &,
      &.disable-rfs {
        @content;
      }
    }
    @include _rfs-media-query {
      @content;
    }
  }
}

// Helper function to get the formatted non-responsive value
@function rfs-value($values) {
  // Convert to list
  $values: if(type-of($values) != list, ($values,), $values);

  $val: '';

  // Loop over each value and calculate value
  @each $value in $values {
    @if $value == 0 {
      $val: $val + ' 0';
    }
    @else {
      // Cache $value unit
      $unit: if(type-of($value) == "number", unit($value), false);

      @if $unit == px {
        // Convert to rem if needed
        $val: $val + ' ' + if($rfs-unit == rem, #{$value / ($value * 0 + $rfs-rem-value)}rem, $value);
      }
      @else if $unit == rem {
        // Convert to px if needed
        $val: $val + ' ' + if($rfs-unit == px, #{$value / ($value * 0 + 1) * $rfs-rem-value}px, $value);
      }
      @else {
        // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
        $val: $val + ' ' + $value;
      }
    }
  }

  // Remove first space
  @return unquote(str-slice($val, 2));
}

// Helper function to get the responsive value calculated by RFS
@function rfs-fluid-value($values) {
  // Convert to list
  $values: if(type-of($values) != list, ($values,), $values);

  $val: '';

  // Loop over each value and calculate value
  @each $value in $values {
    @if $value == 0 {
      $val: $val + ' 0';
    }

    @else {
      // Cache $value unit
      $unit: if(type-of($value) == "number", unit($value), false);

      // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
      @if not $unit or $unit != px and $unit != rem {
        $val: $val + ' ' + $value;
      }

      @else {
        // Remove unit from $value for calculations
        $value: $value / ($value * 0 + if($unit == px, 1, 1 / $rfs-rem-value));

        // Only add the media query if the value is greater than the minimum value
        @if abs($value) <= $rfs-base-value or not $enable-rfs {
          $val: $val + ' ' +  if($rfs-unit == rem, #{$value / $rfs-rem-value}rem, #{$value}px);
        }
        @else {
          // Calculate the minimum value
          $value-min: $rfs-base-value + (abs($value) - $rfs-base-value) / $rfs-factor;

          // Calculate difference between $value and the minimum value
          $value-diff: abs($value) - $value-min;

          // Base value formatting
          $min-width: if($rfs-unit == rem, #{$value-min / $rfs-rem-value}rem, #{$value-min}px);

          // Use negative value if needed
          $min-width: if($value < 0, -$min-width, $min-width);

          // Use `vmin` if two-dimensional is enabled
          $variable-unit: if($rfs-two-dimensional, vmin, vw);

          // Calculate the variable width between 0 and $rfs-breakpoint
          $variable-width: #{$value-diff * 100 / $rfs-breakpoint}#{$variable-unit};

          // Return the calculated value
          $val: $val + ' calc(' + $min-width + if($value < 0, ' - ', ' + ') + $variable-width + ')';
        }
      }
    }
  }

  // Remove first space
  @return unquote(str-slice($val, 2));
}

// RFS mixin
@mixin rfs($values, $property: font-size) {
  @if $values != null {
    $val: rfs-value($values);
    $fluidVal: rfs-fluid-value($values);

    // Do not print the media query if responsive & non-responsive values are the same
    @if $val == $fluidVal {
      #{$property}: $val;
    }
    @else {
      @include _rfs-rule {
        #{$property}: if($rfs-mode == max-media-query, $val, $fluidVal);

        // Include safari iframe resize fix if needed
        min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
      }

      @include _rfs-media-query-rule {
        #{$property}: if($rfs-mode == max-media-query, $fluidVal, $val);
      }
    }
  }
}

// Shorthand helper mixins
@mixin font-size($value) {
  @include rfs($value);
}

@mixin padding($value) {
  @include rfs($value, padding);
}

@mixin padding-top($value) {
  @include rfs($value, padding-top);
}

@mixin padding-right($value) {
  @include rfs($value, padding-right);
}

@mixin padding-bottom($value) {
  @include rfs($value, padding-bottom);
}

@mixin padding-left($value) {
  @include rfs($value, padding-left);
}

@mixin margin($value) {
  @include rfs($value, margin);
}

@mixin margin-top($value) {
  @include rfs($value, margin-top);
}

@mixin margin-right($value) {
  @include rfs($value, margin-right);
}

@mixin margin-bottom($value) {
  @include rfs($value, margin-bottom);
}

@mixin margin-left($value) {
  @include rfs($value, margin-left);
}

// Loop over each breakpoint
@each $breakpoint in map-keys($grid-breakpoints) {

  // Generate media query if needed
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    // Loop over each utility property
    @each $key, $utility in $utilities {
      // The utility can be disabled with `false`, thus check if the utility is a map first
      // Only proceed if responsive media queries are enabled or if it's the base media query
      @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
        @include generate-utility($utility, $infix);
      }
    }
  }
}

// RFS rescaling
@media (min-width: $rfs-mq-value) {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
      // Loop over each utility property
      @each $key, $utility in $utilities {
        // The utility can be disabled with `false`, thus check if the utility is a map first
        // Only proceed if responsive media queries are enabled or if it's the base media query
        @if type-of($utility) == "map" and map-get($utility, rfs) {
          @include generate-utility($utility, $infix, true);
        }
      }
    }
  }
}


// Print utilities
@media print {
  @each $key, $utility in $utilities {
    // The utility can be disabled with `false`, thus check if the utility is a map first
    // Then check if the utility needs print styles
    @if type-of($utility) == "map" and map-get($utility, print) == true {
      @include generate-utility($utility, "-print");
    }
  }
}

Try to use this code in sassmeister. before read my problem.

The problem I faced :

I want to Change Breakpoint Infix (xs, sm, md, lg, xl, xxl) position when Pseudo-Class Variants Option is activated?

What activated means in this situation ?

it mean that it contain a Pseudo-Class inside variants option.

Here is the Result before doing this trick :

.hover:sm:float-left:hover {
   float: left !important;
}

Here is the Result that I expected after doing this trick :

.sm:hover:float-left:hover {
   float: left !important;
}

means move the Breakpoint Infix (xs, sm, md, lg, xl, xxl) to first step as you can see.

html – How to position a div at the end of a navbar? With bootstrap 4

I need to position a div at the end of the navbar, and when viewing it on a mobile device, it hides with the rest of the menu

I leave part of the html.

.navbar {
          padding:0rem;
          margin-bottom:2rem;
        }
        .nav-link
        {
            color: White !important;
            padding-top: 5px;
            padding-bottom: 5px;
            font-weight: 500;
            }
        .nav-item:hover
        {
            background-color: White;
            }
            
        .nav-item > .nav-link:hover
        {
            color: #0071BA !important;
            }
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
</head>
<body>
<header>
        <nav class="navbar navbar-expand-md sticky-top" style="background-color:#0071BA;">
   <a class="navbar-brand" style="width: 240px;color: White;">Logo</a>
  <div class="navbar-toggler-right">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" style="color: White; border-color: White;">
                <i class="fas fa-bars"></i>
            </button>
  </div>
  <div class="collapse navbar-collapse flex-column " id="navbar">
    <ul id="nav" class="navbar-nav w-100 px-3" style="margin: 0 !important;">
        <li class="nav-item"><a class="nav-link" Width="104px" href="https://stackoverflow.com/#"style="white-space: nowrap;">Item<a> </li>
        <li class="nav-item" ><a class="nav-link" Width="104px" href="https://stackoverflow.com/#"style="white-space: nowrap;">Item<a> </li>
        <li class="nav-item"><a class="nav-link" Width="104px" href="https://stackoverflow.com/#"style="white-space: nowrap;">Item<a> </li>
        <li class="nav-item" ><a class="nav-link" Width="104px" href="https://stackoverflow.com/#"style="white-space: nowrap;">Item<a> </li>
      </ul>
      <ul id="subnav" class="navbar-nav w-100 px-3" style="margin: 0 !important;">
        <li class="nav-item"><a class="nav-link" Width="104px" href="https://stackoverflow.com/#"style="white-space: nowrap;">Item<a> </li>
        <li class="nav-item" ><a class="nav-link" Width="104px" href="https://stackoverflow.com/#"style="white-space: nowrap;">Item<a> </li>
        <li class="nav-item"><a class="nav-link" Width="104px" href="https://stackoverflow.com/#"style="white-space: nowrap;">Item<a> </li>
        <li class="nav-item" ><a class="nav-link" Width="104px" href="https://stackoverflow.com/#"style="white-space: nowrap;">Item<a> </li>
      </ul>
      <div id="divCierra" class="pull-right navbar-toggler-right" style="background-color: white;height: 80px;vertical-align: middle;border: 1px solid #0071BA;display: flex;align-items: center;float: left;"><div id="div2" style="
    background-color: white;
    width: 100%;"><a ID="btnCerrar" class="CerrarCss" >Cerrar sesión<a>
    </div>
    </div>
  </div>
</nav>
</header>
</body>
</html>

If you notice, the logout is under the two menus, but I need it to occupy the full height of the navbar and to be positioned at the end of it.

Something like that:

enter image description here

When reviewing it on a mobile device, logging out is very messy, but I need it to merge with the rest of the menu, as one more item

I will create responsive web design with bootstrap for $50

I will create responsive web design with bootstrap

Hi There,

i am a professional web design.

I can provide technical services in the following areas of web development-, JavaScript, JQuery, HTML, CSS bootstrap and Responsiveness.

I will design your business, photography, blogging, agency, and multi-purpose that suit with Landing page website.
KEY FEATURES

  • High-quality Design with pixel perfect graphics
  • Valid and efficient HTML7 & CSS3 code
  • Device friendly website design
  • Compatible with all Browsers
  • Attractive Fonts
  • Useful design elements included
  • Unlimited Revisions to Meet Your Need
  • Professional, Classy, Beautiful
  • 100% Satisfaction
  • High Converting
  • Original & Custom designed only for you
  • Html, css,jquery,javascript
  • Unlimited Revisions

What can I do?

  • Multipurpose HTML Website
  • Under construction page
  • Full website

Why choose me?

  • Good communicator.
  • Website according to your exact requirement.
  • High quality work.
  • 100% client satisfaction.

I will also provide help in any kind of work related to Web development FREE OF COST.

*** 100 % Satisfaction ***

.