`bootstrap.css` should contain all the CSS you need to use Bootstrap in your project.

The files `bootstrap-reboot.css` and `bootstrap-grid.css` are cut down versions containing just the necessary styles for reboot and Bootstrap&#39;s flexbox grid respectively. They are to be used if you don&#39;t want to include the entirety of Bootstrap in your project and will only be making use of either of these features.

The docs explain it here: https://getbootstrap.com/docs/4.1/getting-started/contents/#css-files

I&#39;m in the process refactoring an Angular application and as I&#39;m moving components around to new directory locations, I&#39;m finding that dealing `@import` paths in the components&#39; SCSS files is getting a bit tedious. 

For example, let&#39;s say I have the file `src/_mixins.scss` in the root of my application and the component `src/app/my-widget/my-widget.component.scss` imports the SCSS like so `@import &#39;../../mixins&#39;;`. All well and good.

But then I decide that `my-widget.component` is really be a &quot;shared component&quot; under another component `my-thingy.component`, so I create a `shared` folder under `src/app/my-thingy` and move everything that was in `src/app/my-widget` into it.

I *hope* you&#39;re still with me... So, now I&#39;ve got `src/app/my-thingy/shared/my-widget` and I modify my SCSS file to import `@import &#39;../../../../mixins&#39;`. 

**Note:** This is a simplified example. Some of the paths get relatively deep (no pun intended... *or was it?*) and all of these `.` and `/` are a bit much.

**TL;DR**

It would be *super-handy* if from the start I could have just imported  `_mixins.scss` relative to the root in all of my components&#39; SCSS files so I don&#39;t have to keep messing with the `@import` paths when refactoring. (e.g. Something along the lines of `@import &#39;~/mixins&#39;`). **Does something like this exist?**

What I&#39;ve tried (and, sadly, has failed):

 1. `@import &#39;~/mixins&#39;; /** I had real hope for this one **/`
 2. `@import &#39;mixins&#39;; /** Just being overly optimistic here **/`
 3. `@import &#39;~//mixins&#39;; /** Now I&#39;m just making stuff up **/`

*I understand that I&#39;m already going to have to modify my mod files to point to the new path of the component with all of this &quot;moving stuff around&quot;, but...  hey, one less thing, right?*

SCSS Import Relative to Root

I have an aws query that I want to filter in `jq`.
I want to filter all the `imageTags` that **don&#39;t** end with &quot;latest&quot;

So far I did this but it filters things containing &quot;latest&quot; while I want to filter things not containing &quot;latest&quot; (or not ending with &quot;latest&quot;)

    aws ecr describe-images --repository-name &lt;repo&gt; --output json | jq &#39;.[]&#39; | jq &#39;.[]&#39; | jq &quot;select ((.imagePushedAt &lt; 14893094695) and (.imageTags[] | contains(\&quot;latest\&quot;)))&quot;

Thanks

jq - How to filter a json that does not contain

I am trying to migrate my application from bootstrap 3.3.7 to Bootstrap v4.0.0-alpha.6.

When I downloaded the Bootstrap v4.0.0-alpha.6 into my project using NuGet, I saw bootstrap-reboot.css and bootstrap-grid.css in addition to bootstrap.css.

[![enter image description here][1]][1]

I tried to go through the document and understand their purpose but, I am not getting a clear picture.

What is the use of those two css files? Do I really need to include them in my project?


  [1]: https://i.stack.imgur.com/yTEe2.png

bootstrap 4 - When to use reboot css and grid css?

I am trying to migrate my application from bootstrap 3.3.7 to Bootstrap v4.0.0-alpha.6.
When I downloaded the Bootstrap v4.0.0-alpha.6 into my project using NuGet, I saw bootstrap-reboot.css and bootstrap-grid.css in addition to bootstrap.css.
<a href="https://i.stack.imgur.com/yTEe2.png" target="_blank" rel="noopener noreferrer"><img src="https://i.stack.imgur.com/yTEe2.png" alt="enter image description here"></a>
I tried to go through the document and understand their purpose but, I am not getting a clear picture.
What is the use of those two css files? Do I really need to include them in my project?

Bootstrap 4 uses flex-box for it&#39;s modal footers. If I want two buttons, one on the left and one on the right, how do I get it to work properly? 

The code below tries to use a `div.row` with `col-sm-6` but doesn&#39;t work.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://code.jquery.com/jquery-3.1.1.slim.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
    &lt;link href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;/&gt;

    &lt;!-- Button trigger modal --&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;
      Launch demo modal
    &lt;/button&gt;

    &lt;!-- Modal --&gt;
    &lt;div class=&quot;modal fade&quot; id=&quot;myModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;exampleModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
      &lt;div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
        &lt;div class=&quot;modal-content&quot;&gt;
          &lt;div class=&quot;modal-header&quot;&gt;
            &lt;h5 class=&quot;modal-title&quot; id=&quot;exampleModalLabel&quot;&gt;Modal title&lt;/h5&gt;
            &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
              &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
            &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class=&quot;modal-body&quot;&gt;
            ...
          &lt;/div&gt;
          &lt;div class=&quot;modal-footer&quot;&gt;
          &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-sm-6 text-left&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Save changes&lt;/button&gt;
            &lt;/div&gt;
            &lt;div class=&quot;col-sm-6 text-right&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



