How to get reactive text in the bootstrap 3 grid?

advertisements

I want the the following code to work with resize of the browser window in such way that text in each grid cell always remains on screen. The following code for some reason cuts the end of the text if there is no more space to show the text and I want the text to be splitted on rows instead.

<html>
<head>
    <title></title>
    <script src="scripts/jquery-2.0.3.js"></script>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
    <script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>

    <div class="container">
        <div class="row-fluid">
            <div style="background:gray" class="col-xs-12 col-sm-12 col-md-12">
                <h5 class="text-center">Title</h5>
            </div>
        </div>

        <div class="row">
            <div style="background:green" class="col-xs-3 col-sm-3 col-md-3">
                <p>cell1cell1cell1cell1cell1cell1</p>
            </div>
            <div style="background:red" class="col-xs-3 col-sm-3 col-md-3">
                <p>cell2cell2cell2cell2cell2cel22</p>
            </div>
            <div style="background:blue" class="col-xs-6 col-sm-6 col-md-6">
                <p>cell3cell3cell3cell3cell3cell3</p>
            </div>
        </div>

        <div class="row">
            <div style="background:gray" class="col-xs-12 col-sm-12 col-md-12">
                <button type="button" class="btn btn-default btn-sm pull-right"><i class="glyphicon glyphicon-remove"></i>  Cancel</button>
                <button type="button" class="btn btn-primary btn-sm pull-right"><i class="glyphicon glyphicon-ok"></i> Ok</button>
            </div>
        </div>

    </div>

</body>
</html>


These words are not showing in 2 rows because there is no space in these words. It is treated as a single word. A single word is never splited in another row.

Use some spaces between these long words. Then they will show in 2 rows

Hope this helps you