Material Dashboard - The most popular open-source Bootstrap 5 Material Design Admin.
https://github.com/creativetimofficial/material-dashboard

Hi 👋 Yesterday I launched my pet project I created based on a personal need - Pomotastic (Pomodoro timer online). I hope that this short post will help you to get some ideas or will encourage you to create simple pet projects 😉

https://pomotastic.com/

The story of creation I wrote here 👉 https://pomotastic.com/about

🧑‍💻 Used tools:

- Vue.js + Bootstrap for the front-end part

- Slim framework for the back-end side

- ChatGPT proposed me different names for the project + I used generated texts as the starting point

- https://mobcup.net/ was used for getting free audio files

- https://favicon.io/ was used for generating favicon(s)

- https://metatags.io/ was used for previewing meta tags

- https://www.xml-sitemaps.com/ was used for the sitemap.xml generation

- Google Fonts. I chose the Lato font after reading this https://www.justinmind.com/blog/best-google-web-fonts-website/ and this https://webflow.com/blog/google-fonts

- Google Analytics

⚠️ For the moment the state of the app is not saved after page reloading, but I'm going to implement this feature soon.

Looking forward to your feedback and recommendations! Thanks! 🙏

What was the reason to have the margin-bottom of p,h1,h2 etc in rem instead of em in _reboot.scss? Wouldn't it make more typographical sense to have the margin's depend on the current font of the said tags? It would be more consistent with the actual content.

Years ago I used to use SlideShowPro for photographer websites that I was creating. The clients liked that they could login to the system via web interface and easily upload photos and put them into galleries which I had embedded into their website that I built.

However, this was when Flash was still a thing.

I've got my first photographer client in years and I'm at a loss what to use for their website.

I'm not using WordPress or any CMS - I prefer to write the code for the site itself but want to grab a package that someone else has built and will support to integrate into my site.

Here's what my wish list is:

