twitter-bootstrap-3

Bootstrap 3 Align Text To Bottom of Div

I think your best bet would be to use a combination of absolute and relative positioning. Here’s a fiddle: http://jsfiddle.net/PKVza/2/ given your html: <div class=”row”> <div class=”col-sm-6″> <img src=”https://stackoverflow.com/questions/24539197/~/Images/MyLogo.png” alt=”Logo” /> </div> <div class=”bottom-align-text col-sm-6″> <h3>Some Text</h3> </div> </div> use the following CSS: @media (min-width: 768px ) { .row { position: relative; } .bottom-align-text { … Read more

Binding to Collapse event in Twitter Bootstrap 3

When the documentation lists the available events, it’s just a promise that it will always raise each particular event at a particular time. For example, hidden.bs.collapse will be raised whenever: a collapsed element has been hidden from the user. Whether or not anybody’s listening to that event hasn’t yet come into play. To leverage this, … Read more

Decreasing height of bootstrap 3.0 navbar

After spending few hours, adding the following css class fixed my issue. Work with Bootstrap 3.0.* .tnav .navbar .container { height: 28px; } Work with Bootstrap 3.3.4 .navbar-nav > li > a, .navbar-brand { padding-top:4px !important; padding-bottom:0 !important; height: 28px; } .navbar {min-height:28px !important;} Update Complete code to customize and decrease height of navbar with … Read more

How to use Bootstrap in an Angular project?

Provided you use the Angular-CLI to generate new projects, there’s another way to make bootstrap accessible in Angular 2/4. Via command line interface navigate to the project folder. Then use npm to install bootstrap: $ npm install –save bootstrap. The –save option will make bootstrap appear in the dependencies. Edit the .angular-cli.json file, which configures … Read more

How can I get my Twitter Bootstrap buttons to right align?

Insert pull-right into the class attribute and let bootstrap arrange the buttons. For Bootstrap 2.3, see: http://getbootstrap.com/2.3.2/components.html#misc > Helper classes > .pull-right. For Bootstrap 3, see: https://getbootstrap.com/docs/3.3/css/#helper-classes > Helper classes. For Bootstrap 4, see: https://getbootstrap.com/docs/4.0/utilities/float/#responsive The pull-right command was removed and replaced with float-right or in general to float-{sm,md,lg,xl}-{left,right,none} For Boostrap 5, see: https://getbootstrap.com/docs/5.0/utilities/float/ The … Read more

Different slide duration for each item on bootstrap 3.1 carousel

Bootstrap 3.1 carousel don’t allow diferent duration for each slide, but it offers one method and one event that we can use in order to ahieve this. We will use the slid.bs.carousel event to detect when the carousel has completed its slide transition and the .carousel(‘pause’) option to stop the carousel from cycling through items. … Read more

How to make bootstrap carousel image responsive?

Remove the following CSS rules from respective files: In home.php file .carousel .item>img { position: absolute; top: 0; left: 0; max-width: 100%; height: 100%; } in carousel.css .carousel-inner > .item > img { position: absolute; top: 0; left: 0; min-width: 100%; height: 500px; } Also, add margin-top: 51px; to .carousel class in carousel.css file and … Read more

Reduce the gutter (default 30px) on smaller devices in Bootstrap3?

The gutter is construct by a left and right padding, you could use media queries to change this depending on your screen size: /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { div[class^=”col”]{padding-left:5px; padding-right:5px;} } /* Medium devices (desktops, 992px and up) */ @media (min-width: 992px) { div[class^=”col”]{padding-left:10px; padding-right:10px;} } /* Large … Read more