Solution 1 :

On the card, change d-sm-flex to d-flex. d-sm-flex is not getting triggered on breakpoints below 576px, which happens to be most Portrait oriented mobile devices. Also, you don’t want flex-wrap set, at least for mobile, since you seem to want the content side to stay to the right and not stacked beneath

It looks like you already have it below the card within the card-footer, which automatically uses text-align right across all breakpoints. Is this not what you want? From a UI standpoint, user behavior is more inclined to right-aligned buttons hence why the hamburger is on the right side.

For tablet+, IMO having the request link below is also acceptable. But you do have a lot of horizontal real-estate to use so you could get away with the following adjustment:



I would also recommend that if you make any CSS selector adjustments, don’t make them directly on the .card selector. Add another CSS class to these specific cards, like <div class="card card--song" />, so that you don’t override the global .card styling provided by bootstrap and instead override it at a component level (.card--song).

Problem :

I lifted the code to create a horizontal card for my band’s website which can be seen here:

I really like the look – but when the cards are viewed on a mobile device, the rows stack and I don’t like it as much.

The version I like


the version I don’t like (shows like this on smaller devices)

So, 2 things…

  1. How do I prevent the rows from stacking?
  2. I need to add a link on the far right that will just say “Request” – This will show up based on a setting in my database (basically if I turn on requests for the gig) – I am not worried about the styling, I can do that later (although I just will want it centered top to bottom of the card). But I need help with bootstrap code to show or not show.

I can put the HTML code in here – but it can be seen on the site – let me know if I need to post it here and I will.


Comment posted by Ben Sewards

on the card, change

Comment posted by Mike Henry

Ok I believe I have the cards not stacking and all looks good there. I just published the changes. Now I need to make the request link good for both normal and mobile. Maybe out to the right on normal bigger screens but stacked down blow on mobile? Ideas?