Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Bootstrap - table width

Posted on 2016-08-24
7
Medium Priority
?
1,040 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 10

Expert Comment

by:Tom
ID: 41769529
Use for example:

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

And you have half the page
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

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

Accepted Solution

by:
Tom earned 2000 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 60

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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

972 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