Button Groups

5 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€95.34
List Price:  €133.48
You save:  €38.14
£79.10
List Price:  £110.75
You save:  £31.64
CA$142.21
List Price:  CA$199.10
You save:  CA$56.89
A$157.05
List Price:  A$219.87
You save:  A$62.82
S$134.84
List Price:  S$188.79
You save:  S$53.94
HK$777.46
List Price:  HK$1,088.47
You save:  HK$311.01
CHF 89.43
List Price:  CHF 125.21
You save:  CHF 35.77
NOK kr1,112.24
List Price:  NOK kr1,557.18
You save:  NOK kr444.94
DKK kr711.11
List Price:  DKK kr995.59
You save:  DKK kr284.47
NZ$173.49
List Price:  NZ$242.89
You save:  NZ$69.40
د.إ367.26
List Price:  د.إ514.18
You save:  د.إ146.92
৳11,991.36
List Price:  ৳16,788.39
You save:  ৳4,797.02
₹8,480.39
List Price:  ₹11,872.88
You save:  ₹3,392.49
RM444.95
List Price:  RM622.95
You save:  RM178
₦155,107.48
List Price:  ₦217,156.68
You save:  ₦62,049.20
₨27,913.10
List Price:  ₨39,079.47
You save:  ₨11,166.36
฿3,413
List Price:  ฿4,778.34
You save:  ฿1,365.34
₺3,494.67
List Price:  ₺4,892.67
You save:  ₺1,398
B$601.55
List Price:  B$842.20
You save:  B$240.64
R1,792.07
List Price:  R2,508.97
You save:  R716.90
Лв186.87
List Price:  Лв261.62
You save:  Лв74.75
₩143,441.77
List Price:  ₩200,824.22
You save:  ₩57,382.44
₪360.61
List Price:  ₪504.86
You save:  ₪144.25
₱5,863.71
List Price:  ₱8,209.43
You save:  ₱2,345.71
¥15,339.71
List Price:  ¥21,476.21
You save:  ¥6,136.50
MX$2,024.43
List Price:  MX$2,834.28
You save:  MX$809.85
QR365.87
List Price:  QR512.23
You save:  QR146.36
P1,355.32
List Price:  P1,897.50
You save:  P542.18
KSh12,923.70
List Price:  KSh18,093.70
You save:  KSh5,170
E£5,082.28
List Price:  E£7,115.40
You save:  E£2,033.11
ብር12,748.29
List Price:  ብር17,848.11
You save:  ብር5,099.82
Kz91,229.47
List Price:  Kz127,724.91
You save:  Kz36,495.44
CLP$97,739.22
List Price:  CLP$136,838.82
You save:  CLP$39,099.60
CN¥727.78
List Price:  CN¥1,018.93
You save:  CN¥291.14
RD$6,084.17
List Price:  RD$8,518.09
You save:  RD$2,433.91
DA13,382.46
List Price:  DA18,735.98
You save:  DA5,353.51
FJ$231.95
List Price:  FJ$324.74
You save:  FJ$92.79
Q773.27
List Price:  Q1,082.60
You save:  Q309.33
GY$20,933.55
List Price:  GY$29,307.80
You save:  GY$8,374.25
ISK kr13,930.60
List Price:  ISK kr19,503.40
You save:  ISK kr5,572.80
DH1,001.26
List Price:  DH1,401.81
You save:  DH400.54
L1,829.81
List Price:  L2,561.81
You save:  L732
ден5,877.29
List Price:  ден8,228.45
You save:  ден2,351.15
MOP$803.76
List Price:  MOP$1,125.30
You save:  MOP$321.53
N$1,771.15
List Price:  N$2,479.68
You save:  N$708.53
C$3,693.31
List Price:  C$5,170.79
You save:  C$1,477.47
रु13,582.74
List Price:  रु19,016.38
You save:  रु5,433.63
S/373.98
List Price:  S/523.59
You save:  S/149.60
K404.90
List Price:  K566.88
You save:  K161.97
SAR375.80
List Price:  SAR526.14
You save:  SAR150.33
ZK2,772.47
List Price:  ZK3,881.57
You save:  ZK1,109.10
L474.18
List Price:  L663.87
You save:  L189.69
Kč2,388.66
List Price:  Kč3,344.22
You save:  Kč955.56
Ft39,062.69
List Price:  Ft54,689.33
You save:  Ft15,626.64
SEK kr1,098.99
List Price:  SEK kr1,538.64
You save:  SEK kr439.64
ARS$101,814.81
List Price:  ARS$142,544.81
You save:  ARS$40,730
Bs693.35
List Price:  Bs970.72
You save:  Bs277.36
COP$435,131.94
List Price:  COP$609,202.12
You save:  COP$174,070.18
₡50,550.20
List Price:  ₡70,772.30
You save:  ₡20,222.10
L2,545.09
List Price:  L3,563.23
You save:  L1,018.13
₲785,129.71
List Price:  ₲1,099,213
You save:  ₲314,083.29
$U4,443.58
List Price:  $U6,221.19
You save:  $U1,777.61
zł407.32
List Price:  zł570.27
You save:  zł162.94
Already have an account? Log In

