Posts

Showing posts with the label Bootstrap 4

Bootstrap 4 Datepicker

Answer : You can too override default datepicker classes like the following: the default bootstrap font size is 1rem or 16px so update .datepicker class font-size: 0.875em; or/and update the cell width and height: .datepicker td, .datepicker th { width: 1.5em; height: 1.5em; } <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></head> <body> <main class="cont...
Post a Comment
Read more

Bootstrap 4 Navbar With 2 Rows

Image
Answer : You can use the flex-column flexbox utility class to stack the 2 navs vertically next to the icon. This sets flex-direction: column on the navbar-collapse div so that it's child elements stack vertically. <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> <div class="container"> <button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <h1 class="py-2 ml-lg-2 mx-3"><a href="#"><i class="fa fa-envelope-o fa-lg mt-2" aria-hidden="true"></i></a></h1> <div class="collapse navbar-collapse flex-column ml-lg-0 ml-3" id="navbarCollapse"> <ul class="...
Post a Comment
Read more

Bootstrap 4 Form Input With Icon For Validation

Answer : Bootstrap 4 doesn't include icons (glyphicons are gone), and there are now just 2 validation states ( is-valid and is-invalid ) that control display of the valid-feedback and invalid-feedback text. With a little extra CSS, you can position an icon inside the input (to the right), and control its' display using is-valid or is-invalid on the form-control input. Use a font lib like fontawesome for the icons. I created a new feedback-icon class that you can add to the valid/invalid-feedback . .valid-feedback.feedback-icon, .invalid-feedback.feedback-icon { position: absolute; width: auto; bottom: 10px; right: 10px; margin-top: 0; } HTML <div class="form-group position-relative"> <label for="input2">Valid with icon</label> <input type="text" class="form-control is-valid" id="input2"> <div class="valid-feedback feedback-icon"> ...
Post a Comment
Read more

Bootstrap 4, How To Make A Col Have A Height Of 100%?

Answer : Use the Bootstrap 4 h-100 class for height:100%; <div class="container-fluid h-100"> <div class="row justify-content-center h-100"> <div class="col-4 hidden-md-down" id="yellow"> XXXX </div> <div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8"> Form Goes Here </div> </div> </div> https://www.codeply.com/go/zxd6oN1yWp You'll also need ensure any parent(s) are also 100% height (or have a defined height)... html,body { height: 100%; } Note: 100% height is not the same as "remaining" height. Related: Bootstrap 4: How to make the row stretch remaining height? Use bootstrap class vh-100 for exp: <div class="vh-100"> I have tried over a half-dozen solutions suggested on Stack Overflow, and the only thing that worked for me was this: <div class="row" style="display: flex; flex-w...
Post a Comment
Read more

Bootstrap Toast Does Not Show Up

Answer : You need to put the valid option. i:e show, hide or a callback function . See - https://getbootstrap.com/docs/4.2/components/toasts/. $('.toast').toast('show'); <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <img height="200px" width="200px" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" class="rounded mr-2" alt="..."> <strong class="mr-auto">Boots...
Post a Comment
Read more

Bootstrap 3: Pull-right For Col-lg Only

Answer : You could put "element 2" in a smaller column (ie: col-2 ) and then use push on larger screens only: <div class="row"> <div class="col-lg-6 col-xs-6">elements 1</div> <div class="col-lg-6 col-xs-6"> <div class="row"> <div class="col-lg-2 col-lg-push-10 col-md-2 col-md-push-0 col-sm-2 col-sm-push-0 col-xs-2 col-xs-push-0"> <div class="pull-right">elements 2</div> </div> </div> </div> </div> Demo: http://bootply.com/88095 Another option is to override the float of .pull-right using a @media query.. @media (max-width: 1200px) { .row .col-lg-6 > .pull-right { float: none !important; } } Lastly, another option is to create your own .pull-right-lg CSS class.. @media (min-width: 1200px) { .pull-right-lg { float: right; } } UPDATE Bootstrap 4 ...
Post a Comment
Read more

Bootstrap 4: Responsive Sidebar Menu To Top Navbar

Image
Answer : It could be done in Bootstrap 4 using the responsive grid columns. One column for the sidebar and one for the main content. Bootstrap 4 Sidebar switch to Top Navbar on mobile <div class="container-fluid h-100"> <div class="row h-100"> <aside class="col-12 col-md-2 p-0 bg-dark"> <nav class="navbar navbar-expand navbar-dark bg-dark flex-md-column flex-row align-items-start"> <div class="collapse navbar-collapse"> <ul class="flex-md-column flex-row navbar-nav w-100 justify-content-between"> <li class="nav-item"> <a class="nav-link pl-0" href="#">Link</a> </li> .. </ul> </div> </nav> </aside...
Post a Comment
Read more

Collapse Not Working In Ng-bootstrap And Angular 4 App For Navbar Breadcrumb Button

