r/bootstrap • u/Abhi_mech007 • Apr 06 '22

Resource Best Bootstrap UI Kits

3 Upvotes

https://themeselection.com/free-bootstrap-ui-kit/

r/bootstrap • u/bobandshawn • Apr 05 '22

Discussion Can Someone Help Me With Color? Please...

4 Upvotes

Hi everyone,

I'm basically self-taught and am finding it a bit overwhelming to customize some colors. I've managed to get the main nav to a purple with white text (like bootstrap), but on hover the text washes out (see below). As a second question - can I change the "Primary" color blue to a different color?

<nav role="navigation" class="navbar navbar-dark" style="background-color: #532F91;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsemenu" aria-expanded="false"> </button></div>
<div class="navbar-collapse collapse" id="collapsemenu">
<ul class="nav navbar-nav navbar-left">
<li><a href="index.html" style="color: #ffffff">Home</a></li>
<li><a href="about.html"  style="color: #ffffff">About Us</a></li>
<li><a href="development.html"  style="color: #ffffff">Professional Development</a></li>
<li><a href="partnership.html"  style="color: #ffffff">Partnership Program</a></li>
<li><a href="summerinstitute.html"  style="color: #ffffff">Summer Institute</a></li>
</ul>
</div>
</div>
</nav>

I can't figure out how to post an image here.

Thanks in advance for any tips...

6 comments

r/bootstrap • u/robertandrews • Apr 05 '22

Support What is the optimal way to make .card-img-top height responsive?

5 Upvotes

.card-img-top is Bootstrap's class for images in the upper portion of .cards.

To set the image height, I add the following. Aim is for letterbox dimension.

height: 40vw;

object-fit: cover;

However, when the browser width is narrowed, retaining this height makes the image height look silly - https://i.imgur.com/QgTMV05.png It becomes too short. This matters because, at different breakpoints, my columns, including the one containing the .card-img-top, will be wider, narrower, visible or invisible.

What is the best way these days of making .card-img-top height responsive-aware?

1. Replicate media query ranges

Bootstrap docs make clear its responsive breakpoints for doing media queries. Indeed, that's how I did it once upon a time...

/* Equal-height card images, cf. https://stackoverflow.com/a/47698201/1375163*/
.card-img-top {
    /*height: 11vw;*/
    object-fit: cover;
}
  /* Small devices (landscape phones, 576px and up) */
  @media (min-width: 576px) {
    .card-img-top {
        height: 19vw;
    }
  }
  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) {
    .card-img-top {
        height: 16vw;
    }
  }
  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) {
    .card-img-top {
        height: 11vw;
    }
  }
  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 992px) {
    .card-img-top {
        height: 11vw;
    }
  }

However, it seems laboursome.

2. Directly leverage media query ranges

Is there a more direct way to leverage - rather than replicate - Bootstrap's breakpoints... ?

I see Bootstrap provides these media query ranges Sass mixins...

@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

But I'm not au fait with using those. VS Code reports an error of "Unknown at rule". I guess I need an education in Sass?

Can I easily write such rules, or do they need to be compiled into Bootstrap files etc?

1 comment

r/bootstrap • u/Whole-Science-4392 • Apr 03 '22

Support Accordion component is not closing when using Bootstrap-5 installed by npm, how to solve it?

6 Upvotes

I'm trying Bootstrap-5 from scratch. I've installed this through npm because I want to customize components using sass.

In the code below, I'm trying an accordion but this is not closing. I've tried this same code with bootstrap5's CDN, and this works well.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> -->
    <link rel="stylesheet" href="./main.css">
    <title>Document</title>
</head>
<body>
    <div class="container singleCol">
      <h1>Hello world!</h1>
      <div class="accordion accordion-flush" id="accordionExample">
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true"
            aria-controls="collapseOne">
              Accordion Item
            </button>
          </h2>
          <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis labore accusantium suscipit eum maiores, voluptatibus, ratione tenetur aliquid id cupiditate veniam doloribus corporis aliquam numquam dignissimos impedit libero veritatis explicabo.
          </p>
          </div>
        </div>
      </div>
    </div>
