CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Sebastian
Sebastian

Reputation: 53

bootstrap grid doesn't align the same way as a <table>

I'm trying to convert from table to bootstrap grid for mobile comparability. Below is an image of both of them on one page but even though they both follow the same css, bootstrap isn't at the center unlike table is. Can someone please explain this to me because this makes no sense.

Thank you

table is at the top and Bootstrap is at the bottom

table is at the top and Bootstrap is at the bottom

and here's my HTML

.platinum2 {
        color: #FFFFFF;
        font-size: 30px;
        font-weight: 600;
        line-height: 41px;
        text-align: center;
    }
   .package_text {
	color: #FFFFFF;
	font-family: "lato";
	font-size: 14px;
	font-weight: 500;
	line-height: 26px;

}
.package_price {

	color: #FFFFFF;
	font-family: "lato";
	font-size: 16px;
	font-weight: bold;
	line-height: 14px;
	text-align: center;
}
.glyphicon-star{
	font-size: 20px;
}
<div class="row" style="width:50%;margin-left:25% ; margin-bottom:25px; text-align:center">
            <h1 class="platinum2">Platinum <br><span class="glyphicon glyphicon-star" style="color:#FFFACC" /><span class="glyphicon glyphicon-star" style="color:#FFFACC" /><span class="glyphicon glyphicon-star" style="color:#FFFACC" /> </h1>
            <div class="col-md-6" >
                <span class="package_text">Hand Wash<br>Full Interior<br>Complete Vacuum<br>Leather Clean+Shine<br>
                &nbsp;<br />
                Tire Dressing<br>Tire and Rim Detailing<br>Engine Shampoo<br />
                &nbsp;<br /></span>
               <span class="package_price"> Cars: $189</span>
            </div>
            <div class="col-md-6">
                <span class="package_text">Roof Liner<br>Full Body Wax<br>Clay Bar Treatment<br>Interior Shampooing<br />
                    &nbsp;<br />
                    Complete Detail<br>In & Out Windows<br>Door Jam Cleaning<br />
                    &nbsp;<br /></span>
                <span class="package_price">SUVs: $199</span>
            </div>
        </div>
    </div> 
    <div class="container" style="background-image:url('/images/StripedBGDetailPackages.png' ); align-items:center; text-align:center; margin-top:25px; padding-top:25px;  background-size:100%" >
        <table style="width:50%;margin-left:25% ; margin-right:25%; margin-bottom:25px;">
            <tr>
                <td class="platinum2">Gold</td>
                <td class="platinum2">Silver</td>
            </tr>
            <tr>
                <td><span class="glyphicon glyphicon-star" style="color:#FFFACC" /><span class="glyphicon glyphicon-star" style="color:#FFFACC" /></td>
                <td><span class="glyphicon glyphicon-star" style="color:#FFFACC" /></td>
            </tr>
            <tr>
                <td class="package_text">Hand Wash</td>
                <td class="package_text">Hand Wash</td>
            </tr>
            <tr>
                <td class="package_text">Complete Vacuum</td>
                <td class="package_text">Clay Bar Treatment</td>
            </tr>
            <tr>
                <td class="package_text">Interior Shampooing</td>
                <td class="package_text">Complete Body Wax</td>
            </tr>
            <tr>
                <td class="package_text">Leather Clean+Shine</td>
                <td class="package_text">Tire and Rim</td>
            </tr>
            <tr>
                <td class="package_text">Complete Deetail</td>
                <td class="package_text">Detailing</td>
            </tr>
            <tr>
                <td class="package_text">In &amp; Out Windows</td>
                <td class="package_text">Tire Dressing</td>
            </tr>
            <tr class="package_text">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td class="package_price">Cars:$119&nbsp;&nbsp;&nbsp;SUVs:$129</td>
                <td class="package_price">Cars:$99&nbsp;&nbsp;&nbsp;SUVs:$109</td>
            </tr>
        </table>
       <div class="row" style="width:50%;margin-left:25% ; margin-right:25%; margin-bottom:25px;">
           <div class="col-md-6">
                <table>
                    <tr>
                        <td class="platinum2">Gold</td>
                    </tr>
                    <tr>
                        <td><span class="glyphicon glyphicon-star" style="color:#FFFACC" /><span class="glyphicon glyphicon-star" style="color:#FFFACC" /></td>
                    </tr>
                    <tr>
                        <td class="package_text">Hand Wash</td>
                    </tr>
                    <tr>
                        <td class="package_text">Complete Vacuum</td>
                    </tr>
                    <tr>
                        <td class="package_text">Interior Shampooing</td>
                    </tr>
                    <tr>
                        <td class="package_text">Leather Clean+Shine</td>
                    </tr>
                    <tr>
                        <td class="package_text">Complete Deetail</td>
                    </tr>
                    <tr>
                        <td class="package_text">In &amp; Out Windows</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="package_price">Cars:$119&nbsp;&nbsp;&nbsp;SUVs:$129</td>
                    </tr>
                </table>
           </div>
           <div class="col-md-6">
               <table>
                   <tr>
                       <td class="platinum2">Silver</td>
                   </tr>
                   <tr>
                       <td><span class="glyphicon glyphicon-star" style="color:#FFFACC" /></td>
                   </tr>
                   <tr>
                       <td class="package_text">Hand Wash</td>
                   </tr>
                   <tr>
                       <td class="package_text">Clay Bar Treatment</td>
                   </tr>
                   <tr>
                       <td class="package_text">Complete Body Wax</td>
                   </tr>
                   <tr><td class="package_text">Tire and Rim</td></tr>
                   <tr><td class="package_text">Detailing</td></tr>
                   <tr><td class="package_text">Tire Dressing</td></tr>
                   <tr><td>&nbsp;</td></tr>
                   <tr><td class="package_price">Cars:$99&nbsp;&nbsp;&nbsp;SUVs:$109</td></tr>
               </table>
           </div>
       </div>

Upvotes: 2

Views: 62

Answers (1)

Dalin Huang
Dalin Huang

Reputation: 11342

To debug, first I added the following since your text are white, and border to everything with 1px solid red color, by doing this it is very easy to see why it is not centered! check the link

body {
  background-color: gray;
}

* {
    border: 1px solid red;
}

https://jsfiddle.net/dalinhuang/aLpv8k3f/4/

Now, as you can see Gold BS it is in the correct position, that's because you need only add the following class to your <table class="fullwidth">

.fullwidth {
    width: 100%;
}

OK, full solution, remove the debug stuff we added:

https://jsfiddle.net/dalinhuang/aLpv8k3f/5/

Also I think your star are not in the same line, update your .glyphicon-star to add this margin-top: -1px;.

.glyphicon-star {
    font-size: 20px;
    margin-top: -1px;
}

Upvotes: 1

Related Questions