Last post Jul 31, 2019 10:19 PM by coreysan
Member
25 Points
83 Posts
Jul 31, 2019 03:30 PM|coreysan|LINK
I have a snippet here that displays buttons vertically:
<div class="row"> <div class="col-2"> @foreach (string category in Model) { <a class="btn btn-block btn-secondary" asp-area="Ordering" asp-controller="Home" asp-action="Index" asp-route-category="@category"> @category </a> } </div> </div>
How can I use the loop to display those buttons side-by-side (horizontally)?
The references to "class=btn btn-block btn-secondary" are standard bootstrap classes, where btn-block has "display: block".
I changed it to "block-inline" but it didn't change anything.
I'd be grateful for any help on this. Seems so simple but I'm braindead.
All-Star
43731 Points
18710 Posts
Jul 31, 2019 03:34 PM|mgebhard|LINK
Remove btn-block.
<a class="btn btn-block btn-secondary" asp-area="Ordering" asp-controller="Home" asp-action="Index" asp-route-category="@category"> @category </a>
From the Bootstrap docs.
Create block level buttons—those that span the full width of a parent—by adding .btn-block.
.btn-block
https://getbootstrap.com/docs/4.0/components/buttons/
Jul 31, 2019 07:04 PM|coreysan|LINK
I removed the reference to "btn-block" but nothing gained.
The only change was that it added rounded-corners to the buttons.
I wonder if it has to do with my version of bootstrap - 3.4.1, an older version.
Jul 31, 2019 07:16 PM|mgebhard|LINK
coreysan I removed the reference to "btn-block" but nothing gained. The only change was that it added rounded-corners to the buttons. I wonder if it has to do with my version of bootstrap - 3.4.1, an older version.
Is the column wide enough given the parent container? Try adding a border to verify you have enough width.
<div class="row"> <div class="col-2" style="border: pink solid 1px;"> @foreach (string category in Model) { <a class="btn btn-secondary" asp-area="Ordering" asp-controller="Home" asp-action="Index" asp-route-category="@category"> @category </a> } </div> </div>
Also you browser's dev tools (F12) can provide this type of information.
Jul 31, 2019 10:19 PM|coreysan|LINK
Brilliant catch! I didn't notice col-2, which should have been bigger.
Looks fabulous now - I can't thank you enough!
Member
25 Points
83 Posts
How to display block inline using a loop
Jul 31, 2019 03:30 PM|coreysan|LINK
I have a snippet here that displays buttons vertically:
<div class="row">
<div class="col-2">
@foreach (string category in Model)
{
<a class="btn btn-block btn-secondary"
asp-area="Ordering"
asp-controller="Home"
asp-action="Index"
asp-route-category="@category">
@category
</a>
}
</div>
</div>
How can I use the loop to display those buttons side-by-side (horizontally)?
The references to "class=btn btn-block btn-secondary" are standard bootstrap classes, where btn-block has "display: block".
I changed it to "block-inline" but it didn't change anything.
I'd be grateful for any help on this. Seems so simple but I'm braindead.
All-Star
43731 Points
18710 Posts
Re: How to display block inline using a loop
Jul 31, 2019 03:34 PM|mgebhard|LINK
Remove btn-block.
<a class="btn btn-block btn-secondary" asp-area="Ordering" asp-controller="Home" asp-action="Index" asp-route-category="@category"> @category </a>From the Bootstrap docs.
Create block level buttons—those that span the full width of a parent—by adding
.btn-block.https://getbootstrap.com/docs/4.0/components/buttons/
Member
25 Points
83 Posts
Re: How to display block inline using a loop
Jul 31, 2019 07:04 PM|coreysan|LINK
I removed the reference to "btn-block" but nothing gained.
The only change was that it added rounded-corners to the buttons.
I wonder if it has to do with my version of bootstrap - 3.4.1, an older version.
All-Star
43731 Points
18710 Posts
Re: How to display block inline using a loop
Jul 31, 2019 07:16 PM|mgebhard|LINK
Is the column wide enough given the parent container? Try adding a border to verify you have enough width.
<div class="row"> <div class="col-2" style="border: pink solid 1px;"> @foreach (string category in Model) { <a class="btn btn-secondary" asp-area="Ordering" asp-controller="Home" asp-action="Index" asp-route-category="@category"> @category </a> } </div> </div>Also you browser's dev tools (F12) can provide this type of information.
Member
25 Points
83 Posts
Re: How to display block inline using a loop
Jul 31, 2019 10:19 PM|coreysan|LINK
Brilliant catch! I didn't notice col-2, which should have been bigger.
Looks fabulous now - I can't thank you enough!