Wrapping Text in an alert box

Report · Nov 30, 2016

Good morning,

I created an alert for a website and am trying to figure out how to get the text to wrap automatically in Dreamweaver CC 2017 Bootstrap. Right now, the code continues on one line off the page. My code is below.

Thank you.

<button type="button" class="btn btn-link"><strong>INCLEMENT WEATHER POLICY: TEMPLE ISRAEL OF SOUTH MERRICK FOLLOWS THE SAME POLICY AS BELLMORE MERRICK CENTRAL HIGH SCHOOL DISTRICT. CLICK HERE FOR UPDATED INFORMATION <a href="http://www.w3.org/">http://www.bellmore-merrick.k12.ny.us/</a></strong></button></div></div><br />

Report · Nov 30, 2016

It would help if you wrap the Alert inside a row and a col -- the same as other Bootstrap elements.

<div class="row">

<div class="col-sm-8 center-block">

YOUR ALERT BOX CONTENT GOES HERE...

</div>

</div>

</div>

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 30, 2016

Nancy, if I wanted it across 12 columns and large text, would it be

Report · Nov 30, 2016

Also in using your code above, the box is centered, however, the text still is on one line and goes off the page.

Thanks

Report · Nov 30, 2016

The Bootstrap col- classes for mobile through desktop viewports are xs, sm, md & lg.

lg has no effect on text-size.

For bigger text, use heading tags <h1> or <h2> or <h3> inside your alert box.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 30, 2016

What about the second comment? I used the code and still the text goes "off the page".

<div class="col-sm-12 center-block"> *I used 12 because I wanted the box and text to go across the entire width of the page.*

<button type="button" class="btn btn-link"><strong>INCLEMENT WEATHER POLICY: TEMPLE ISRAEL OF SOUTH MERRICK FOLLOWS THE SAME POLICY AS BELLMORE MERRICK CENTRAL HIGH SCHOOL DISTRICT. CLICK HERE FOR UPDATED INFORMATION <a href="http://www.w3.org/">http://www.bellmore-merrick.k12.ny.us/</a></strong></button></div></div><br />

</div>

And I just saw something I have to change but that's in the <a href="...>.

Report · Nov 30, 2016

Try this:

<!doctype html>

<html>

<head>

<title>Bootstrap 3.3.6 Starter</title>

<!--[if lt IE 9]>

<![endif]-->

<style>

.center-block {float:none}

</style>

</head>

<body>

<h1>INCLEMENT WEATHER POLICY: </h1>

<h2>Temple Israel of South Merrick follows the same policy as Bellmore Merrick Central High School District.</h2>

<p><a class="btn btn-lg btn-danger" href="http://example.com">Updated Weather Info</a></p>

</div>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Wrapping Text in an alert box

1 Correct answer