Solved

Bootstrap - table width

Posted on 2016-08-24
7
23 Views
Last Modified: 2016-08-25
I want to create a table using Bootstrap. How can I set a width of this table? Right now, it stretch across a web page?

<table class="table table-bordered">
                <thead>
                    <tr>
                       
                        <th>Header</th>
                     
                    </tr>
                </thead>
                <tbody>
                    <tr>
                       
                        <td>John</td>
                       
                    </tr>
                   
                </tbody>
            </table>
0
Comment
Question by:jagr12
  • 2
  • 2
  • 2
  • +1
7 Comments
 
LVL 19

Expert Comment

by:Montoya
ID: 41769523
in bootstrap it's all about rows and columns. Your columns are based on a value of 12, so you want to set the column based on the viewable area (large, medium, small, xsmall, etc..) then your columns would be based on that 12 value. 2 columns with a 6 value would be half the width each. 3 columns with a 4 value would be 1/3 width each.

You can adjust based on your needs.
0
 
LVL 19

Expert Comment

by:Montoya
ID: 41769525
0
 
LVL 9

Expert Comment

by:Tom
ID: 41769529
Use for example:

 <div class="col-md-6">

And you have half the page
0
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

Author Comment

by:jagr12
ID: 41769536
It is possible to center this able too?
0
 
LVL 9

Accepted Solution

by:
Tom earned 500 total points
ID: 41769541
<div class="col-md-3">
</div>

 <div class="col-md-6">
center content
</div>

 <div class="col-md-3">
</div>
0
 

Author Comment

by:jagr12
ID: 41769548
Thank you gentlemen
1
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41769850
Alternative to creating empty <div>
<div class="col-md-6 col-md-offset-3">
   <table ....>
</div>

Open in new window

More info on the Bootstrap site
http://getbootstrap.com/css/#grid-offsetting
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question