How to override CSS to change of bootstrap


Tags: html,css,twitter-bootstrap

Problem :

I want some of the table headers to be aligned to the center, while the other to the left. I tried vaiours methods to override the the in bootstrap. But I couldnt succeed. Here are the things I tried out :

I created a class called as column-center. The html looks like this :

<thead>
  <tr>
    <th>Roll#</th>
    <th style="width: 20%">First Name</th>
    <th style="width: 20%">Middle Name</th>
    <th style="width: 20%">Last Name</th>
    <th class="column-center" style="width: 10%">Class</th>
    <th class="column-center" style="width: 10%">Division</th>
  </tr>
</thead>

The CSS I tried are :

.column-center > thead > tr > th{
text-align: center !important;
}
.column-center > thead > tr > th, .column-center > tbody > tr > th, .column-center > tfoot > tr > th, .column-center > thead > tr > td, .column-center > tbody > tr > td, .column-center > tfoot > tr > td{
text-align: center !important;
}
.column-center > tr > th{
text-align: center !important;
}
.column-center .table > thead > tr > th{
text-align: center !important;
}
table > thead > tr > th .column-center{
text-align: center !important;
}
table.table.table-striped tr.column-center td{
text-align: center !important;
}
.column-center > thead > tr > th, .column-center > tbody > tr > th, .column-center > tfoot > tr > th, .column-center > thead > tr > td, .column-center > tbody > tr > td, .column-center > tfoot > tr > td{
text-align: center;
}
.table-striped > tbody > tr:nth-child(odd) > th.column-center {
text-align: center !important;
}
.table-striped > tbody > tr:nth-child(odd) > td.column-center {
text-align: center;
}
.table tbody tr th{
text-align: center;
}


Solution :

I have a solution for your issue i had added snippet code here, simply add a class(centre-align) in html and gave style(text-align) in your custom style-sheet.

in head section of the HTML don't forget to add the customised style sheet bellow the bootstrap style sheet

<head>
    <link href="../bootstrap.min.css" rel="stylesheet"/>
    <link href="../custom-style.css" rel="stylesheet"/>
</head>
<body></body> 

.center-align{
  text-align:center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <h2>Condensed Table</h2>
  <table class="table table-condensed">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th class="center-align">Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>


    CSS Howto..

    How to make my delete buttons responsive and stay absolute on my thumbnails

    css: how to put text between two images side by side?

    How to make arc-in animation on a website - CSS or JavaScript?

    How div automatically adjust their size and positions the element inside it

    How to vertically center text next to a radio button

    How do I show specific images from a get_children array in WordPress

    How to add css class on every third post in wordpress?

    How to make custom shape div, or manipulate divs

    How to detect IE8 separate from newer versions when IE8 compatibility set

    How do you make a div display two inline items that stretch the width?

    How do I keep floated child divs from wrapping?

    How to use #resource in CSS?

    How to change width to fill the remaining space (CSS)

    How to remove
      unordered list's last
    • list item's border using css without changing anything in HTML code?

    How to generate code for cross browser compatibility css in sublime or atom

    How to add element to existing css class [closed]

    Show nav once the nav has been hidden

    How to change text-selection styles with javascript [duplicate]

    How should I re-create this design in HTML and CSS?

    How to know from css if a select is opened

    how to highlight currently opened page link in css

    How to increase the gap between text and underlining in CSS

    How to include a CSS link if a call isn't done via AJAX?

    CSS: How to I exclude a DIV and its descendents?

    How to use SVG Sprite Sheet as CSS background-image while maintaining aspect ratio and scalability

    How to make the width property to work as auto in css

    CSS Layout. Can not get idea how to fix it

    How to pause a CSS keyframe animation when it ends the first cycle?

    simple css issue - how to change anchor inside li if li:hover

    How to increase div width according to the text inside it?