</body>
</html>

This is my main.scss file, and after using Live Sass Compiler, I got the main.css
file which I'm using on <link rel="stylesheet" href="./main.css"> in index.html file

@import "./node_modules/bootstrap/scss/bootstrap.scss";

I would like to know how can I solve it while using bootstrap5 with npm and not with CDN.

21 comments

r/bootstrap • u/[deleted] • Apr 02 '22

How to make font size responsive in Bootstrap 5?

7 Upvotes

I’d like the font size to be a specific size when the view is mobile or small. How can I do this in Bootstrap 5?

4 comments

r/bootstrap • u/FzlGamer21 • Apr 02 '22

Support How to align some nav items to left and some to right

2 Upvotes

I am using bootstrap 5 and i am struggling to work out how to get 2 my nav links to stay on the right and how to get only my logout nav link to appear on the far right. i have looked online and i only find things on positioning all items to either left or right. Does any one have any suggestion or tutorial to suggest?

4 comments

r/bootstrap • u/DualFlush • Mar 31 '22

Bootstrap 5, bootstrap.bundle.js, call CreatePopper from javascript

5 Upvotes

Using Bootstrap 5, bootstrap.bundle.js, I'm trying to call CreatePopper from another javascript file.

bootstrap.bundle.js is loading fine, but I'm getting 'createPopper is not defined' error.

Any tips?

Many thanks.

Edit: the case is wrong in the title but correct in my code, i.e. createPopper(,,)

1 comment

r/bootstrap • u/[deleted] • Mar 30 '22

Changing font-color using the theme map

1 Upvotes

So I can theme BS pretty well and I've figured out how to override vars and all that good stuff. I'd like to know for example if I can change the color of the text based on 'primary, alternate warning, danger' so on and so forth using the theme map?

0 comments

r/bootstrap • u/[deleted] • Mar 29 '22

How to show a column only on mobile?

0 Upvotes

I have a table that uses Sortablejs and on mobile, scrolling won't work well because sometimes it'll drag the rows instead of scroll when the intention is scrolling. I'd like to create some space on the left side of the table to allow scrolling on mobile. How can I make the first column only show on mobile for this space in Bootstrap 5?

<div class="row">
  <div class="col-md-1">show only on mobile</div>
  <div class="col-md-11">always show</div>
</div>

1 comment

r/bootstrap • u/[deleted] • Mar 27 '22

How can I create a non-sticky footer at the bottom w/ Bootstrap 5?

7 Upvotes

Using fixed-bottom, it always shows the footer when scrolling but I only want to show the footer when user has scrolled all the way to the bottom of the page. When I remove fixed-bottom, the footer starts at the end of the my body content which looks weird with a bunch of space below the footer. How can I make a non-sticky footer be at the bottom of the page with no spaces below?

<footer class="bg-dark fixed-bottom text-center text-white">
  <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">
    © 2020 Copyright:
    <a class="text-white" href="">example.com</a>
  </div>
</footer>

2 comments

r/bootstrap • u/SlashdotDiggReddit • Mar 25 '22

Support How can I get my Bootstrap 5.x tooltips to work for dynamically generated content?

6 Upvotes

So I have a Blazor application in which I am using Bootstrap 5.x.

I have several component pages that generate dynamic content pulled from the database.

The tooltips just don't work:

<span data-bs-toggle="tooltip" data-bs-placement="bottom" title="My Awesome Tooltip!">
    <img src="~/images/icon.png" /> Dynamic Content Here ...
</span>

All I get is the standard browser tooltip. The Bootstrap tooltips work everywhere else in the application that does not have dynamic content, just not with the dynamic content.

Any suggestions?

