Cacher is the code snippet organizer for pro developers

Full Width

• Bootstrap container limits the container by centering the container and adding margin: auto
• Use the following to set the size of any container within the bootstrap container to override the width and set the container to the full width of the viewport

width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;

Swapping out .svg for .png

Using <img> tags

• Use cases: .svg does not read in IE 8, you'll need to replace the <img> tag with the following code:

<img src="image.svg" onerror="this.src='image.png`; this.onerror=null;">

Using svg as background:

.element {
  background: url(fallback_image.png);
  background: url(image.svg), linear-gradient(transparent, transparent)
}

In Rails app:

    <%= link_to main_app.contact_forms_url  do %>
        <?xml version="1.0" encoding="utf-8"?>
        <!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
        <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
        <svg class="buy-now" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="100px" height="92.796px" viewBox="0 0 100 92.796" enable-background="new 0 0 100 92.796" xml:space="preserve">
            <path fill="#1C75BC" d="M98.572,"/>
            <image src="<%= asset_path('shopping_cart.png')%>" href="" />
        </svg>
    <% end %>

Remember when setting the width of a png, you also need to set the height!