nmit026 nmit026 - 25 days ago 8
HTML Question

Bootstrap buttons overflowing well, need to wrap and align

I'm trying to get my links, which are styled with

btn btn-link
to wrap around and line up vertically on the left when the viewport is shrunk down to roughly iPhone 4 size:

<div class="well well-sm">

<a href="" class="btn btn-link">link</a>

</div>


enter image description here

I've researched other answers and I've tried adding
white-space:normal
to the tag. But then I get this:

enter image description here

But that's not really good enough. It needs to wrap and then line up vertically on the left like the original. How do I do this?

JSFiddle:
https://jsfiddle.net/vk7fftku/4/
(My first one!)

Shrink the browser (viewport) down to the width of, say, an iPhone, and you'll see what I mean.

Also, any solution should allow the links to flow from left to right at larger screen widths. This overflow problem only happens for narrow screen widths.

Answer

Sorry wasn't too sure how you wanted it formatted.

I double check your jsFiddle you provided.

Add this to the CSS part of the jsFiddle and the words will wrap as expected.

Added the text-align noticed that the texted stayed centered and you do not want that, so add the additional css text-align: left !important; The !important overrides the bootstrap css defaults.

a {
  white-space: normal !important;
  text-align: left !important;
}

I also updated my original jsFiddle

a {
  white-space: normal !important;
  text-align: left !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="well well-sm">

        <a href="" class="btn btn-link">link is really long and won't wrap on small screens</a>
        
        <a href="" class="btn btn-link">link</a>

</div>