twitter-bootstrap

How to have an empty col-md-* in bootstrap?

by

Use offsets. You only need to define the first offset as the second col will float next to the first. <link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css” rel=”stylesheet”/> <div class=”container”> <div class=”row”> <div style=”background:#f99″ class=”col-xs-4 col-xs-offset-1″>Cols 2-5</div> <div style=”background:#9f9″ class=”col-xs-6″>Cols 6-11</div> </div> </div> Note: I’m using the xs column size so it works in the snippet frame. Note, for Bootstrap … Read more

Bootstrap: CardHeader with buttons on the right

by

Another example with less HTML. <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” /> <h5 class=”card-header d-flex justify-content-between align-items-center”> Title <button type=”button” class=”btn btn-sm btn-primary”>Button</button> <!– Wrap with <div>…buttons…</div> if you have multiple buttons –> </h5>

Bootstrap Fluid grid system with different height

by

The only way to do this with Bootstrap “out-of-the-box” would be to use 4 columns and stack the items in each. This isn’t ideal for dynamic content when you don’t know how many items you’ll have in each column. Also the items order top-to-bottom, and not left-to-right. <div class=”container-fluid”> <div class=”row”> <div class=”col-md-3″> <!–item1–> <!–item2–> … Read more

Hugo shortcode ignored saying “raw HTML omitted”

by

This is the most frequently asked question in Newest ‘hugo’ Questions – Stack Overflow within the last 5 days!¹ In your Hugo config file, you need to tell the default Markdown renderer, which is Goldmark, to render raw HTML. If you use a config.yaml, use this: markup: goldmark: renderer: unsafe: true If you use a … Read more

How to create a sticky left sidebar menu using bootstrap 3?

by

Bootstrap 3 Here is a working left sidebar example: http://bootply.com/90936 (similar to the Bootstrap docs) The trick is using the affix component along with some CSS to position it: #sidebar.affix-top { position: static; margin-top:30px; width:228px; } #sidebar.affix { position: fixed; top:70px; width:228px; } EDIT– Another example with footer and affix-bottom Bootstrap 4 The Affix component … Read more

How to create jumbotron in Bootstrap 5?

by

The migration documents give you exactly what you need to know. In v4.x Bootstrap’s .jumbotron component is literally just this: .jumbotron { padding: 2rem 1rem; margin-bottom: 2rem; background-color: #e9ecef; border-radius: .3rem; } You can, with the exception of the specific background color, emulate this entirely without the use of this class: <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css” integrity=”sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk” … Read more

Bootstrap 3 glyphicons in add ons

by

To clarify Bass’ answer, with the current version of Bootstrap 3, all you need to do is: <div class=”input-group input-group-lg”> <input type=”text” class=”form-control”> <span class=”input-group-addon”><span class=” glyphicon glyphicon-star”></span></span> </div> In other words, just the basic Bootstrap markup as described in the docs.

Bootstrap popover, image as content

by

As it currently stands your this is referencing the current scope, whereas you want to be referencing the element which the Popover instance is attached to. This is done simply by wrapping the expression you have for content in a function: $(‘a[rel=popover]’).popover({ html: true, trigger: ‘hover’, content: function () { return ‘<img src=”‘+$(this).data(‘img’) + ‘” … Read more