Left &amp; right align modal footer buttons in Bootstrap 4

I am struggling to center an image using only Bootstrap&#39;s CSS-classes. I already tried several things. One was adding Bootstrap CSS-class `mx-auto` to the `img` element, but it does nothing.

Help is appreciated.

    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-4 mx-auto&quot;&gt;
                &lt;img class=&quot;&quot;...&gt; &lt;!-- center this image within the column --&gt;
    
                &lt;form...&gt;
    
                &lt;p...&gt;
                &lt;p...&gt;
                &lt;p...&gt;                
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

How can I center an image in Bootstrap?

I am struggling with bootstrap 4 file browser. If I use custom-file-control I will see Choose file value all the time. 
https://v4-alpha.getbootstrap.com/components/forms/#file-browser

I would like to change the value of choose file after the file has been chosen. This value is actually hidden in css ```.custom-file-control:lang(en)::after ``` and I do not know how to access and change it in javascript. I can get the value of chosen file like this:

    document.getElementById(&quot;exampleInputFile&quot;).value.split(&quot;\\&quot;).pop();

not I need to change 

    .custom-file-control:lang(en)::after {
        content: &quot;Choose file...&quot;;
    }

somehow

link: http://codepen.io/Matoo125/pen/LWobNp

Bootstrap 4 File Input

I&#39;m a backend developer and I&#39;m just playing around with Angular4. So I did this installation tutorial: https://www.youtube.com/watch?v=cdlbFEsAGXo.

Given this, how can I add bootstrap to the app so I could use the class &quot;container-fluid&quot; or &quot;col-md-6&quot; and stuff like that?



Angular 4: How to include Bootstrap?

What&#39;s the easiest way to make a multilevel dropdown in Bootstrap 4? All the examples I managed to find on SO were either too messy or not included in nav.

I&#39;ve tried just placing a dropdown inside a dropdown, but that doesn&#39;t seem like it&#39;s working. Can someone help me with this one?

Here&#39;s the basic outline of my code:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css&quot; integrity=&quot;sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;script src=&quot;https://code.jquery.com/jquery-3.1.1.slim.min.js&quot; integrity=&quot;sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js&quot; integrity=&quot;sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js&quot; integrity=&quot;sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

    &lt;nav class=&quot;navbar navbar-toggleable-md navbar-light bg-faded&quot;&gt;
      &lt;button class=&quot;navbar-toggler navbar-toggler-right&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarNavDropdown&quot; aria-controls=&quot;navbarNavDropdown&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
        &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Navbar&lt;/a&gt;
      &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNavDropdown&quot;&gt;
        &lt;ul class=&quot;navbar-nav&quot;&gt;
          &lt;li class=&quot;nav-item active&quot;&gt;
            &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Home &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Link 1&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item dropdown&quot;&gt;
            &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;http://example.com&quot; id=&quot;navbarDropdownMenuLink&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
              Dropdown link
            &lt;/a&gt;
            &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;navbarDropdownMenuLink&quot;&gt;
              &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;
              &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
              &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;

&lt;!-- end snippet --&gt;



Bootstrap 4: Multilevel Dropdown Inside Navigation

Having an issue with the new responsive utilities **hidden / visible classes**, when migrating to **Bootstrap 4**. I am aware that .hidden- classes have been [removed from v3 and replaced][1] with `.hidden-*-up` `.hidden-*-down`. Using the new `.hidden-*-up.hidden-*-down` classes but the elements aren&#39;t changing to visible/hidden. Can&#39;t figure out why.

    &lt;div class=&quot;col hidden-xs-down&quot;&gt;
    	&lt;span class=&quot;vcard&quot;&gt;
    		…
    	&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col hidden-lg-down&quot;&gt;
    	&lt;div class=&quot;hidden-sm-down&quot;&gt;
         			…
    	&lt;/div&gt;
    	&lt;div class=&quot;hidden-xs-down&quot;&gt;
         			…
    	&lt;/div&gt;
    &lt;/div&gt;
* *nothing is hidden in this example, regardless of screen size (Safari, Responsive Design Mode)*

  [1]: https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

bootstrap 4 responsive utilities visible / hidden xs sm lg not working

how can I make a column take up 100% height of the browser w bootstrap 4?

See the following: https://codepen.io/johnpickly/pen/dRqxjV

Note the yellow div, I need this div/column to take up a height of 100%... Is there way to make this happen without having to make all parent div&#39;s have a height of 100%?

Thank you


html:

    &lt;div class=&quot;container-fluid&quot;&gt;
      &lt;div class=&quot;row justify-content-center&quot;&gt;
    
        &lt;div class=&quot;col-4 hidden-md-down&quot; id=&quot;yellow&quot;&gt;
          XXXX
        &lt;/div&gt;
    
        &lt;div class=&quot;col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8&quot;&gt;
          Form Goes Here
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;



Content Type	Original Author	Original Content on Stackoverflow
Question	JGV	View Question on Stackoverflow
Solution 1 - Twitter Bootstrap	Liam Hammett	View Answer on Stackoverflow

bootstrap 4 - When to use reboot css and grid css?

Twitter Bootstrap Problem Overview

Twitter Bootstrap Solutions

Solution 1 - Twitter Bootstrap

jq - How to filter a json that does not contain

SCSS Import Relative to Root

Attributions