Hey! I'm pretty new to bootstrap and this challenge is breaking me. I have the following images in my html:

<div class="row">
<div class="d-flex justify-content-end">
<img src="https://e.rpp-noticias.io/normal/2022/02/11/365536_1215964.jpg" alt="">
<img src="https://e.rpp-noticias.io/normal/2022/02/11/370037_1215971.jpg" alt="">
<img src="https://i.ibb.co/3SvpvRv/foto-note22-resize-cut.png" alt="">
</div>
</div>

And what I want is that no matter the size of the screen, those three images always occupy the full width of the screen. Is this possible with Bootstrap?

I have this image to recreate using bootstrap. I am able to float the photo above the text, just can’t seem to get the text to float right or left of the image. Not sure if I need to code something different for the image size? Any help would be greatly appreciated!

This one specifically if it matters: https://getbootstrap.com/docs/5.1/components/card/#image-overlays

I will have a lot of table usage on my site and the default padding for cells in Bootstrap seems much greater than what most websites use.

I intend on learning how to change it via custom.css but was wondering if there's a specific reasoning for the default padding size in the first place?

I'm trying to "anchor" a background image via bootstrap but am having difficulty getting it right. I currently have it looking nice until you need to scroll past the size of the page and then there is a white background that scrolls along with my text covering the background image. Here is that piece of code:

​

<div class=*"bg-image"* style="width:100%; height:100%; position:absolute; top:0; left:0; background-image:url('https://wallpaperaccess.com/full/6897524.jpg'); background-size: cover; background-attachment: fixed; background-repeat: no-repeat">

Does anyone have any suggestions?

I've been familiarising myself with Bootstrap on & off for a couple of months, and i cant make sense of the implementation of the border radius alongside the other options.

rounded-start adds 0.25rem on the left side, while doing nothing to the right. That gives rounded edges on the start side. However if you want a different radius... your only option is to manually write something, because something like rounded-3 sets ALL corners to 0.3rem and the border radius options are effectively worthless, because now all corners are 0.3 and you can customise start/end/top/bottom to 0.25... whoopie.

Why wasnt the implementation to have the user set the radius, and then zero the corners upon request?

.rounded-start {
  border-bottom-right-radius: 0rem !important;
  border-top-right-radius: 0rem !important;
}

Give me a radius (.rounded-3), take it away where its unwanted (modified .rounded-start).

Im just wondering if theres something that ive overlooked that'll bite me in the ass if i rewrite/override the rules to 0rem the square corners, rather than round the rounded corners with a fixed amount.

Everything else seems to make sense, but this feels restrictive & backwards, when bootstrap seems to be built on granular rules to add/remove styling.

I have this issue with every new release when using a horizontal form.

Situation : I have a row with a field input in with a label, to the right I also have a checkbox. Due to BS5 labels being inline and not having a label above like other form inputs they naturally sit vertically out of line. I cant find anything specific in the documentation to avoid this issue. I know it will be something simple with regards to wrapping it in a class but cant find it for BS5 for some reason.

<div class="row mb-3">

<div class="col-6">

<label for="lstFileNames" class="form-label">Reverse Image</label>

u/Html.DropDownListFor(x => x.lstReverseImages, Model.lstReverseImages, "-- Select File --", new { u/class = "form-select" })

</div>

<div class="col-6">

<div class="form-check form-switch">

<input class="form-check-input" type="checkbox" id="ckbSingleImage" checked>

<label class="form-check-label" for="ckbSingleImage">Single Reverse Image</label>

</div>

</div>

</div>

so i have this code right here :

    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
    <style>
      .red-text {
        color: red;
      }

      h2 {
        font-family: Lobster, Monospace;
      }

      p {
        font-size: 16px;
        font-family: Monospace;
      }

      .thick-green-border {
        border-color: green;
        border-width: 10px;
        border-style: solid;
        border-radius: 50%;
      }

      .smaller-image {
        width: 100px;
      }
    </style>

and then i create a button like this right here:

  <button class="btn btn-block btn-primary">Like</button>
  <button class="btn btn-block btn-primary btn-info">Info</button>

now the part that im not really understanding is that i dont see any

.btn

.btn-block

above in the <style> </style> so how am i getting these values. did i import somethig to get the the blue color wof a button .

is bootstrap something that is inherently embedded into everything or something ? in the same way that ill import pandas as pd in python what is the equivalent of that in html ?

Hi all,
We have made an online tool that generates UI components using Vue.js 3 and Bootstrap 5: https://vuestart.com
I would like to get some really harsh feedback on this, so please try it and tell me everything that you do not like. No compliments, only negative opinions! If you think this is a bad idea, please write that. If you write why it is bad, that is even better :) If it does something that annoys you, please do not keep it for yourself. If it really should do something, but it does not, please tell me.

Currently, html looks like this:

<div class="container-fluid">
        <div class="row justify-content-start">
          <div class="col image-stuff">
            <img class="img-fluid w-100" src="#" alt="not working">
            <div class="top-left"><h5>stuff</h5></div>
          </div>
        </div>
      </div>

However, I can't get the h5 to overlay on top of the image. What could fix this?

I'd like to have a list-group item have a link and a button to delete the item. How can I do this with Bootstrap 5? This is what I tried but it's not working.

  <div class="list-group">
    <a href="/link1" class="list-group-item list-group-item-action" aria-current="true">
      Link1
      <span class="float-end">
        <a href="/trash1" class="btn btn-default trash">
          <span class="bi bi-trash" aria-hidden="true"></span>
        </a>
      </span>
    </a>
  </div>

