Boostrap 4.x vs 5

Bootstrap Studio Help
1

I see the block option on a button disappeared from boostrap 4.x to 5 - is there a better (easier) way to stretch my buttons?

2
3

mmm - read it - I most probably, giving a Bootstrap designer a heart attack somewhere - I made my containing folders display a Grid and buttons expand. Not sure if this how they intended it to be used :wink: Just one question that Gap option? are we supposed to be able to set it in BS?

4

Just use flexbox.

example
example793×453 37.2 KB

5

If you want to control the size of your buttons add class col-1 to col-12 on the button

Here is an example

1 Like
6

Hella bad idea, I highly recommending to don’t do that.

7

@dickykreedz

If I want a button take up half of the parents width I can make a class mybutton and give mybutton css rules flex basic and a width 50%
like this

.mybutton {
  flex: 0 0 auto;
  width: 50%;
}

or have one of Bootstrap predefined classes in this case col-6

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

The two classes do exactly the same thing.
Can you explain why it is a bad idea to use predefined bootstrap classes

8

Nice info there Kuli, I didn’t realize you could use the .col settings on buttons either. I would image maybe other things too?

Also just wanted to add that there are 3 predefined button sizes in the Options panel as well.

9

reading this with interest - so I decided to take one my my smallest sites and redo it in Bootstrap 5.0 and are running into some issue, the first pick is a panel with 3 links styles as buttons works like charm
Firefox_Screenshot_2021-07-18T13-24-48.956Z

so I started a new project set it to Bootstrap 5 inserted 4 buttons and set the container to grid as you can see the 1st one is always wider then the following one, tried to it as 4 links styled as buttons same result - no equeal widths:
Firefox_Screenshot_2021-07-18T13-24-05.200Z

here is the code is:

<div class="card-body d-grid"><a class="card-link btn btn-primary btn-block btn-lg" href="#" style="margin-bottom: 20px;">Link</a><a class="card-link btn btn-primary btn-block btn-lg" href="#" style="margin-bottom: 20px;">Link</a><a class="card-link btn btn-primary btn-block btn-lg" href="#" style="margin-bottom: 20px;">Link</a><a class="card-link btn btn-primary btn-block btn-lg" href="#" style="margin-bottom: 20px;">Link</a></div>

I’m baffled

10

@theunisp

It’s because you add the class d-grid on the card-body. Add a div inside the card-body with the class d-grid and put your links inside that div
like this

<div class="card">
	<div class="card-header mb-4">
		<h4>Heading</h4>
	</div>
	<div class="card-body">
		<div class="d-grid">
			<a class="btn btn-primary btn-lg mb-4" href="#">Link</a>
			<a class="btn btn-primary btn-lg mb-4" href="#">Link</a>
			<a class="btn btn-primary btn-lg mb-4" href="#">Link</a>
			<a class="btn btn-primary btn-lg mb-4" href="#">Link</a>
		</div>
	</div>
</div>

When you have the class btn on the links you don’t need the card-link, there is already text-decoration: none in the class btn.
The class btn-block is not a bootstrap5 class

11

done and works perfect - thnx . Card links get added by BStudio - for my info - what would be the preferred, most correct way to add links and style them as buttons?

12

Add a button and in the options panel for button options change the Element to link

13

cool! thanx, missed it completely