Posts

Showing posts with the label bootstrap-4

Bootstrap 4 Modal - Menu

Image
Clash Royale CLAN TAG #URR8PPP Bootstrap 4 Modal - Menu a { color: inherit; text-decoration: inherit; } a:hover { color: inherit; text-decoration: inherit; } body { font-family: 'Roboto Condensed', sans-serif; } /* ---------------------------------------------------- */ /* navigation */ .navbar-toggler:focus, .navbar-toggler:active { outline: none; border: none; box-shadow: none; } .menu { padding-left: 10px; } .fa-bars, .menu { color: #006699 !important; } .navbar-text { color: gray; } .mainlink { font-size: 1.75em; line-height: 1.25em; font-weight: 400; } .sublink { font-size: 1em; line-height: 1.15em; } .navbar-toggle { margin-left: 15px; margin-right: 0; } .modal-nav-content { /* width: 100%; */ height: auto; } .modal-nav-body { margin-top: 10em; } .modal-nav-body p { color: white; margin: 0; padding: 0; padding-top: 6px; padding-bottom: 6px; /* width: 100%; */ } .modal-nav-body h5 { color: white; line-...

Bootstrap columns not working[1]

Image
Clash Royale CLAN TAG #URR8PPP Bootstrap columns not working[1] Below are the two html files and i am using bootstrap i both of them but i am not able to figure out why bootstrap columns are not working recipies.component.html <div class="row"> <div class="col-md-5"> <app-recipie-list></app-recipie-list> </div> <div class="col-md-7"> <app-recipie-detail></app-recipie-detail> </div> </div> app.component.html <app-header></app-header> <div class="container"> <div class="row"> <div class="col-md-12"> <app-recipies></app-recipies> <app-shopping-list></app-shopping-list> </div> </div> </div> can someone tell me what is the error???? do you install bootstrap to your project? – לבני מלכה 2 mins ago ...

Bootstrap 4 modal pop up header login stretch to the right

Image
Clash Royale CLAN TAG #URR8PPP Bootstrap 4 modal pop up header login stretch to the right My bootstrap 4 login pop up on the header stretch all the way to the right when clicked. My header The header when I clicked the login pop up Here's my link code: <li class="nav-item"> <a class="nav-link btn btn-outline-info px-4 mt-1" data-toggle="modal" data-target="#loginModal1">Login</a> </li> Here's my modal code: <div class="modal fade" role="dialog" id="loginModal1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title">Modal Login Form</h3> <button type="button" class="close" data-dismiss="modal">&times;</but...

adding column in a table disable features

Image
Clash Royale CLAN TAG #URR8PPP adding column in a table disable features I have downloaded a template in that there is an example of a table when i try to add a column in it some of it features are disabled like sorting, searching etc. <div class="box"> <div class="box-header"> <h3 class="box-title">Data Table With Full Features</h3> </div> <!-- /.box-header --> <div class="box-body"> <table id="example1" class="table table-bordered table-striped"> <thead> <tr> <th>Rendering engine</th> <th>Browser</th> <th>Platform(s)</th> <th>Engine version</th> <th>CSS grade</th> </tr> </thead> <tbody> <tr>...

How can I see the style I apply to an html page (bootstrap) on a browser?

Image
Clash Royale CLAN TAG #URR8PPP How can I see the style I apply to an html page (bootstrap) on a browser? I know this was already answered somehow here on stackoverflow but I couldn't find a solution yet. I am using bootstrap to style my html, the problem is when I try to visualize it in the browser(safari and chrome) or in the previewer in Visual Studio Code, it only shows the raw html. I've been all day trying different stuff but I can't find the answer. When I deploy it to a local server, it works. How the files are organized: Raw HTML: Code for adduser.html: <div class="adduser"> <h2>Add user</h2> <form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-lg-3 control-label" for="inputUsername">Username</label> <div class="controls"> <div class="input-group col-lg-5"> ...