Answer : I have a solution now. Just using ng-bootstrap solves your issue. Html file: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler btn btn-outline-primary" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="navbarTogglerDemo02"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo02" [ngbCollapse]="isCollapsed"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-l...
Post a Comment
Read more

Change Bootstrap 4 Checkbox Size

Answer : There is currently an issue with this and I reported it to Bootstrap. Until that's fixed do the following: First of all, use the form-control-lg class. Once the issue is fixed using that class will be all you need. Until the issue is fixed add the following css: .custom-control-label::before, .custom-control-label::after { top: .8rem; width: 1.25rem; height: 1.25rem; } Here's a complete working code example: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <style> .custom-control-label::before, .custom-control-label::after { top: .8rem; width: 1.25rem; height: 1.25rem; } </style> <div class="custom-control form-control-lg custom-checkbox"> <input type="checkbox" class="custom-co...
Post a Comment
Read more

Bootstrap 4 - Glyphicons Migration?

Answer : You can use both Font Awesome and Github Octicons as a free alternative for Glyphicons. Bootstrap 4 also switched from Less to Sass, so you might integerate the font's Sass (SCSS) into you build process, to create a single CSS file for your projects. Also see https://getbootstrap.com/docs/4.1/getting-started/build-tools/ to find out how to set up your tooling: Download and install Node, which we use to manage our dependencies. Navigate to the root /bootstrap directory and run npm install to install our local dependencies listed in package.json. Install Ruby, install Bundler with gem install bundler , and finally run bundle install . This will install all Ruby dependencies, such as Jekyll and plugins. Font Awesome Download the files at https://github.com/FortAwesome/Font-Awesome/tree/fa-4 Copy the font-awesome/scss folder into your /bootstrap folder Open your SCSS /bootstrap/bootstrap.scss and write down the following SCSS code at the end of this fil...
Post a Comment
Read more

Bootstrap 4 Fixed Top Nav And Fixed Sidebar

Answer : The sticky-top is working, but it doesn't appear to be working for two reasons... There isn't enough content in the main content area to scroll It's positioned at top:0 so it hides behind the fixed navbar Add CSS to offset the top of the sidebar (the same as height of fixed navbar). .sticky-offset { top: 56px; } <ul class="list-group sticky-top sticky-offset">..(sidebar)..</div> And, then add enough content (or height) in the main area so that scrolling is necessary... Working Demo: https://www.codeply.com/go/7XYosZ7VH5 <nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top"> .. </nav> <div class="row"> <div id="sidebar-container" class="sidebar-expanded col-2 d-none d-md-block"> <ul class="list-group sticky-top sticky-offset"> <li>Menu item..</li> <li>Menu item..<...
Post a Comment
Read more

Bootstrap 4 File Input

Answer : Updated 2021 Bootstrap 5 Custom file input no longer exists so to change Choose file... you'd need to use JS or some CSS like this. Bootstrap 4.4 Displaying the selected filename can also be done with plain JavaScript. Here's an example that assumes the standard custom-file-input with label that is the next sibling element to the input... document.querySelector('.custom-file-input').addEventListener('change',function(e){ var fileName = document.getElementById("myInput").files[0].name; var nextSibling = e.target.nextElementSibling nextSibling.innerText = fileName }) https://codeply.com/p/LtpNZllird Bootstrap 4.1+ Now in Bootstrap 4.1 the "Choose file..." placeholder text is set in the custom-file-label : <div class="custom-file" id="customFile" lang="es"> <input type="file" class="custom-file-input" id="exampleInputFile" aria-describedby=...
Post a Comment
Read more

Bootstrap 4 Change Tooltip Arrow Color

Answer : In bootstrap 4.1 you can use: .bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before { border-bottom-color: red !important; } .bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before { border-top-color: red !important; } .bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before { border-left-color: red !important; } .bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before { border-right-color: red !important; } The selector you are looking for is .tooltip.bs-tether-element-attached-left .tooltip-inner::before : .tooltip.bs-tether-element-attached-left .tooltip-inner::before { border-right-color: red; } If you want every tooltip arrow red - jsfiddle: .tooltip.bs-tether-element-attached-bottom .tooltip-inner::before { border-top-color: red; } .tooltip.bs-tether-element-attached-top .tooltip-inner::before { border-bottom-color: ...
Post a Comment
Read more

Bootstrap Row With Columns Of Different Height

Image
Answer : This is a popular Bootstrap question, so I've updated and expanded the answer for Bootstrap 3 and Bootstrap 4... The Bootstrap 3 "height problem" occurs because the columns use float:left . When a column is “floated” it’s taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box. So, when you have uneven column heights , the correct behavior is to stack them to the closest side. Note : The options below are applicable for column wrapping scenarios where there are more than 12 col units in a single .row . For readers that don't understand why there would ever be more than 12 cols in a row , or think the solution is to "use separate rows" should read this first There are a few ways to fix this.. (updated for 2018) 1 - The 'clearfix' approach (recommended by Bootstrap) like this (requires iteration every X columns). This will force a wrap every X number...
Post a Comment
Read more

Bootstrap 4: Multilevel Dropdown Inside Navigation

Image
Answer : I use the following piece of CSS and JavaScript. It uses an extra class dropdown-submenu . I tested it with Bootstrap 4 beta. It supports multi level sub menus. $('.dropdown-menu a.dropdown-toggle').on('click', function(e) { if (!$(this).next().hasClass('show')) { $(this).parents('.dropdown-menu').first().find('.show').removeClass('show'); } var $subMenu = $(this).next('.dropdown-menu'); $subMenu.toggleClass('show'); $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) { $('.dropdown-submenu .show').removeClass('show'); }); return false; }); .dropdown-submenu { position: relative; } .dropdown-submenu a::after { transform: rotate(-90deg); position: absolute; right: 6px; top: .8em; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-left: .1rem; margin-right: .1rem; } <link rel="s...
Post a Comment
Read more

