All geek questions in one place

Unable to create columns with Twitter Bootstrap

I want to learn Bootstrap. I have a problem with the grid. I cannot create columns in rows.

This sample code should work, but I did not get it to work:

<!DOCTYPE html> <html> <head> <link href="css/bootstrap.css" rel="stylesheet"> </head> <body> <div class="container"> <ul class="nav nav-pills"> <li class="active"> <a href="#">Home</a> </li> </ul> <div class="row"> <div class="span2"> ID </div> <div class="span2"> Name </div> <div class="span8"> E-Mail </div> </div> <div class="row"> <div class="span2"> 100001 </div> <div class="span2"> Joe </div> <div class="span8"> < replacedEmail@nowhere.com > </div> </div> <div class="row"> <div class="span2"> 100 </div> <div class="span2"> Christine </div> <div class="span8"> < replacedEmail@nowhere.com > </div> </div> </div> </body> </html>

Below is the displayed result in my browser:

! [The image should be here, but it contains personal email addresses] [1]

The result should be something like a table.

What is wrong with my code? Thanks!

+4
source share
2 answers

This is because you use CSS 2.x class names (i.e. span* ) using Bootstrap 3. Check out this list of changes from 2.x to 3: http://bootply.com/migrate-to-bootstrap -3

Using the upgrade tool at http://upgrade-bootstrap.bootply.com/ , I changed your markup to ...

 <div class="container"> <ul class="nav nav-pills"> <li class="active"> <a href="#">Home</a> </li> </ul> <div class="row"> <div class="col-lg-2"> ID </div> <div class="col-lg-2"> Name </div> <div class="col-lg-8"> E-Mail </div> </div> <div class="row"> <div class="col-lg-2"> 100001 </div> <div class="col-lg-2"> Joe </div> <div class="col-lg-8"> MamiePVillalobos@teleworm.us </div> </div> <div class="row"> <div class="col-lg-2"> 100 </div> <div class="col-lg-2"> Christine </div> <div class="col-lg-8"> ChristineJWilliams@dayrep.com </div> </div> </div>

Bootply demo: http://bootply.com/73851

+1
source

You need to add Bootstrap js and Bootstrap CSS to view as a table. Add the following lines to the header of your code.

 <script src="http://www.w3resource.com/twitter-bootstrap/bootstrap/js/bootstrap.min.js"></script> <link href="http://www.w3resource.com/twitter-bootstrap/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
0
source

Source: https://habr.com/ru/post/1496741/

More articles:


All Articles