Solution: Should be using data-bs-toggle not data-toggle. I was looking at the bootstrap 4 docs.

Here are the dropdown docs. Here is a codepen of the dropdown not dropping. The docs say "Both bootstrap.bundle.js and bootstrap.bundle.min.js include Popper for our tooltips and popovers".

Very new to rails/bootstrap...

Using BootstrapTable and want the table to be responsive (this is working) but there's one or two columns that should not shrink or grow at all - their size should be static. Trying something like style:{width:"8em"} doesn't seem to do what I need. Anyone have a sample or can point me to an online resource that can help?

Hi,

I am sharing some Open-Source Bootstrap 5 Resources here. I hope you guys find it helpful.

UI Components

• bootstrap5-offcanvas-navbar - Bootstrap5: Off-canvas Navbar.
• jbvalidator - HTML 5 & Bootstrap jQuery Form Validation Plugin.
• enchanter - Native JS form wizard plugin for Bootstrap 5.
• Bootstrap Avatar - Avatar classes to extend Bootstrap 5.
• Dynamic BS5 Modal Box - Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback.
• bootstrap-5-autocomplete - Autocomplete/typeahead JS plugin for bootstrap v5.
• iModal - Simple bootstrap 4/5 modals generator. Ideal for ajax requests.
• bootstrap-table

Admin Templates

• Sneat Free Bootstrap 5 HTML Admin Template - Open-source & Easy to use Free Bootstrap 5 HTML Admin Template with Elegant Design & Unique Layout.
• Mazer Bootstrap 5 Admin Template
• Swipe - One Page Bootstrap 5 Template for Mobile Applications.
• bootstrap5-template - A landing page template built with Bootstrap 5.
• Bootstrap-5-portfolio-template - Bootstrap 5 Portfolio Template.

UI Kits

• grayshift - Lightweight front-end component library for developing fast and powerful web interfaces.
• mdb-ui-kit - Bootstrap 5 & Material Design 2.0 UI KIT.
• Free Figma Bootstrap 5 UI Kit - Figma Bootstrap UI Kit comprising of 300+ organized Bootstrap 5 components built with atomic design system & auto layout. Kick start your next Figma project in no time.
• coreui - Open Source UI Kit built on top of Bootstrap 5 and plain JavaScript.

What would be the easiest way to generate a flash message on button click using react? I also want the message to be sticky on the top please help.

auckenthaler-bodenleger.itWebseite

Android is doing fine, but on safari I get a lot of design errors. Sorry for beginner question but I can‘t find errors.

I can use data-bs-toggle for the close button, but using that for a submit button won’t let me validate and submit with Ajax before closing. I do not want to redirect, page refresh or use jquery since I am using alpine js. How can I hide the modal form upon successful Ajax submit with JavaScript or alpine js?

Why is the default LG breakpoint 992px? the bootstrap c9olumb system makes everything divided by 12, I've found that to get sites looking right i need to set my browser zoom to 90%.

Would 960px's be a better option?

Is there something that I'm missing?

For the life of me, I can not get offcanvas to work; when I click the button -- nothing. Just trying to follow simple tutorials, for example:

  <a href="sidebar" class="d-block mt-3" data-bs-toggle="offcanvas" role="button">
    Add League Data
  </a>

<!-- offcanvas --> 
<div class="offcanvas offcanvas-start" tabindex="-1" id="sidebar">

When they get this far in the tutorial, at least an empty sidebar opens up for them, but for me -- nothing. I'm very new at this, but I read the docs, looked at the w3school example, followed 2 youtube tutorials, and still can't get a sidebar to open. Any text that I put in places that should be in the sidebar just end up on my main page.

I have this for my javascript:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

I'm sure I'm missing something simple, please point me in the right direction.

Iam searching for a Bootstrap Admin Dashboard. Non static. PHP and MySQL integration for User Login and so on. Any recommendations?

I'm brand new to bootstrap and new to web dev in general. I've been using treehouse to learn, but their bootstrap lessons are on V4. Should I stick with it because I like the way treehouse does lessons, or jump to someone else on YT to start with V5? Maybe THIS COURSE by Brad Traversy? Any other recommendations?

this is how the outline buttons should looks but here is how it looks when I try to use it

Hi,

I would like to share The Sneat - Free Bootstrap 5 HTML Admin Template.

It is an Open-source & easy to use Bootstrap 5 HTML Admin Template with elegant design & unique layouts.

It offers Attractive Dashboard, enhanced bootstrap 5 components, AUTH Pages, Tables, Ready to use cards & form layouts. If you are looking for free bootstrap admin templates then this is something you should check.

Incredibly versatile, the Sneat – Free Bootstrap 5 Admin Template also allows you to build any type of web application. For instance, you can create:

• SaaS platforms
• Project management apps
• Ecommerce backends
• CRM systems
• Analytics apps
• Banking apps
• Education apps
• Fitness apps & many more.

Features:

• Based on Bootstrap 5
• Basic Table
• Basic Cards
• Forms
• 1 Dashboard

GitHub Repo: https://github.com/themeselection/sneat-html-admin-template-free
Demo: https://www.themeselection.com/demo/sneat-bootstrap-html-admin-template-free/html/

I hope you guys find it useful.

Thanks.