bootstrap-4

Bootstrap 3: pull-right for col-lg only

by

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 … Read more

What happened to the .pull-left and .pull-right classes in Bootstrap 4?

by

Bootstrap 4 The classes are float-right float-sm-right etc. The media queries are mobile-first, so using float-sm-right would affect small screen sizes and anything wider, so there’s no reason to add a class for each width. Just use the smallest screen you want to affect or float-right for all screen widths. Official Docs: Classes: https://getbootstrap.com/docs/4.6/utilities/float/ Updating: … Read more

react button onClick redirect page

by

update: React Router v6: import React from ‘react’; import { useNavigate } from “react-router-dom”; function LoginLayout() { let navigate = useNavigate(); const routeChange = () =>{ let path = `newPath`; navigate(path); } return ( <div className=”app flex-row align-items-center”> <Container> … <Button color=”primary” className=”px-4″ onClick={routeChange} > Login </Button> … </Container> </div> ); }} React Router v5 … Read more

Bootstrap carousel multiple frames at once

by

Bootstrap 5 (Update 2021) While the carousel is mostly the same in Bootstrap 5, the concept of left and right have changed to start and end since Bootstrap now has RTL support. Therefore the left/right classes have changed. Here’s an example of the multi-item CSS for 4 items (25% width columns)… @media (min-width: 768px) { … Read more

CSS class for pointer cursor

by

As of June 2020, adding role=”button” to any HTML tag would add cursor: “pointer” to the element styling. <span role=”button”>Non-button element button</span> Official discussion on this feature – https://github.com/twbs/bootstrap/issues/23709 Documentation link – https://getbootstrap.com/docs/4.5/content/reboot/#pointers-on-buttons

Bootstrap col align right

by

Bootstrap 5 (update 2021) To right align elements in Bootstrap 5… float-right is now float-end text-right is now text-end ml-auto is now ms-auto Bootstrap 4 (original answer) Use float-right for block elements, or text-right for inline elements: <div class=”row”> <div class=”col”>left</div> <div class=”col text-right”>inline content needs to be right aligned</div> </div> <div class=”row”> <div class=”col”>left</div> … Read more

How to change the bootstrap primary color?

by

Bootstrap 5 (update 2021) The method is still the same for Bootstrap 5. https://codeply.com/p/iauLPArGqE Bootstrap 4 To change the primary, or any of the theme colors in Bootstrap 4 SASS, set the appropriate variables before importing bootstrap.scss. This allows your custom scss to override the !default values… $primary: purple; $danger: red; @import “bootstrap”; Demo: https://codeply.com/go/f5OmhIdre3 … Read more

Responsive website zoomed out to full width on mobile

by

Add this to your HTML head.. <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″> This tells smaller device browsers how to scale the page. You can read more about this here: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

How to hide collapsible Bootstrap navbar on click

by

Update 2021 – Bootstrap 5 (beta) Use javascript to add a click event listener on the menu items to close the Collapse navbar.. const navLinks = document.querySelectorAll(‘.nav-item’) const menuToggle = document.getElementById(‘navbarSupportedContent’) const bsCollapse = new bootstrap.Collapse(menuToggle) navLinks.forEach((l) => { l.addEventListener(‘click’, () => { bsCollapse.toggle() }) }) BS5 demo javascript method Or, Use the data-bs-toggle and … Read more

Bootstrap 4, How do I center-align a button?

by

In Bootstrap 4 one should use the text-center class to align inline-blocks. NOTE: text-align:center; defined in a custom class you apply to your parent element will work regardless of the Bootstrap version you are using. And that’s exactly what .text-center applies. <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css”> <div class=”container”> <div class=”row”> <div class=”col text-center”> <button class=”btn btn-default”>Centered button</button> … Read more

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)