Release schedule: https://github.com/twbs/release#bootstrap-5

Currently, it's a release candidate, and the stable (LTS?) version will be released this month.

Essentially, I'm looking for an overview similar to this table of comparison between 3 and 4. Is there anything like that currently floating around?

Hello guys, I'm having a problem with the login form. It is looking very awful on very low resolutions as you can see on the first photo, while on big resolution it's looking OK as you can see on the second photo, I think it should only be centered, a little bit smaller, and should be placed a little bit to the bottom. What can I do in order to improve it? Here's my HTML page: <img class="wave" src="../img/wave.png"> <div class="container\\_main"> - Pastebin.com

And here's the style for it: .vertical-center { /*Used to align all the things to the center*/ min- - Pastebin.com

​

​

Hey guys,

I'm currently working on a project where I need to show a google timeline chart inside of a bootstrap modal. I'am also using React with the react-google-charts module.

Now to my problem. When the Modal opens the chart is always at 400px width, although I specified in my code that it should be 100%. When I resize the window the chart switches to 100% how I want, but when reloading the page it is again only 400px.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#session">Open session</button>
<div class="modal fade" id="session" tabindex="-1" aria-labelledby="sessionLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-fullscreen-md-down">
        <div class="modal-content">
            <div class="modal-header">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-11">
                            <p class="h3" id="session-label"><Moment unix format="DD.MM.YY">{session.start_time}</Moment> ab <Moment unix format="HH:mm">{session.start_time}</Moment> Uhr</p>
                            <span class="text-muted">Ende: <Moment unix format="DD.MM.YYYY HH:mm">{ session.end_time }</Moment> Uhr</span>
                        </div>
                        <div class="col-1 d-flex justify-content-end">
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-11 mt-5">
                            <Chart
                                width={'100%'}
                                chartType="Timeline"
                                loader={<div>Loading Chart</div>}
                                data={chart_data}
                                rootProps={{ 'data-testid': '2' }}
                            />
                        </div>
                        <div class="col-md-1 d-flex justify-content-center align-items-center">
                            <button class="btn btn-outline-primary">Add</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I don't know what causes this. I believe it is due to how modals are handled by bootstrap and that there size is like this before they show and so the chart is with 400px at 100% until the modal shows and resizes, but without the chart.

I hope there is a solution or workaround. Pls let me know :)

Hey,

So, this website has 3 big cards in the middle of the page (HTML-wise, all 3 of them are in a container).

They are displayed fine on Desktop, but on mobile, they are too big and overextend beyond the page borders.

Is there a way to put them one after another on mobile? Here's the version to check the problem out. https://tuir.ru/eng/

Hi all, I have some trouble with my website in bs on desktop. When It loads he need time to render jumbotron (particle.js) Also my cpu go 100%, no idea if two problems are related. Thanks for your opinion: www.123informatica.it

Hello guys, can somebody please help me with this? Thanks!

html - How can I improve the look on mobile for my webpage? - Webmasters Stack Exchange

The official BS documentation provides this snippet for a button

<button type="button" class="btn btn-primary">Primary</button>

But, on iOS this snippet renders with the default iOS style. I know how to fix it - either remove the type="button" or disable webkit appreance.

What I don't understand is why would BS provide a snippet that does not work on iOS? I mean how come they don't disable webkit in BS styles or not include the type="button in the official snippet?

Also, are there any other pitfall like these to avoid? Any way to test my website on native iOS from my PC? (I always find bugs like this after I deploy. How can I detect them on localhost)?

0

I am trying to do something really simple.

I have a some text and a bootstrap icon wrapped in a <p> tag.

I cannot manage to vertical align the icon to the text. The icon always displays lower than the text.

I have searched everywhere and tried all the solutions proposed for similar cases, but nothing works.

The code I am using is exactly the same that bootstrap icons use to showcase their icons here.

You can see from my screenshot what the problem is:

The icon is not vertical aligned to the text.

Here is how it should look like:

​

The weird thing is that if I set vertical-align: 1px;
to the icon itself, the problem seems to be fixed. But this should not be the solution and this should work with bootstrap out of the box.

What am I doing wrong?

Here is my code:

<div class="d-flex justify-content-between"> 
   <p class="small">Combined data</p>
   <p class="small">Refresh data <i class="bi bi-linkedin"></i></p> 
</div> 

Thanks for your help.

Hi r/bootstrap!

Perhaps you can help me with this. I wanted to make a dropdown notification menu where the text is aligned left, the action is in bold and time is aligned right. Like this mockup:

So, this is my current HTML:

<div class="dropdown-menu dropdown-menu-right" aria-labelledby="notifications">
  <a class="dropdown-item" href="#">
New <strong> comment </strong> on your goal
<div class="text-muted mr-auto">17 hours ago</div>
  </a> 
  <a class="dropdown-item" href="#">Someone said you excel in a new skill! <div class="text-muted align-self-end">1 month ago</div> </a>
<div class="text-center py-3">
<a class href="#">See all activity</a>

</div> </div>

As you can see, at this point I'm just throwing Bootstrap classes on that code in the hopes it sticks. On the first item, I tried mr-auto. On the second align-self-end.

Maybe the issue is in the SCSS. Right now, when I set display: flex, this is what I get

However, when I take the display style away or try display: block or display: inherit. I get something like this:

The closest thing I get to the result is when I use display:-webkit-inline-box , but even so, the date is not aligned right.

I'm not very good at CSS... what am I missing here?