How correctly to upgrade my pages to Bootstrap v5.1.3

Hello,

I got https://technext.github.io/space/v1.0.0/ template for frontend part of my site and in its
source I see link

<script src="vendors/bootstrap/bootstrap.min.js"></script>

and checking it I see :

`Bootstrap v5.0.1 …

and I did not find any ref to css file, but ref to

/assets/css/theme.min.css

with header :

  • Bootstrap v5.0.0-alpha1

Now I want to upgrade this page to Bootstrap v5.1.3 .

I see files bootstrap.css and bootstrap.js.
I suppose I need to replace theser files but what better top deal with
https://technext.github.io/space/v1.0.0/assets/css/theme.min.css ?

I suppose that is replacement of bootstrap.css…

How better to make?

Thanks!

If your theme was specifically built using the alpha version then you may not be able to update to a newer version.

It looks as though your theme css has been tacked on to the end of the bootstrap alpha css rather than as a custom theme. If it was done properly then you could have just updated the bootstrap css and see what happens. You should never change the original bootstrap files but use a custom css file instead.

I can’t possibly look through all 16,000 lines of code to see if the theme developer has changed the default bootstrap css files or not.

You could try locating the theme css which seems to be at about line 16000 of the un-minified theme.css and looks like this.

html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: smooth;
  scroll-padding-top: 6.3125rem;
}
header {
  position: relative;
  z-index: 1020;
  background: #fffefe;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
pre,
code {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
section {
  position: relative;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media (min-width: 992px) {
  section {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }
}
input,
button,
select,
optgroup,
textarea,
label,
.alert,
.badge,
.blockquote-footer,
.btn,
.navbar,
.pagination,
.valid-feedback,
.invalid-feedback {
  font-family: "Yantramanav", "Open Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
}
pre {
  margin: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
strong {
  font-weight: 600;
}
label {
  font-weight: 500 !important;
  margin-bottom: 0.5rem;
}
ol,
ul {
  padding-left: 1.1rem;
}
.firefox .dropcap:first-letter {
  margin-top: 0.175em;
}
.chrome .btn-close {
  background-clip: unset;
}
.text-smallcaps {
  font-variant: small-caps;
}
.text-superscript {
  vertical-align: super;
}
.text-word-break {
  word-break: break-word;
}
.font-sans-serif {
  font-family: "Yantramanav", "Open Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
}
.font-base {
  font-family: "Yantramanav", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
}
.fs-error {
  font-size: 7rem;
}
@media (min-width: 576px) {
  .fs-error {
    font-size: 10rem;
  }
}
.text-justify {
  text-align: justify !important;
}
.text-gradient {
  background: -o-linear-gradient(40deg, #fb3c00, #ffb800);
  background: linear-gradient(50deg, #fb3c00, #ffb800);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bg-holder {
  position: absolute;
  width: 100%;
  min-height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  will-change: transform, opacity, filter;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-repeat: no-repeat;
  z-index: 0;
}
.bg-holder.bg-right {
  left: auto;
  right: 0;
}
.bg-holder.overlay:before {
  position: absolute;
  content: "";
  background: rgba(0, 0, 0, 0.25);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.bg-holder.overlay-0:before {
  background: rgba(0, 0, 0, 0.7);
}
.bg-holder.overlay-1:before {
  background: rgba(0, 0, 0, 0.55);
}
.bg-holder.overlay-2:before {
  background: rgba(0, 0, 0, 0.4);
}
.bg-holder.overlay-light:before {
  background: rgba(255, 255, 255, 0.8);
}
.bg-holder .bg-video {
  position: absolute;
  display: block;
  z-index: -1;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
  height: 100%;
  min-width: 100%;
}
.bg-holder .bg-youtube {
  position: absolute !important;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.bg-light-gradient {
  background: #ffffff;
  opacity: 0.85;
}
.bg-primary-gradient {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(-42.47%, rgba(255, 206, 103, 0.22)),
    to(rgba(253, 237, 202, 0))
  );
  background: -o-linear-gradient(
    top,
    rgba(255, 206, 103, 0.22) -42.47%,
    rgba(253, 237, 202, 0) 100%
  );
  background: linear-gradient(
    180deg,
    rgba(255, 206, 103, 0.22) -42.47%,
    rgba(253, 237, 202, 0) 100%
  );
}
.bg-dark-gradient {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(rgba(33, 33, 33, 0.411)),
    to(rgba(33, 33, 33, 0))
  );
  background: -o-linear-gradient(
    bottom,
    rgba(33, 33, 33, 0.411) 0%,
    rgba(33, 33, 33, 0) 100%
  );
  background: linear-gradient(
    0deg,
    rgba(33, 33, 33, 0.411) 0%,
    rgba(33, 33, 33, 0) 100%
  );
}
.overflow-hidden[class*="rounded"] {
  -webkit-mask-image: radial-gradient(#fffefe, #000);
  mask-image: radial-gradient(#fffefe, #000);
}
.border-top-2 {
  border-top-width: 0.125rem !important;
}
.border-end-2 {
  border-right-width: 0.125rem !important;
}
.border-bottom-2 {
  border-bottom-width: 0.125rem !important;
}
.border-start-2 {
  border-left-width: 0.125rem !important;
}
.hr-vertical {
  border-left: 2px solid #cfcfcf;
}
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  position: relative;
}
.all-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.flex-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.flex-between-center {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.flex-end-center {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.flex-1 {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.link-black {
  color: #000 !important;
}
.link-black:hover,
.link-black:focus {
  color: #000 !important;
}
.link-100 {
  color: #fcfcfc !important;
}
.link-100:hover,
.link-100:focus {
  color: #d6d6d6 !important;
}
.link-200 {
  color: #f5f5f5 !important;
}
.link-200:hover,
.link-200:focus {
  color: #cfcfcf !important;
}
.link-300 {
  color: #eee !important;
}
.link-300:hover,
.link-300:focus {
  color: #c8c8c8 !important;
}
.link-400 {
  color: #e0e0e0 !important;
}
.link-400:hover,
.link-400:focus {
  color: #bababa !important;
}
.link-500 {
  color: #bdbdbd !important;
}
.link-500:hover,
.link-500:focus {
  color: #979797 !important;
}
.link-600 {
  color: #9e9e9e !important;
}
.link-600:hover,
.link-600:focus {
  color: #787878 !important;
}
.link-700 {
  color: #757575 !important;
}
.link-700:hover,
.link-700:focus {
  color: #4f4f4f !important;
}
.link-800 {
  color: #616161 !important;
}
.link-800:hover,
.link-800:focus {
  color: #3b3b3b !important;
}
.link-900 {
  color: #424242 !important;
}
.link-900:hover,
.link-900:focus {
  color: #1c1c1c !important;
}
.link-1000 {
  color: #23242a !important;
}
.link-1000:hover,
.link-1000:focus {
  color: #000 !important;
}
.link-white {
  color: #fffefe !important;
}
.link-white:hover,
.link-white:focus {
  color: #ffb2b2 !important;
}
.hover-top-shadow {
  -webkit-transform: translateY(0) translateZ(0);
  transform: translateY(0) translateZ(0);
  -webkit-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.hover-top-shadow.hover-top-shadow-lg:hover,
.hover-top-shadow.hover-top-shadow-lg:focus {
  -webkit-transform: translateY(-0.3125rem) translateZ(0);
  transform: translateY(-0.3125rem) translateZ(0);
}
.hover-top-shadow:hover,
.hover-top-shadow:focus {
  -webkit-transform: translateY(-0.125rem) translateZ(0);
  transform: translateY(-0.125rem) translateZ(0);
  -webkit-box-shadow: 0 0 0.5rem 0 rgba(255, 201, 40, 0.8) !important;
  box-shadow: 0 0 0.5rem 0 rgba(255, 201, 40, 0.8) !important;
}
.shadow-transition {
  -webkit-box-shadow: 0 1.5625rem 2.8125rem rgba(66, 66, 66, 0.075);
  box-shadow: 0 1.5625rem 2.8125rem rgba(66, 66, 66, 0.075);
  -webkit-transition: -webkit-box-shadow 0.4s ease;
  transition: -webkit-box-shadow 0.4s ease;
  -o-transition: box-shadow 0.4s ease;
  transition: box-shadow 0.4s ease;
  transition: box-shadow 0.4s ease, -webkit-box-shadow 0.4s ease;
}
.shadow-warning {
  -webkit-box-shadow: 0 0 3rem 0 rgba(255, 201, 40, 0.3) !important;
  box-shadow: 0 0 3rem 0 rgba(255, 201, 40, 0.3) !important;
}
.shadow-icon {
  -webkit-filter: drop-shadow(5px 5px 5px rgba(255, 201, 40, 0.3));
  filter: drop-shadow(5px 5px 5px rgba(255, 201, 40, 0.3));
}
.icon-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.icon-group .icon-item:not(:last-child) {
  margin-right: 0.5rem;
}
.icon-item {
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #757575;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  height: 2.5rem;
  width: 2.5rem;
  border: 0;
  font-size: 0.875rem;
  -webkit-box-shadow: 0 1.5625rem 2.8125rem rgba(0, 87, 255, 0.15);
  box-shadow: 0 1.5625rem 2.8125rem rgba(0, 87, 255, 0.15);
}
.icon-item:hover,
.icon-item:focus {
  background-color: #f5f5f5;
}
.icon-item.icon-item-sm {
  height: 1.875rem;
  width: 1.875rem;
}
.icon-item.icon-item-lg {
  height: 2.75rem;
  width: 2.75rem;
}
.fontawesome-i2svg-active .icon-indicator {
  opacity: 1;
}
.fit-cover {
  -o-object-fit: cover;
  object-fit: cover;
}
.z-index-1 {
  z-index: 1;
}
.z-index-2 {
  z-index: 2 !important;
}
.z-index--1 {
  z-index: -1;
}
.sticky-sidebar {
  position: -webkit-sticky;
  position: sticky;
  z-index: 1020;
  top: 5.3125rem;
}
.circle-dashed {
  border: 1px dashed #0e6fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 50%;
  width: 3.5rem;
  height: 3.5rem;
}
.hover-text-decoration-none:hover,
.hover-text-decoration-none:focus {
  text-decoration: none;
}
.resize-none {
  resize: none;
}
.collapsed .collapse-icon {
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.collapse-icon {
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
[data-dismiss="dropdown"] *,
[data-offset-top] *,
[data-toggle="collapse"] *,
[data-toggle="tooltip"] *,
[data-toggle="popover"] * {
  pointer-events: none;
}
.outline-none {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.outline-none:hover,
.outline-none:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.vertical-line:after {
  position: absolute;
  content: "";
  height: 75%;
  width: 1px;
  background: #eee;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.vertical-line.vertical-line-400:after {
  background-color: #e0e0e0;
}
.transition-base {
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.transition-none {
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}
.fsp-75 {
  font-size: 75%;
}
.min-w-0 {
  min-width: 0;
}
.terms-sidebar .nav-link {
  color: #bdbdbd;
  font-weight: 500;
  font-family: "Yantramanav", "Open Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
}
.terms-sidebar .nav-link.active {
  color: #0e6fff;
}
.icon {
  padding: 1rem;
  border-radius: 15px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  background-color: rgba(255, 254, 254, 0.2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 254, 254, 0.3);
}
.icon-primary {
  color: #0e6fff;
}
.icon-secondary {
  color: #ffc928;
}
.icon-success {
  color: #79b93c;
}
.icon-info {
  color: #24ffea;
}
.icon-warning {
  color: #ffc928;
}
.icon-danger {
  color: #fd4032;
}
.icon-light {
  color: #f9fafd;
}
.icon-dark {
  color: #23242a;
}
.img-landing-banner {
  overflow: hidden;
  -webkit-transform: translateY(-3rem);
  -ms-transform: translateY(-3rem);
  transform: translateY(-3rem);
  margin-bottom: -8rem;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  -o-transition: transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  position: relative;
  display: block;
}
@media (min-width: 1540px) {
  .img-landing-banner {
    margin-bottom: -22rem;
  }
}
@media (min-width: 1200px) and (max-width: 1539.98px) {
  .img-landing-banner {
    margin-bottom: -18rem;
  }
}
.img-landing-banner:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 70%;
  -webkit-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}
.img-landing-banner:hover,
.img-landing-banner:focus {
  -webkit-transform: translateY(-5rem);
  -ms-transform: translateY(-5rem);
  transform: translateY(-5rem);
}
.img-landing-banner:hover:after,
.img-landing-banner:focus:after {
  opacity: 0;
}
.navbar-space {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#fff4d4),
    to(#fff)
  );
  background-image: -o-linear-gradient(#fff4d4, #fff);
  background-image: linear-gradient(#fff4d4, #fff);
}
.btn-glow {
  position: relative;
}
.btn-glow::before {
  content: "";
  height: 80%;
  width: 80%;
  position: absolute;
  top: 10%;
  left: 10%;
  display: inline-block;
  background-color: inherit;
  opacity: 0.55;
  -webkit-filter: blur(26px);
  filter: blur(26px);
  -webkit-transform: translateY(45%);
  -ms-transform: translateY(45%);
  transform: translateY(45%);
  z-index: -1;
  border-radius: 10px;
}
.btn-gradient:hover {
  -webkit-box-shadow: 0 10px 20px #d42da3, 0 6px 6px #0e6fff;
  box-shadow: 0 10px 20px #d42da3, 0 6px 6px #0e6fff;
}
.btn {
  color: #fffefe;
}
.hover-top {
  -webkit-transform: translateY(0) translateZ(0);
  transform: translateY(0) translateZ(0);
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.hover-top.hover-top-shadow-lg:hover,
.hover-top.hover-top-shadow-lg:focus {
  -webkit-transform: translateY(-0.3125rem) translateZ(0);
  transform: translateY(-0.3125rem) translateZ(0);
}
.hover-top:hover,
.hover-top:focus {
  -webkit-transform: translateY(-0.125rem) translateZ(0);
  transform: translateY(-0.125rem) translateZ(0);
  -webkit-box-shadow: 0.5rem 0.5rem 1.5rem rgba(110, 74, 156, 0.1) !important;
  box-shadow: 0.5rem 0.5rem 1.5rem rgba(110, 74, 156, 0.1) !important;
  background-color: #d42da3;
  color: #fffefe;
}
.hover-top:hover .heading-color,
.hover-top:focus .heading-color {
  color: #fffefe;
}
.hvr-icon-forward {
  -webkit-transition-duration: 0.1s;
  -o-transition-duration: 0.1s;
  transition-duration: 0.1s;
}
.hvr-icon-forward .hover-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.1s;
  -o-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  -o-transition-property: transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-icon-forward:hover .hover-icon,
.hvr-icon-forward:focus .hover-icon,
.hvr-icon-forward:active .hover-icon {
  -webkit-transform: translateX(4px);
  -ms-transform: translateX(4px);
  transform: translateX(4px);
}
.badge {
  line-height: 0.8125rem;
}
.badge-circle {
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 0.5rem;
}
@media (min-width: 768px) {
  .badge-circle {
    height: 3.4rem;
    width: 3.4rem;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 1rem;
  }
}
.badge-foodwagon {
  border-radius: 0 1.25rem 0 1rem;
}
.card-badge {
  position: absolute;
  top: 13rem;
  z-index: 1;
}
.card-actions {
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 100%;
}
.carousel-icon {
  width: auto;
}
.carousel-icon .carousel-control-prev-icon:hover {
  background-color: #fffefe !important;
}
.carousel-icon .carousel-control-next-icon:hover {
  background-color: #fffefe !important;
}
.card-span {
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  border: 0;
}
.card-span .card-span-img {
  position: absolute;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.input-group-icon {
  position: relative;
}
.input-group-icon .input-box {
  padding-left: 2.8rem;
  vertical-align: middle;
}
.input-group-icon .input-box-icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  color: #eee;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.form-foodwagon-control {
  border: 0 solid #e0e0e0;
  border-radius: 0.25rem;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  width: 10px;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' version='1.1' width='512' height='512' x='0' y='0' viewBox='0 0 451.847 451.847' style='enable-background:new 0 0 512 512' xml:space='preserve' class=''%3E%3Cg%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751 c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0 c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z' fill='%23607080' data-original='%23000000' style='' class=''/%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  padding: 0px;
  margin-left: auto;
  margin-right: auto;
}
.border-navbar-gradient {
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgba(255, 255, 255, 0)),
    color-stop(10.94%, rgba(255, 255, 255, 0.890625)),
    color-stop(86.46%, #fff),
    to(rgba(255, 255, 255, 0))
  );
  background: -o-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.890625) 10.94%,
    #fff 86.46%,
    rgba(255, 255, 255, 0) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.890625) 10.94%,
    #fff 86.46%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-backdrop-filter: blur(60px);
  backdrop-filter: blur(60px);
}
.backdrop {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.majestic-tabs {
  border-bottom: 0;
}
.majestic-tabs .nav-link {
  border: 2px solid transparent;
  color: #616161;
}
.majestic-tabs .nav-link:hover,
.majestic-tabs .nav-link:focus {
  border-color: transparent;
}
.majestic-tabs .nav-link.active,
.majestic-tabs .nav-item.show .nav-link {
  border-bottom-color: #f17228;
}

/

Try saving that as a separate custom css file and then use the new bootstrap v5 css istead of the theme.css.

I have no idea if it will work as the alpha css file seems to be about 7000 lines longer than the current version. One of the reasons why its best to wait until a version is established rather than jumping on the alpha bandwagon.

If its already working then why the need to change it anyway?

2 Likes

Thanks for your feedback!

That seems good reason.
I am PHP developer and not so deep in css/bootstrap to check code line by line.
Also I found this template and it seemed good for me and my task.
Could you, please, advice some other free bootstrap 5 templates good looking like technext (maybe with more elements)
which would be debveloped also in next bootstrap 5.x branches?

Sorry, unfortunately I have never used templates or themes as I generally write my own code to do the task in hand.

Maybe someone else can chime in if they have some suggestions?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.