Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Nimrod Resulta
15
Bootstrap Grid System with Angular Material
posted

How can I use Bootstrap Grid System with Angular Material? I am good with all the Angular Material components but I want to utilize the grid system on bootstrap for my group input fields? Is this supported? I have installed "ng add @ng-bootstrap/ng-bootstrap" but it seems like it is not working. I tried the code below to play around with rows and columns but it doesn't work. Hope you can enlighten and guide me on this?

<div class="container">
  <div class="row">
    <div class="col-2">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>
Parents
No Data
Reply
  • 2480
    Offline posted
    Hello Nimrod,

    Could you please elaborate whether you are trying to apply Bootstrap styling to IgniteUI for Angular controls? If so, I can suggest referring to the Bootstrap Theming topic in our documentation, where details and samples regarding applying bootstrap theming can be found.

    Please, keep in mind that NgBootstrap is a separate library and in case your question is about its general usage and is not related to Infragistics controls, this would be considered as out of scope of Infragistics Developer Support. Thank you for understanding.

    Lastly, in general, for the Bootstrap styling to kick in you have to link the regular Bootstrap CSS in your <head> section: 

     

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

     

    Sincerely,
    Bozhidara Pachilova
    Associate Software Developer
Children
No Data