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 can I simply freeze the first row of my table using pure Javascript, no plugins?

    How to find equivalent property in Mozilla of given Webkit CSS property

    How to do centered

    with
    on both sides over a background image

    How to concat js/css files and replace in html using gulp?

    how can I use of a php variable into a .css file

    HTML CSS Form - How to center the form on the page?

    How to get menu text vertically aligned with inherited height

    How to share js/css/images across Rails applications?

    How to override the slide effect to dissolve effect in JQuery Mobile using CSS3 feautures?

    How to Change main menu color?

    How style DIV when the id inclue strings in php?

    Bootstrap How-to: checkbox should change text input value when selected/checked [closed]

    How to make an item background visible on overflow?

    CSS: how to stop text from taking up more than 1 line?

    How to add image and change visibility on hover CSS

    :hover property overriden after jquery effect, how to get it back?

    How to make a scrollable div inside of a div with a specific height

    How do I align this CSS correctly?

    html/css, how to make element padding not cover over previous elements?

    How to ONLY target Chrome DevTools window in CSS?

    How to center align a glyphicon to the middle of the page at all screen sizes

    CSS, knockout.js : how to dynamically assign id to checkbox with foreach data-bind

    How to select a css class as selected dynamically in mvc

    How to fix the my Anchor link issue [duplicate]

    How to apply style to Nth instance of class, and find by indirect inheritance - CSS Jquery

    How do I make
  • with block elements sit beside each other?
  • How to make Instagram.js feed responsive in Bootstrap?

    How do I override a css value?

    How to place an image on top of Bootstrap NavBar while keeping links clickable?

    How to add spacing in between
    [duplicate]