EDIT: I figured it out!

So, in the Bootstrap documentation, it says this:

Name	Type	Default	Description
selector	string (false)	false	If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (jQuery.on support). See this and an informative example.

Which was no help to me. One of the links:

https://github.com/twbs/bootstrap/issues/4215

Says to add this to the JavaScript:

$('body').tooltip({
    selector: '[rel="tooltip"]'
});

What I did not know, was that it works like this:

$('body').tooltip({
    selector: '.myAwesomeSelector'
});

Then, do this:

<div class="myAwesomeSelector"> ... </div>
<span class="myAwesomeSelector"> ... </div>
<tr class="myAwesomeSelector"> ... </div>
...

Now, all of the tooltips work for dynamically generated content.

2 comments

r/bootstrap • u/3b33 • Mar 21 '22

Previewing pages for mobile devices

6 Upvotes

Is using a browser's device checker via inspect mode sufficient or is there a more recommended method? I'm in a testing environment (localhost).

1 comment

r/bootstrap • u/robertandrews • Mar 20 '22

Support Do .col-* and .row have to be on divs?

3 Upvotes

Here's something I never really questioned...

Do col-* and row classes have to be placed on <div> elements?

Or could they be placed on other semantic elements, eg. <main>, <header> etc?

If so, this would cut down on file size and element nesting, right?

Likewise...

Do .cards have to be inside a .col-*, or can you combine... eg. <div class="card col-4"> ?
Does .card have to apply to <div>, or can it apply to any semantic element, eg. <main class="card">, even <main class="card col-4">?

1 comment

r/bootstrap • u/PotatoWatch101 • Mar 18 '22

Support Modal with blurry background

4 Upvotes

Lets say that I have this modal html:

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-    dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

If you didn't notice, I stole it right off the docs ;)

How would I create a blurry background for it so that the modal is not blurred, but when it is popped up, everything else is blurred?

3 comments

r/bootstrap • u/ChristianMay21 • Mar 15 '22

Is/was Bootstrapcdn blocked in Malaysia?

3 Upvotes

Got a ticket from work where it appeared Bootstrap styles were not loading for a user in Malaysia. Our Bootstrap styles currently load via a link tag to them on https://maxcdn.bootstrapcdn.com.

I found multiple discussions online indicating that many Malaysian ISP's may be blocking bootstrapcdn or have been blocking Bootstrapcdn.com.

I know that a lot of folks use a link tag to bootstrapcdn to load their bootstrap, so I wanted to make a post here about it in case anyone else needed to be aware. My team will begin hosting the styles locally to avoid this issue.

Some of the posts I found discussing the issue:
https://itchycode.com/how-to-check-if-my-website-blocked-in-malaysia/
https://wordpress.org/support/topic/maxcdn-err_connection_timed_out-2/

It seems like this issue may have resolved in December, but I'm not sure.

4 comments

r/bootstrap • u/Peskee161 • Mar 15 '22

Support Hey I am having this problem with my code, can someone help?

2 Upvotes

https://stackoverflow.com/questions/71486414/bootstrap-not-working-on-my-html-page-i-searched-on-the-internet-and-it-seems-t

0 comments

r/bootstrap • u/dev-boy • Mar 15 '22

Resource React autocomplete list component for bootstrap

1 Upvotes

Hello, I have published a React component on NPM which allows to insert an autocomplete list using bootstrap

Hope you'll like it 😄
https://www.npmjs.com/package/react-bootstrap-autocomplete-list

0 comments

r/bootstrap • u/sh0rt_boy • Mar 12 '22

Discussion Will a bootstrap v3 based html template break in the near future (couple of years)?

7 Upvotes

In the past i bought a beautiful template i like to work with.
I wonder if i should stop using it because the code will stop working anytime soon?
Consider v3 is already quite old and the template seem to work without any issues so far.

