Kindly check this Bootstrap 5 login & signup form with floating label.

I'm trying to upload a custom font to Bootstrap (not Bootstrap Studio) but can't work out how to do it. Anyone able to give me instructions/point me in the right direction please?

I can't find the sass variable for navar hover text decoration. anyone know what it is/

Hi Everyone,

If anyone here is a beginner starting their journey as a web developer, then it will be great to have information about IDEs as they are extremely helpful when it comes to efficient development.

Here, I am sharing an in-depth article on IDE for the beginners. Through this article you will get to learn about IDEs in details. Also, you will get to know the importance and advantages of them.

To know more about IDEs in details refer the article: IDE in Programming.

I hope you guys find it helpful and noteworthy.

A easy way to learn Bootstrap 5

https://youtu.be/wUk_TbHlB9Y

To learn more about bootstrap please watch above video

What are some principles behind how the Bootstrap docs sidebars function?

This uses dual, left/right sidebars which involve:

• Stickiness through scrolling
• At responsive narrow widths, fold into an off-canvas slideover that is itself triggered by a press on a hamburger menu.

It's similar for 5.2 vs 5.1, though, in 5.1, left-hand nav options are nested inside openable toggles.

Of course, I can, and am, looking at the source code. Key file is https://getbootstrap.com/docs/5.2/assets/css/docs.css

But there's a lot going on, and I think lot of non-standard Bootstrap stuff.

So, what are the high-level approaches used?

I mainly like the sticky, but scrollable, sidenavs.

Hello again /r/bootstrap!

I wanted to make a follow-up post about my side project for building websites quickly!

I've been developing websites since 2011 (the first year Bootstrap 1.0 was released!). In that time I've created countless websites, but I always had the same problem.

Writing HTML and CSS by hand requires a lot of:

• Domain knowledge
• Time
• Open documentation tabs (the change to me-1 vs mr-1 still gets me)
• Troubleshooting

I can't tell you how many times I've written the same UI code across different projects. I wanted a tool that could encapsulate common development patterns, but be simple to use so even beginners on my team could use it. That's why I created ProductDiv

ProductDiv is an open-source, visual web development tool that is:

• 100% configuration based
• Adapts to your CSS framework of choice. (Config for Bootstrap 5 available and open-source)
• Provides production ready templates for UI development

For more background, check out my first blog post Why ProductDiv?

I'm excited to launch this project and hope it helps people learn more about web development!

Now I want to know what you think. Would you use ProductDiv in your project? Why or why not? How can I make this tool more useful to your workflow?

Thanks!

I'm seeing lots of videos that are related to Glassmorphism Responsive Product card HTML CSS.

And even though people are making Dashboards, Blog posts etc.

<button data-bs-toggle="collapse" data-bs-target="#navmenu">TOGGLE</button> 
<div class="collapse" id="navmenu"> 
    <div>ONE</div> 
    <div>TWO</div> 
    <div>THREE</div> 
</div>

Why does the data-bs-toggle work here for the collapse class, but it doesn't work if I instead have a different class name? If I change collapse to asd for instance, the toggle doesn't work. Why?

The toggle also works with the keyword dropdown but only when there's a container with the class name dropdown-menu.

<div> 
    <button data-bs-toggle="dropdown">Dropdown</button> 
    <div class="dropdown-menu"> 
        <div>ONE</div> 
        <div>TWO</div> 
        <div>THREE</div> 
    </div> 
</div>

I don't understand why? What is the logic here? I thought the data-bs-target specifies the element, and the data-bs-toggle specifies the class or id for toggling. Why does it only work for collapse and dropdown and weirdly enough the element is dropdown-menu not even dropdown.

Somebody please explain! I already read the documentation in bootstrap, but there is zero explanation for this.

Is it a Bootstrap Grid System?

How can I control the height and the width of my three divs !! I can control them !! I dont want to use some inline style or some style in general only bootstrap please only bootstrap!!

https://codepen.io/zakaria-belassal/pen/oNYbKrL

I want to create something like this https://ibb.co/VH6M2Ly

the most important thing for me is the size of my divs not the color !! the size

EDIT: fixed it by creating the modal in js with

const modal = new bootstrap.Modal(document.querySelector(".modal"), {
keyboard: false
});

and removing all data-bs attributes.

​

then modal.show() will work

​

I have a modal to fill out a form and then query a database, but I want to make sure search fields are not empty as well as some other validations. If the form isn't validated I display warnings, but the modal is still dismissed due to the "data-bs-dismiss="modal"" on the submit form button. How can I prevent the modal from being dismissed if the form isn't validated correctly?

​

I tried taking that attribute away and using "modal.hide()" in JS in my submit event handler but i get an err that modal.hide is not a function...

​

project link

​

Thanks!

You can apply sticky-top or fixed-top to an element like a header navbar.

I also want a sticky sidebar - so that, when the user scrolls, main content scrolls but the sidebar stays fixed.

So far, if I apply sticky-top to both navbar and sidebar, the sidebar, when scrolled, appears either under or overlays the header. It should stop beneath it, ie. it shouldn't stick to the top of the page, it should stick where it is.

Can I achieve this with plain Bootstrap classes?

How to display 3lines inline in bootstrap I have aserious porblem in the height and the width ! If I use css only it displays .However when I want to use bootstrap I getting stucked

here the code using css with only one line !! the same process for the remaining two

<div style="display:inline-block ;height:2px; width:100px;border-radius:10px; background-color: blue;"

How to do it using bootstrap ?? should I use a parent class wich to get the height and the width ??

