SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    933
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Cool Bootstrap wrapping word inside grid?

    Hi guys

    I'm trying to experiment the grid system of bootstrap.
    I want to try how to wrap words inside it.

    Here are the codes,
    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title>Grid System</title>
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
      </head>
      
      
      <body>
        <h1>Grid Demo!</h1>
    	
    	<div class="row">
    	  <div class="span4">span4span4span4span4span4</div>
    	  <div class="span8">span8span8span8span8span8span8span8span8span8span</div>
    	</div>	
    	<div class="row">
    	  <div class="span6">
    		<h2>Hello kitty.</h2>
    			<p>span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6span6</p>
    	  </div>
    	  <div class="span6">span6span6span6span6span6span6</div>
    	</div>		
    	<div class="row">
    	  <div class="span12">span12span12span12span12span12span12span12span12span12span12span12span12span12span12</div>
    	</div>	
    	
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="js/bootstrap.min.js"></script>
      </body>
    </html>
    But unfortunately it doesn't auto wrap?
    How to wrap the sentences/words when it reaches the end of the span/row ?

    Thanks in advanced.
    Quality codes are optimized and tested...
    Click here for inspiration..

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    What happens if you put spaces between the words?

  3. #3
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    933
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I will try that LOL ^__^
    Quality codes are optimized and tested...
    Click here for inspiration..

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Or, if you must have them thar long words, you can use:

    Code:
    p {word-wrap:break-word;}
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •