Menu
Recently, we upgraded from Angular 5 to Angular 6.
The issue: Bootstrap button styles now have no margin spacing between them.
Bootstrap Version: 3.3.7
For example, if in the html you do something like this.
<div>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-cancel">Cancel</button>
</div>
Before we updated, these buttons would have margin space between each.
Just curious if there is something we can update that would fix this or a global CSS style that can be used.
812
To create a toolbar, wrap more button groups into a . btn-toolbar . No spacing is added automatically between the button groups. To add some spacing to your toolbar, use Bootstrap spacing utilities.
There are several methods that we can use to put spacing between two buttons. But the easiest way to achieve this is by using the margin property. You can either apply margin-right on the first button or margin-left on the second button. Both ways you can achieve the same task.
After creating the project, you need to install Bootstrap 4 and integrate it with your Angular project. First, navigate inside your project’s root folder: Next, install Bootstrap 4 and jQuery from npm:
dependency version in package.json. 2. Update Configuration Files Above command have updated some configuration, but still, project is in v5. Now to Upgrade Angular 5 to 6 upgrade core packages. 3. Update Angular Core Packages to use the latest Angular CLI commands. All CLI commands now use two dashes for flags (eg. ) to be POSIX compliant.
ng-bootstrap comes with a huge selection of components. Some of these components are available in Bootstrap, while others are not. In the ng-bootstrap documentation, you can find the code example for all the components that you can use directly to your project so that you don’t have to build anything from the ground up.
Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
In my project I was able to restore default white spaces between Bootstrap buttons, by setting preserveWhitespaces to true in main.ts file:
platformBrowserDynamic()
.bootstrapModule(AppModule, { preserveWhitespaces: true})
.catch(err => console.log(err));
Found it in this place
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
