Bootstrap 5

Creating breakpoint classes for classes that don't have media query ranges

Anjanesh Lekshminarayanan — Fri, 24 Jun 2022 08:10:37 GMT

Let's say you wanted a button full width on mobile and regular width (auto) on desktop.

You think you would do :

<form>

    <div class="mb-3">
        <label for="exampleFormControlInput1" class="form-label">Enter your email addresslabel>
        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
    div>

    <div class="d-none d-md-block">
        <button type="button" class="btn btn-primary text-white px-5 d-block ms-auto me-auto ms-md-auto me-md-0">Subscribe me to the Newsletterbutton>
    div>

    <div class="d-block d-sm-none">
        <button type="button" class="btn btn-warning text-white px-5 d-block ms-auto me-auto ms-md-auto me-md-0 w-100">Subscribe me to the Newsletterbutton>
    div>

form>

But this is duplicating HTML code just for the sake of responsiveness.

The regular CSS way is to define CSS for media queries for max-width:576px etc.

Bootstrap has a way to extend classes with custom attributes like color and style like the way I showed in this blog post where I also showed that certain bootstrap classes like text-center for all screens and text-md-start for left-alignment on medium sized screens and above thereby making it text-center for mobile devices only.

Now, you can also define breakpoints to existing classes which don't have breakpoint names in bootstrap.

For example : what if you want a button on a form with full width (w-100) on mobile screens and not full width (w-auto) on desktops ? There is no way we can do w-100 w-md-auto because there isn't a breakpoint for width to do w-md-auto. But we can create them and it's relatively simple.

We add this SASS code after @import "utilities";

$utilities: map-merge(
  $utilities, (
    "width": map-merge(
      map-get($utilities, "width"),
      ( responsive: true ),
    ),
  )
);

So the final instajobs.scss file will look like this :

$primary: #ff8200;

$instajobs-colors: (
    "ij-main": #00ac9f,
);

@import "functions";
@import "variables";

$theme-colors: map-merge($theme-colors, $instajobs-colors);

@import "maps";
@import "mixins";
@import "utilities";

$utilities: map-merge(
  $utilities, (
    "width": map-merge(
      map-get($utilities, "width"),
      ( responsive: true ),
    ),
  )
);

$utilities: map-merge(
  $utilities, (
    "height": map-merge(
      map-get($utilities, "height"),
      ( responsive: true ),
    ),
  )
);

@import "bootstrap";

Build it : sass scss/instajobs.scss css/instajobs.css

Now you can add it like :

<button type="button" class="btn btn-primary text-white px-5 d-block ms-auto me-auto ms-md-auto me-md-0 w-100 w-md-auto">Subscribe me to the Newsletter</button>

Reference : https://getbootstrap.com/docs/5.2/layout/breakpoints/

Aligning a Button in a Form

Anjanesh Lekshminarayanan — Thu, 23 Jun 2022 12:19:12 GMT

#1. If you're trying to center a button in a form, you can do it easily by placing a parent div to the button with class text-center.

<div class="text-center">
     <button type="button" class="btn btn-primary px-3">Subscribe me to the Newsletter</button>
</div>

Works. But that's one extra DOM element (parent DIV to the button) to required.

#2. What if you want to place the button to the right of the form ? One way is the add the classfloat-end to the button.

<button type="button" class="btn btn-primary px-3 float-end">Subscribe me to the Newsletterbutton>
<div class="clearfix">div>

Works. But with this we need to add a clearfix. That's again, an extra DOM element. Moreover, less floats, the better.

#3. The default btn class in bootstrap is of display: inline-block; for which ms-auto (margin-left:auto) and me-auto (margin-right:auto) have no effect. So, if we change the display to block, then can use mx-auto and ms-auto.

<button type="button" class="btn btn-primary px-3 d-block ms-auto">Subscribe me to the Newsletter</button>