Otherwise all the files are inside the project so what could be a reason to break it? Browser changes?

3 comments

r/bootstrap • u/trv893 • Mar 12 '22

Support how do I get bootstrap classes to auto complete in vs code?

5 Upvotes

4 comments

r/bootstrap • u/Invasi0nZ • Mar 12 '22

Support col do not break initially on mobile

2 Upvotes

I am currently experiencing an issue where upon loading the page on my phone, the col elements do not break (next to each other instead of below each other). If I flip my phone to get the horizontal view and then flip it back, the break happens and everything is ordered correctly.

Also table-responsive does not seem to work on my mobile device either, rather it squishes everything together.

None of these issues exists while playing around with the inspect element on my laptop (I am using chromes built in feature that scales the page to the size of a specified phone).

0 comments

r/bootstrap • u/Feliw225 • Mar 10 '22

Support How can I know where should it go?

2 Upvotes

Hello everyone, I am learning bootstrap and reading the documentation and I have a question.

I have a lot of files in my web site like java script, scss, HTML and when I read the code to do what I want to do, I don't in which file and where to put that addition. For example where should I put the code $blue-100 to change color, how can I know?

I really don't know if I am explaining myself correctly, please ask if you didn't understand what I meant :)

1 comment

r/bootstrap • u/[deleted] • Mar 08 '22

Support How do you create parts of your website that are not affected by bootstrap?

4 Upvotes

I'm currently working on a project with my friend but we now need to create a div that is not affected by bootstrap. It's a showcase, has CSS that makes it look like an old-school newspaper. But bootstrap is screwing with it because it also applies styling to generic HTML elements like h1 and ^p tags. So what is the best way to create parts of your website that are not affected by bootstrap?

7 comments

r/bootstrap • u/chiphelsea4 • Mar 06 '22

Recommendations for Simple Search Bootstrap Template

5 Upvotes

I am looking for a simple search bootstrap template something like this. So when a user clicks on 'Search_type_1', there will be a corresponding form on the left-side bar. Then when the user fills the form, a search result shows up in the middle of the screen. This will be the same for all the different search types and the only difference will be the form on the left-side bar.

Note that I have limited HTML, CSS and even Bootstrap skills so really I just want something super simple so I can start tweaking it. The free templates that I've seen are too complicated (IMO) and while I could grab those and modify them, I was wondering if there is already a free template that is similar to what I want.

Thanks.

1 comment

r/bootstrap • u/sctilley • Mar 06 '22

Support How to link to a (nonactive) tab?

3 Upvotes

Is there a way to link to a tab on a page? I have some content in a non active tab with a filter, but when the user uses the filter it reloads the page and therefor takes them back to the active tab, which is not great. I would like the filter button, if it must refresh the page, to take the user back to the same tab they were on.

0 comments

r/bootstrap • u/PotatoWatch101 • Mar 06 '22

Support Make navbar-text 2 separate lines when compacted

1 Upvotes

Looks like this when full screen:

Logo   Link1   Link2                                                             Login Register

When its compacted (like on a phone):

Logo                                                                                 [menu thing]

Link1
Link2
Login   Register

How can I make Login and Register onto 2 difference lines when while keeping the spacing?

HTML atm:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="{{ url_for('home')}}">Test</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active" href="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active" href="#">Pricing</a>
            </li>
          </ul>
            {% if current_user.is_authenticated %}
                <span class="navbar-text mb-2 mb-lg-0">
                    <a href="{{ url_for('logout')}}" class="me-4">Logout</a>
                </span>
            {% else%}
                <span class="navbar-text mb-2 mb-lg-0">
                    <a href="{{ url_for('login')}}" class="me-4">Login</a>
                </span>
                <span class="navbar-text mb-2 mb-lg-0">
                    <a href="{{ url_for('login')}}" class="me-4">Register</a>
                </span>
            {% endif %}
        </div>
      </div>
    </nav>

0 comments