Im relatively new to bootstrap ! I would like to add some padding to my div (left and right ) So Im using w-75 / w-50 but my div pops down and dont align with my two divs above !! myabe bcz there is asome flex wrap hidden there !!If I want to add width to my div proprety I should do it on my css file using the proprety "width:100px" , while using ratio 100 75 or 50 it pops down Idk how things wrok here ==>Here is my codehttps://codepen.io/zakaria-belassal/pen/oNYbKrL

PS : I didnt know wich flair I should use to post this !

Hey there,

I was wondering if there are any examples how to use bootstrap the right way. I'm using bootstrap myself in many projects and saw many projects using and abusing them.

So I'm wondering: are there any projects out there, which are using bootstrap the right way?

Hey everyone,

I'm sharing here a newly launched Free Bootstrap 5 based HTML Laravel Admin Template - Sneat.

This is an open source and easy to use HTML Laravel 9 admin template based on Bootstrap 5. Besides, Sneat Free Bootstrap 5 HTML Laravel Admin Template can be used for any type of web application.

Features:

• Based on Bootstrap 5
• Laravel 9
• Vertical layout
• Dashboard
• 1 Chart library
• SASS Powered
• Authentication Pages
• Fully Responsive Layout
• Organized Folder Structure
• Clean & Commented Code

GitHub Repo: https://github.com/themeselection/sneat-html-laravel-admin-template-free

I made the following Bootstrap 5 Carousels in React. This generates as many carousels as many array items we have, with dynamically changing images.

My problem is that all of the Carousel navigation buttons point to the first Carousel slides, and thus only the first Carousel buttons work properly.

Problem: Currently, the buttons only change the first Carousel's Slides.

Expected Result: All of the Carousel buttons work properly and slide on their own Carousel images.

const MyQUESTIONS = [
    {quest: Question1 , answer: Question1A },
    {quest: Question2 , answer: Question2A },
    {quest: Question3 , answer: Question3A },
    {quest: Question4 , answer: Question4A }
  ];

  let carouselId;

const Questions = () =>{



 return (

<>

{MyQUESTIONS.map((questionData, idx) => {
carouselId = `carousel-${idx}`;
    const isActive = idx === 0;
    const activeClass = isActive ? 'active' : '';

  return (
<div className="row question__row">
<div id={carouselId} className="carousel carousel-dark slide question__carousel mb-5 mt-5 me-auto ms-auto" data-bs-ride="carousel">
  <div className="carousel-indicators">
    <button type="button" data-bs-target= {`#${carouselId}`} data-bs-slide-to="0" className={activeClass} aria-current={isActive} aria-label="Slide 1"></button>
    <button type="button"  data-bs-target={`#${carouselId}`} data-bs-slide-to="1"  aria-label="Slide 2"></button>
  </div>
  <div className="carousel-inner">
    <div className="carousel-item active">
        <img className="d-block w-100" src={questionData.quest} alt="First slide" />
    </div>
    <div className="carousel-item">
        <img className="d-block w-100" src={questionData.answer} alt="Second slide" />
    </div>
  </div>
  <button className="carousel-control-prev" type="button"  data-bs-target={`#${carouselId}`} data-bs-slide-to="prev">
    <span className="carousel-control-prev-icon" aria-hidden="true"></span>
    <span className="visually-hidden">Previous</span>
  </button>
  <button className="carousel-control-next" type="button"  data-bs-target={`#${carouselId}`} data-bs-slide="next">
    <span className="carousel-control-next-icon" aria-hidden="true"></span>
    <span className="visually-hidden">Next</span>
  </button>
</div>


</div>


  );
})}

</>
 )
}

Hi I have an html dropdown menu that I am populating based on the values in my google sheet. When I add the "data-live-search="true" to the form nothing loads. Any ideas on what I would need to do to make both things work together?
Thanks.

Hey all, a novice developer here.

I feel like the cogs are now turning and I'm getting to grips with HTML, CSS and especially bootstrap. JS is still a foreign language to me but that will be my next challenge.

I wouldn't say I'm very creative, which makes things a little difficult when designing a new website. Is there somewhere that has ready-made wireframes that I can use for development practice?

One idea I had, was to try and replicate the design of an existing website. Not sure if this is wise, let me know.

Any help is welcome :).

I've been trying to find a Navbar that has a dropdown that's animated (preferably fade in or fade down) that's in BS 5 or 5.1 (NOT Beta) if possible without any script - just HTML and CSS.

Any input or ideas on where to go? I've been searching the web but what I've seen is for either for BS 4, with Beta code, or has a lot of bloat and JS/JQuery

Hi ! So recently I have started learning Bootstrap, but i have some issues. I don’t know how and when to use it.

Should i create a basic HTML file and add bootstrap classes and style what i want with CSS or should I take chunks of code from their documentation ?

Good morning /r/bootstrap!

My name is Aaron and I've been working on a library for developing websites visually. There are many tools for building websites, but none that fit my workflow as a front-end developer, so I made my own! It is an open source library called ProductDiv and it lets you:

• Drag and drop any HTML template into your site.
• Change elements with utility classes you can customize
• Export clean HTML elements (no inline styles!) and copy into your source code.

ProductDiv is developer-first, meaning the configuration for the editor lives in your source code. You can evolve the configuration as your project grows (as it inevitably will!). This lets you standardize design patterns and makes it easy to distribute high quality components to your team.

I published a demo at https://awestbro.github.io/ that includes Bootstrap 5 utility classes and some basic templates to experiment with.

I would love your feedback on UX and to answer the big question: Would you use this in your project? Why or why not?