<div class="container mt-5">

    <form>
        <div class="mb-3">
            <label for="exampleFormControlInput1" class="form-label">Enter your email address</label>
            <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
        </div>

        <div class="text-center">
            <button type="button" class="btn btn-primary px-3">Subscribe me to the Newsletter</button>
        </div>

        <button type="button" class="btn btn-primary px-3 float-end">Subscribe me to the Newsletter</button>

        <div class="clearfix"></div>

        <button type="button" class="btn btn-primary px-3 d-block float-end ms-auto">Subscribe me to the Newsletter</button>
    </form>

</div>

Custom Bootstrap Colors

Anjanesh Lekshminarayanan — Fri, 17 Jun 2022 13:18:53 GMT

Install the SASS compiler from https://sass-lang.com/install - preferably the dart version.

Download the source file : https://github.com/twbs/bootstrap/archive/v5.2.0-beta1.zip

Get into the downloaded folder : cd bootstrap-5.2.0-beta1 This will be our base folder.

Say you're creating a new job board website and your new website's project name is instajobs (prefix: ij-)

Create a instajobs.scss in scss folder - so it'll be scss/instajobs.scss and type in this :

$primary: #ff8200;

$instajobs-colors: (
    "ij-main": #00ac9f,
);

@import "functions";
@import "variables";

$theme-colors: map-merge($theme-colors, $instajobs-colors);

@import "bootstrap";

Here we are re-defining the primary color of Bootstrap to #ff8200
We are defining a brand new color to the theme $instajobs-colors as ij-main which is #00ac9f
We need to add $instajobs-colors to $theme-colors which we do via map-merge
But before we can do map-merge we have to include the functions and variables defined in bootstrap - @import "functions"; @import "variables"; since $theme-colors are deifned in scss/_variables.scss.
Finally we import bootstrap.scss

Run the following in terminal : sass scss/instajobs.scss css/instajobs.css

The above command will compile the entire bootstrap source files including our custom instajobs.scss to a generated file called instajobs.css in the css folder.

Create example.html in the base folder referencing css/instajobs.css

html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Custom Bootstrap Colors Demotitle>
    <link href="css/instajobs.css" rel="stylesheet" />
  head>
  <body>
    <h1>Hello, world!h1>

    <button type="button" class="btn btn-primary">Primarybutton>
    <button type="button" class="btn btn-secondary">Secondarybutton>
    <button type="button" class="btn btn-success">Successbutton>
    <button type="button" class="btn btn-danger">Dangerbutton>
    <button type="button" class="btn btn-warning">Warningbutton>
    <button type="button" class="btn btn-info">Infobutton>
    <button type="button" class="btn btn-light">Lightbutton>
    <button type="button" class="btn btn-dark">Darkbutton>

    <button type="button" class="btn btn-ij-main">instajobs main colorbutton>    

  body>
html>

Now open example.html in the browser by double-clicking the file in your folder.

You'll see something like this :

The primary color has been changed to an orange variant and a custom color called ij-main which is considered a main color for the instajobs site is something of a green shade.

Read more at : https://getbootstrap.com/docs/5.2/customize/sass/

MAJOR UPDATE :
This example SASS code in instajobs.scss works only from Bootstrap 5.2.x onwards, since in 5.2.x, the authors have segregated the theme-colors variables defined in _variables.scss from theme-colors-rgb, utilities-text-colors etc into another file called _maps.scss

@import "functions";
@import "variables";
@import "maps";

From Bootstrap 5.1 and below, the code in _maps.scss was in _variables.scss.

Footer at bottom - full height layout

Anjanesh Lekshminarayanan — Sat, 11 Jun 2022 05:44:46 GMT

<!doctype html>
<html lang="en">
<head>    
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Footer at Bottom when content is not page-full</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body class="min-vh-100 d-flex flex-column bg-primary">

<header class="p-3 bg-success">
    Header<br/>
    Content
</header>

<div class="container flex-grow-1 p-0 bg-secondary">

    <div class="d-flex">

        <div class="p-3 bg-danger">
            Left Content
        </div>

        <div class="flex-grow-1 p-3 bg-warning">
            Body<br/>
            Content
        </div>

    </div>

</div>

<footer class="p-3 bg-info">
    Footer<br/>
    Content<br/>
    &copy; 2022 Bootstrap
</footer>

</body>

</html>