• Saturday , 18 November 2017

Bootstrap tutorial 9 – Tables

Code Canyon
https://i.ytimg.com/vi/YnrEGDdJfSk/hqdefault.jpg



In this tutorial I show you how to use tables in Boostrap.

Useful links:
———————————–
Don’t forget to subscribe:
www.youtube.com/QuentinWatt

Follow me on Twitter:
www.twitter.com/QuentinWatt

Follow me on Facebook:
www.facebook.com/quentin.watt

Feel free to donate:
https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=CH68DBULMJ37N
————————————

Original source

3d Ocean

Related Posts

29 Comments

  1. Mujahid Sac
    November 10, 2017 at 12:18

    Nice tutorial! Do you know how to allow the table to fit the screen size? So if there is long text, it'll condense into multiple lines instead of one long line and taking up all the space of the page. Appreciate if you can help out.

  2. Megha Misra
    November 10, 2017 at 12:18

    I am working on MVC 5 and there is one table in which I am accessing through a model and view. I have to add few more column and data in that table in sql database after adding everything my table structure on a browser is not right it is outside of a table or panel. How can I fix it? and in future, I may have to add more columns. how can I fix this problem? I have edit and delete link also in that table.

  3. Karen C Silva
    November 10, 2017 at 12:18

    It would be great if you did a tutorial about the plugin bootstrap-table (http://bootstrap-table.wenzhixin.net.cn/). I am trying to use it. Thanks! And congratulations for your video.

  4. somehow
    November 10, 2017 at 12:18

    You could sell a small Bootstrap reference manual that summarizes your series, purple small minimalistic paperback book reference of the most used topics with images

  5. Samin Hajrulahovic
    November 10, 2017 at 12:18

    table-responsive
    table to be responsive

  6. Felipe Ojeda
    November 10, 2017 at 12:18

    Thanks. Great Job!!!

  7. El Diablo
    November 10, 2017 at 12:18

    I'm starting to get really confused by these tutorials. Maybe I missed something along the way. Where in the code is the data that can be seen in the table ?

  8. Tom Davis
    November 10, 2017 at 12:18

    great stuff!!

  9. dalal hassan
    November 10, 2017 at 12:18

    a helpful video , does anyone knows how to hide the <tr> line that shows on the table ? i want it without a line break

  10. Amir Razaq
    November 10, 2017 at 12:18

    Any body te;;me how we can join a sql table with bootstrap table ??

  11. Dee Maya
    November 10, 2017 at 12:18

    I'm super stomped! I've tried everything (that I know) to make this right and it doesn't work. I have a table going for filmography, I have an h4 before the table. I'm done with this table, now I want to start a new table under the existing one with a h4 under the existing table as well. But my h4 keeps going under my top h4 (which is on top of my table) .How can I get my new h4 under the existing table to start a new table??This might be a total noob question, but I'm seriously stuck.

  12. Bob Smith
    November 10, 2017 at 12:18

    what a shame! A serious tutorial teaching coding should have audio. What a waste of time!

  13. Ageel Shatry
    November 10, 2017 at 12:18

    Below is the source code for the table. Like this comment to put it on the top so other students can easily see it..

    <body>
    <div class="container">
    <div class="row">
    <div class="col-xs-12">
    <table>
    <tr>
    <th>
    #
    </th>
    <th>
    First Name
    </th>
    <th>
    Last Name
    </th>
    <th>
    Percentage/Year Mark
    </th>
    </tr>
    <tr>
    <td>1</td>
    <td>Sean</td>
    <td>Pooley</td>
    <td>92%</td>
    </tr>
    <tr>
    <td>2</td>
    <td>Ryan</td>
    <td>Shcwulst</td>
    <td>88%</td>
    </tr>
    <tr>
    <td>3</td>
    <td>Kyle</td>
    <td>Beecham</td>
    <td>86%</td>
    </tr>
    </table>
    </div>

    </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <!– Latest compiled and minified JavaScript –>
    <script src="js/bootstrap.min.js"></script>
    </body>

  14. Linh Nguyen
    November 10, 2017 at 12:18

    Is it just me coz I can't see the stripes on the table? It looks all white to me.

  15. Ahmed Yusuf
    November 10, 2017 at 12:18

    my nigga Quentin!

  16. INF Persian
    November 10, 2017 at 12:18

    plop

  17. Chidindu Uwaeziozi
    November 10, 2017 at 12:18

    How can I get rows or data in them show up in a particular background or foreground color if less or more than a certain value?

  18. Amr SubZero
    November 10, 2017 at 12:18

    Where is the goddamn table-responsive class?
    came for it, ended up with a headache.
    stop talking too much and go a little straightforward.

  19. ii iml0sto1
    November 10, 2017 at 12:18

    You usualy strart from the start… or atleast show the whole code, i know nothing about tables so this was kinda annoying since this is what i need and you have been my guide the past two months.. the first down thumb i have ever given you 🙁

  20. AMC Films
    November 10, 2017 at 12:18

    What about making a schedule, weekly classes for example
    once I put the days across if i resize it the fields go off the browser

  21. Ethan Leyden
    November 10, 2017 at 12:18

    Um, I copied the table, and then when I added the table class, the line under the <th> row decided that it didn't want to go all the way and stop at the "Last Name" <th> element.

  22. Adriana Giancarla
    November 10, 2017 at 12:18

    good intro to tables on bootstrap!

  23. Eric Martinez
    November 10, 2017 at 12:18

    Great tutorials Quentin. I always recommend your videos to others. My question, well observation is: I found out last year you could give an element a class and a ID, but apparently you can give multiple classes and perhaps multiple IDs to an element? How much can one add to one element? I found this to be pretty cool, there I said your phrase too lol.

  24. Robert Baggett
    November 10, 2017 at 12:18

    Great tutorial.  I did have two questions concerning "table-striped" and "table-hover".

    When you were using "table-striped", I didn't see the zebra effect in your video and in my local setup.  I repeatedly watched that portion of your video over and over, I even tilted my screen to see if maybe I was missing something.  The background is white the whole time.

    When you were using "table-hover", none of the rows highlighted while hovering over them.  I got the same results as well in my local setup.  I ensured that I had all the bootstrap files and javascripts included like you did.

    After further research, I found someone had an issue getting these 2 items to work in bootstrap 3.  The fix I found was to add the following to your 'main.css' file:

    .table-hover tbody tr:hover td
    {
        background-color: Blue;
        color: White;
    }

    .table-striped>tbody>tr:nth-child(odd)>td,
    tr.found{
        background-color:#CECBCB;
    }

  25. Hunter Worner
    November 10, 2017 at 12:18

    your vids are very helpful def subscribing! you're my role model thank you very much!

  26. Jakob Engberg-Pedersen
    November 10, 2017 at 12:18

    Hey Quentin. I really like your videos and it could be so nice if you could make some videos about mySQL with phpMyAdmin.

  27. Nam Truong
    November 10, 2017 at 12:18

    Hi Quentin, I've been following your tutorial videos for a while and it helps me a lot to improve my coding skill. Thank you so much for your tutorials/lessons.

  28. Ashraf Ali
    November 10, 2017 at 12:18

    Thanks for ur tuts. How can i know all the bootstrap class names & its features? 

  29. MrRedhawk16
    November 10, 2017 at 12:18

    Nice bro !

Leave A Comment

You must be logged in to post a comment.