Can I Use React Bootstrap With Next.js?

Answer : It is obviously possible to use react-bootstrap in a nextjs application. The only problem you might encounter will be in the rendering of your application if javascript is disabled in user's browser if you use react-bootstrap components to build your layout (see example below). Nextjs allows you to display SSG/SSR pages, javascript-disabled users will see your app but the layout will be messy. But if you still want to go with it: npm i react-bootstrap bootstrap Import bootstrap styles in your _app.js: import 'bootstrap/dist/css/bootstrap.min.css'; You can then use your react-bootstrap components as you would do in reactjs: import {Container, Row, Col} from 'react-bootstrap'; const Layout = () => ( <> <Container fluid> <Row> <Col> <p>Yay, it's fluid!</p> </Col> </Row> </Container> </> ); export default Layout; Yes...
Post a Comment
Read more

Change Bootstrap 4 Checkbox Background Color

Answer : you can use the following css to make it red when it is not checked, and black when it is checked .custom-control-label:before{ background-color:red; } .custom-checkbox .custom-control-input:checked~.custom-control-label::before{ background-color:black; } The color of the arrow can be changed by the following code .custom-checkbox .custom-control-input:checked~.custom-control-label::after{ background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='red' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"); } this code will make the tick red, you can change the color by changing the fill='red' value to a color of your choice. Edit: Note, if specifying RGB color, eg. #444444 use %23 for the hash, eg. %23444444 Or you could use any image you like instead. <link rel="stylesheet" href="https://...
Post a Comment
Read more

Bootstrap 4 Align Navbar Items To The Right

Image
Answer : Bootstrap 4 has many different ways to align navbar items. float-right won't work because the navbar is now flexbox . You can use mr-auto for auto right margin on the 1st (left) navbar-nav . Alternatively , ml-auto could be used on the 2nd (right) navbar-nav , or if you just have a single navbar-nav . <nav class="navbar navbar-expand-md navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <sp...
Post a Comment
Read more

Collapsing Sidebar With Bootstrap

Answer : Bootstrap 3 Yes, it's possible. This "off-canvas" example should help to get you started. https://codeply.com/p/esYgHWB2zJ Basically you need to wrap the layout in an outer div, and use media queries to toggle the layout on smaller screens. /* collapsed sidebar styles */ @media screen and (max-width: 767px) { .row-offcanvas { position: relative; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .row-offcanvas-right .sidebar-offcanvas { right: -41.6%; } .row-offcanvas-left .sidebar-offcanvas { left: -41.6%; } .row-offcanvas-right.active { right: 41.6%; } .row-offcanvas-left.active { left: 41.6%; } .sidebar-offcanvas { position: absolute; top: 0; width: 41.6%; } #sidebar { padding-top:0; } } Also, there are several more Bootstrap sidebar examples here Bootstrap 4 Create a responsive navbar sidebar "dra...
Post a Comment
Read more

Bootstrap Carousel Multiple Frames At Once

Answer : Updated 2019... Bootstrap 4 The carousel has changed in 4.x, and the multi-slide animation transitions can be overridden like this... .carousel-inner .carousel-item-right.active, .carousel-inner .carousel-item-next { transform: translateX(33.33%); } .carousel-inner .carousel-item-left.active, .carousel-inner .carousel-item-prev { transform: translateX(-33.33%) } .carousel-inner .carousel-item-right, .carousel-inner .carousel-item-left{ transform: translateX(0); } Bootstrap 4 Alpha.6 Demo Bootstrap 4.0.0 (show 4, advance 1 at a time) Bootstrap 4.1.0 (show 3, advance 1 at a time) Bootstrap 4.1.0 (advance all 4 at once) Bootstrap 4.3.1 responsive (show multiple, advance 1) new Bootstrap 4.3.1 carousel with cards new Another option is a responsive carousel that only shows and advances 1 slide on smaller screens , but shows multiple slides are larger screens . Instead of cloning the slides like the previous example, this one adjusts the CSS and use jQ...
Post a Comment
Read more