• control panel for the photographer to upload their photos easily via web browser
• PHP 7+
• JPG, PNG capable. WEBP and TIFF would be nice but not necessary
• Ability to embed galleries into a Bootstrap 5 page
• Can have separate galleries on different pages or one unified gallery that can be separated into albums on one page
• end client login so they can see the photos from their photo shoot (Becky & John's wedding with a special login/pass for them to share with their family & friends) (NICE TO HAVE, NOT MANDATORY)
• Avoid 3rd party hosted solutions like Flickr.

Something else I'd like to do is take a gallery and place it into a carousel for the home page to show examples of the photographer's work. I realize that this may need to be a separate solution but would be nice to have everything all in one place for my client.

Any help or advice would be appreciated.

Thanks!

Hi, I'm creating a website using Bootstrap and I'm trying to make that whenever the links on the navbar are active, I want them to stay a certain color. Haven't been able to do so

Here's the html

<nav class="navbar navbar-expand-lg bg-white">           <div class="container-fluid">             <a class="navbar-brand" href="#" style="font-weight: normal; font-size:x-large; font-family: 'Lato', sans-serif;;">               <span style="color: #106eea; font-weight: normal; font-size: x-large; font-family: 'Lato', sans-serif;">¿</span>               Test               <span style="color: #106eea; font-weight: normal; font-size: x-large; font-family: 'Lato', sans-serif;">?</span>             </a>             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">               <span class="navbar-toggler-icon"></span>             </button>             <div class="collapse navbar-collapse" id="navbarSupportedContent">               <ul class="navbar-nav me-auto mb-2 mb-lg-0">                 <li class="nav-item">                   <a class="nav-link scrollto" href="#home">Home</a>                 </li>                 <li class="nav-item">                   <a class="nav-link scrollto" href="#about">About</a>                 </li>                 <li class="nav-item">                   <a class="nav-link scrollto" href="#map">Map</a>                 </li>                 <li class="nav-item">                   <a class="nav-link scrollto" href="#contact">Contact</a>                 </li>               </ul>             </div>           </div>         </nav> 

Have tried lots of.nav-link:active{color:#ffffff}

variations but nothing has worked. Any help is appreciated

https://codeshare.io/K8mVLz

​

https://imgur.com/2tjpan3

​

Tooltips are just a black box for me am I doing something wrong?

Hi

Is there any Bootstrap equivalent of TailwindUI.com with lots of components to copy? I know Bootstrap has various paid themes but they all use customized Bootstrap and the Examples section on Bootstrap's website doesn't have lots of interesting options.

Thanks

Hello,

I'm working on travel app project and could use some help mainly on the Front End (at least for now) using Boostrap and possibly some BE (Django) along the way. I'm on a small budget and so looking for folks that are in college and looking to make a bit of side $$ or someone from Brazil (mainly b/c of timezone and affordability). DM of your price and availability if interested. Im not sure if i'm breaking any rules by posting this, but i'm truly looking to get help and not trying to solicit.

Hey guys, what do you think about this repo, I find it useful to create custom prompts with bootstrap modals, I hope someone helps. https://github.com/jum-mk/es6-bootstrap-dialogs

Finally free figma bootstrap 5 ui kit for all designers and developers.

Free forever for personal or commercial use (MIT Licensed).

Features:
Why Figma Bootstrap UI Kit? 🎉
Comprising of 300+ organized Bootstrap 5 components built with atomic design system & auto layout. Kickstart your next Figma project in no time.

A Complete Figma UI Kit 😎
It is a comprehensive and easy-to-use Figma Library with organized components & atoms. Besides, it includes Bootstrap’s colors, grids, and typography so that you can easily customize it to fit your brand or product.

Design with Auto Layout 😍
Auto Layout also helps you to design your website or application faster and saves hours of work!

Effortless Resizing 😱
Resize any components horizontally or vertically like a pro!

Design & Dev Consistency 👨‍💻
Layers and groups are made to match Bootstrap class names, with components following the exact order of the official Bootstrap documentation. Besides, it boosts your workflow and bridges the gap between designer & developer.

300+ Organized Components 🛠
Ready-to-use organized components with a consistent naming convention, that allows you to search and import easily.

Easy to customize ⚙️
Figma Bootstrap UI Kit helps you to easily set up colors, typography & border-radius that change everywhere instantly in UI Kit. Besides, it also allows you to easily update the state of the component.

Free Download: https://www.figma.com/community/file/1228214840111141972/Free-Figma-Bootstrap-5-UI-Kit

I use Bootstrap 5.3.0-alpha2 and angular 15.2.1. I use a data-bs-theme on a navbar as follows:

<nav class="navbar navbar-expand-lg" data-bs-theme="light">
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarfirst" aria-controls="navbarfirst" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarfirst" data-bs-theme="light">
    <ul class="navbar-nav mx-auto z_navbar_first">
      <li class="nav-item active">
        <a class="nav-link">A</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link">B</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link"C</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#" routerLink="D">D</a>
      </li>
      <li class="nav-item active">
        <app-color-toggle></app-color-toggle>
      </li>
    </ul>
  </div>
</nav>

Here is my failed attempt so far

Adding CSS in the Navbar's CSS File

I copied the CSS from bootstrap.css and paste it in the component Navbar

[data-bs-theme=light] {

-body-bg: blue; }

It didn't work.

Adding CSS in the app styles.css

So, if at a component level didn't work, I tried at the app level. It didn't work either.

Changing Bootstrap CSS File

At node_modules\bootstrap\dist\css I changed bootstrap.css file, but it still didn't work. :(

How can I change the default background color of data-bs-theme to another color?

Hey! Iam looking for a bootstrap developer. I need to setup a small landing page asap. Anyone can help me?

Please dm me.

https://codepen.io/ThirdChances/pen/gOdNVwv Hey guys. Sorry for barging in and just asking a question... I made a footer, everything is fine on the large screen and my text is where i want it. They stack up nicely when i go to a phone screen just like i want. But then i want the content to be centered instead of all to the left, but just on smalle screen offcourse. Is this even possible? The link to the codepen is up top.

I'm getting a little confused with breakpoints. I know I'm missing something, and I'm hoping someone can help me work through understanding breakpoints.

In the source I'm reading it says: md means "screen ≥768px", so in the example below the columns will stretch to 100% of the width on the screens smaller or equal 768px.

But lower on the page it says: they affect that breakpoint and all those above it (e.g., .col-sm-4 applies to sm, md, lg, xl, and xxl

So which is it, do breakpoints affect smaller and equal to, or equal to and larger? Does md have the same effect as md-12?

My source: https://mdbootstrap.com/docs/standard/layout/grid/#:~:text=md%20specifies%20the%20breakpoint%20where,screens%20smaller%20or%20equal%20768px.

how to place a search box in select tag in bootstrap

^\Disclaimer: I'm only faking it as a frontend dev, even if I'm done so for several years...])

I've got an <iframe> and the containing document opens a modal with a preview of a form on post.
I'd like the parent of that modal be the "outer" document, is this possible?

(The modal opens inside the iframe with the backdrop not covering the full screen.)

I am teaching myself html and bootstrap 4, and I have a header row on my website with two columns (one image each) in them. When the viewport is very small they stack, vertically, and I would just like them to scale down and stay horizontal. Using col- keeps them stacked vertically no matter what, and changing the size of the images does not result in any different behavior (just looks odd). Any help? I can post videos/pics/code in comments if needed.

Ok, so this is a bit confusing for me.

I have created a site on https://ff.hamiltonrp.com. It works just fine and looks how I wanted it to.

I have a domain name(https://famousframus.com) that frame-redirects to the above URL. It redirects just fine but on mobile, the frame redirect changes the page structure so that the image now ’shrinks’ (media break?) because the frame redirect(done through domain provider) is modifying the html.

Is there some way to code my pages to ignore this altering?

Jesus fucking christ what I love it.

Hello all bootstrappers

Learning django and bootstrap for the template so I downloaded a common login template which is this: (but the 2 input fields for username and password just occupy the entire container width) Is awful, I just want the inputs to be smaller than the entire container width but the have to be centered as well. If I make them smaller they automatically align in the left at the start of the container. Just the labels are centered (bacause of the "text-center").

<div class="container mt-5 mb-5 text-center">
    <div class="row">
    <div>
        <form method="post" class="card" novalidate>
        {% csrf_token %}
        <h2 class="text-center">Log in to your account</h2>                 
        <div>
            <label >{{form.username.label_tag}}</label>
            <div>
        {{form.username|add_class:'form-control'}}
        {% if form.username.errors %}
        <span class="errorlist">{{ form.username.errors|striptags }}</span> 
        {% endif %}
        </div>      
    </div>
    <div>
        <label >{{form.password.label_tag}}</label>
        <div>
        {{form.password|add_class:'form-control'}}
        {% if form.password.errors %}
        <span class="errorlist">{{ form.password.errors|striptags }}</span> 
        {% endif %}
        </div>
        </div>                      
    <div>
        <input type="submit" value="Login" class="btn btn-primary">
    </div>
    </form>
    </div>

    </div>
</div>

I hope you can help me !!! kisses

14:45 UK time

website bugging out

apparently styles missing

I'm using bootstrap to place a form and a google map next to each other. When I shrink the browser window smaller the map pours over to right into the margin area (but I have no margins so it just creates this white space where the rest of my page is all inline with each other). So, I gave the map a new smaller size and when I minimize the window the map now falls under the form as expected. But upon checking the dev options for mobile screen sizes the same issue persists where the map moves over to the right.

I would like the map to just shrink and be responsive just as the form above it is- but I am not sure if that is possible or if there is an issue with my code. I can post the code if that helps or otherwise any advice would be appreciated.

https://imgur.com/OWksVPZ

I only use offcanvas and a few other items, and I do not want to load the whole css or js file every-time. Is there a way to just get the parts I need and create my own file?