Transcript

Hello, in this bootstrap four video, we're going to be looking at button groups. Button groups allow you to group a series of buttons together, it allows you to perform either on a single line or vertically however you want is easy to switch between them. We'll show you both of them. So what we mean by grouping buttons, aka you know, these buttons right here, you can basically group them so they're connected together, keep similar buttons together as essentially what we're going to be showing you plus also, there's other videos in this series that will show you different button types where there is a drop down button. Whether it's a radio button or a checkbox button. Doesn't matter what it is, you can easily substitute one of those buttons for a button.

Within the button groups. We're just going to use simple buttons like we've used so far. But it locks and it's very easy. Just substitute one of the buttons for one of those buttons. So if you just go to your text editor What I'm going to do is add a couple of new lines, just so it's easier to see. First of all, you need to put a div.

And that div is essentially the container for your buttons, aka your button group, need to put a class which is btn dash group. This has a role of group. When I say group, you almost sound like Groot from Guardians of the Galaxy area dash label. No, I don't think I need a label. Now we can admit that and now I'm gonna put some buttons. Like I said, the buttons are essentially what we've already used right here.

So actually, you know what, I'm not even going to put a button here, copy and paste it. So you can actually see, it is literally the same, so I'm gonna use the wrong key to copy that. Copy that one. But many of you aren't really, I'm gonna get this one very up. Then I had this exactly on that look. And then let's get this one's got a small one.

So far, let's paste this inside, save it, go to the browser refresh. There we go. We have a button group first, actually, I'm also going to add some breakpoints at the end. So it's a little easier to see save that refresh. There we go. We have our button group.

And as you can sort of see, the buttons are usually have rounded edges. You can rounded corners, sorry, they usually have rounded corners you can easily do That is to border radius in CSS, if you don't want to just remove it's very simple. But if you put them in a button group, only the one at the end have that border radius, aka, the curve on the corner. Any buttons in the middle don't. So that's really cool. So I'd have to mess around with that just to make it look good.

And as you can see, obviously, small one doesn't look very good. So you will probably want to think about what you're doing when you're doing button groups. So you get buttons that look very nice. I'm just gonna copy a few more in so you can simply see, copy these in really on to the save it, refresh the browser, and as you can see, none of the buttons in the middle have curved corners, only the ones at the edges do. So that's bottom groups. Okay, we're also going to show you how to vertically align them.

And to do that, all you do instead of btn dash group people btn dash group dash, vertical, save it, refresh, and as you can see, they are now aligned vertically and the same principle still applies, aka any buttons in the middle. Don't have, sorry, don't have curved corners, and neither do the corners of the buttons at the edge there are facing in zoid aka these two here, and these two right here with button groups that are vertical, you can easily add other buttons as well wherever it's drop down button radio buttons, the process is exactly the same. So that's button groups. If you have any questions feel free to post them on some are learning Dakota UK for slash question dot php and Well, how so will the community, please rate, comment and subscribe and it'll really help keep the content free. Plus, there'll be another link in the description, which will be the source code from this video.

So check that out. And as usual, thanks for watching, and I hope you have a great day.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.