twitter-bootstrap interview questions
Top twitter-bootstrap frequently asked interview questions
How do I center a div of one column size within the container (12 columns) in Twitter Bootstrap 3.
Please see the starter fiddle.
<body class="container">
<div class="col-lg-1 col-offset-6 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
So, I want a div, with a class centered to be centered within the container. I may use a row if there are multiple divs, but for now I just want a div with size of one column centered within the container (12 columns).
I am also not sure the above approach is good enough as the intention is not to offset the div by half. I do not need free spaces outside the div and the contents of the div shrink in proportion. I want to empty space outside the div to be evenly distributed (shrink till the container width == one column).
Source: (StackOverflow)
I'm getting confused about the various options in the twitter bootstrap grid, and how they go together.
To begin with, you can have an ordinary fixed container, or a container-fluid.
Then either one can include either an ordinary row, or a fluid row, row-fluid. That is, you can have a fixed container with a fluid row, or a container-fluid... with a fixed row?
Then on top of that, you can include the 'responsive' media queries, or not.
I am getting confused as to how these things interact. But let's start with one obvious example.
On the examples page itself, there's what's presented as an example of both a fixed grid and a fluid grid
However, in my browser, on that example page itself -- both grids behave identically. Perhaps because the example page uses the optional responsive media queries? In both grid examples, if I start gradually narrowing my browser window, the grid elements do not get gradually narrower -- once a certain (responsive) boundary width is reached, they snap to a smaller size, and again at further boundary widths. But both the ordinary 'fixed' example AND the 'fluid' example behave exactly the same here -- so what the heck is the difference?
Source: (StackOverflow)
How would I go about modifying the CSS to change the color of the navbar in Twitter Bootstrap 3?
Source: (StackOverflow)
I'm working with Bootstrap 2.0.3 using LESS. I want to customize it extensively, but I want to avoid making changes to the source whenever possible as changes to the libraries are frequent. I am new to LESS so I don't know how its compilation entirely works. What are some best practices for working with LESS or LESS based frameworks?
Source: (StackOverflow)
I'm using Bootstrap. How can I make three columns all the same height?
Here is a screenshot of the problem - I would like the blue and red columns to be the same height as the yellow column.
Here is the code:
<div class="row">
<div class="col-xs-12 col-sm-4 panel" style="background-color: red">
some content
</div>
<div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
kittenz
<img src="http://placekitten.com/100/100">
</div>
<div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
some more content
</div>
</div>
Here is a Bootply example
Source: (StackOverflow)
What is the class sr-only used for? Is it important or can I remove it? Works fine without.
Here's my example:
<div class="btn-group">
<button type="button" class="btn btn-info btn-md">Departments</button>
<button type="button" class="btn btn-info dropdown-toggle btn-md" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a rel='nofollow' href="#">Sales</a></li>
<li><a rel='nofollow' href="#">Technical</a></li>
<li class="divider"></li>
<li><a rel='nofollow' href="#">Show all</a></li>
</ul>
</div>
Source: (StackOverflow)
I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" rel='nofollow' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" rel='nofollow' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-5">
<div style="height:5em;border:1px solid #000">Big</div>
</div>
<div class="col-xs-5">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
The grid system in Bootstrap uses float: left, not display:inline-block, so the property vertical-align doesn't work. I tried using margin-top to fix it, but I think this is not a good solution for the responsive design.
Source: (StackOverflow)
There are a lot of questions here related to Bootstrap. I see a lot of people using it. So I tried to research it, and I found the official Bootstrap site, but there was only a download section and a few words after that. Nothing that explains what is it for... Just understood that it is a front-end helper. I have tried to find something by Googling but found nothing specific. Everything I found related to the computer science definition.
So my question is: what is Bootstrap at all, what is it used for, and how does it help front-end development? I would also like some more details explaining it.
Source: (StackOverflow)
Bootstrap 3 is still at RC, but I was just trying to implement it. I couldn't figure out how to put a sub menu class. Even there is no class in css and even the new docs don't say anything about it
It was there in 2.x with class name as dropdown-submenu
Source: (StackOverflow)
I am creating a modal window using twitter bootstrap. The default behavior is if you click outside the modal area, the modal will automatically close. I would like to disable that -- i.e. not close the modal window when clicking outside the modal.
Can someone share jQuery code to do this?
Source: (StackOverflow)
If I have a navbar in bootstrap with the items
Home | About | Contact
How do I set the active class for each menu item when they are active? That is, how can I set class="active" when the angular route is at
#/ for home#/about for the about page#/contact for the contact page
Source: (StackOverflow)
I'm using Bootstrap 3 to build a responsive layout where I want to adjust a few font sizes according to the screen size.
How can I use media queries to make this kind of logic?
Source: (StackOverflow)
I am creating a site using the new Twitter Bootstrap. The site looks fine and works in all required browsers except IE8.
In IE8 it seems to be displaying elements of the mobile version but stretched across the full screen of my desktop. I believe the problem I'm having is that Twitter bootstrap is mobile first. So for some reason IE8 is going for this option.
I also notice that the container class does not seem to be pulling in the max-width CSS properties as intended. Can anyone see what I've done wrong?
<!-- Favicon -->
<link rel="shortcut icon" rel='nofollow' href="/favicon.ico">
<link rel="apple-touch-icon" rel='nofollow' href="/apple-touch-icon.png">
<!-- Bootstrap -->
<link rel='nofollow' href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="stylesheet">
<link rel='nofollow' href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<script src="/SiteFiles/js/modernizr.js"></script>
<!-- CSS -->
<link rel='nofollow' href="/SiteFiles/css/main.css" rel="stylesheet">
<header>
<div class="topArea clearfix">
<div class="container">
<div class="topLinks">
<div class="btn-group">
<span class="flag" data-toggle="dropdown"> </span>
<ul class="dropdown-menu">
<li><a rel='nofollow' href="#">Country 1</a></li>
<li><a rel='nofollow' href="#">Country 2</a></li>
<li><a rel='nofollow' href="#">Country 3</a></li>
<li class="divider"></li>
<li><a rel='nofollow' href="#">Country 4</a></li>
<li><a rel='nofollow' href="#">Country 5</a></li>
<li><a rel='nofollow' href="#">Country 6</a></li>
</ul>
</div>
<div class="visible-sm btn-group">
<div class="plus" data-toggle="dropdown"><i class="icon-plus icon-2x"> </i></div>
<ul class="dropdown-menu">
<li><a rel='nofollow' href="#">Parts & Service</a></li>
<li><a rel='nofollow' href="#">Store Locator</a></li>
<li><a rel='nofollow' href="#">Find a Service Centre</a></li>
<li><a rel='nofollow' href="#">Parts List</a></li>
<li><a rel='nofollow' href="#">Tool Vibration</a></li>
<li><a rel='nofollow' href="#">Resource Centre</a></li>
<li><a rel='nofollow' href="#">Media Centre</a></li>
<li><a rel='nofollow' href="#">Register your Tools</a></li>
<li><a rel='nofollow' href="#">About Us</a></li>
<li><a rel='nofollow' href="#">
<button type="button" class="btn btn-default">Where to Buy</button></a></li>
</ul>
</div>
<div class="topNav">
<ul class="hidden-sm">
<li>
<div class="btn-group">
<a rel='nofollow' href="#" data-toggle="dropdown">Parts & Service</a>
<ul class="dropdown-menu">
<li><a rel='nofollow' href="#">Store Locator</a></li>
<li><a rel='nofollow' href="#">Find a Service Centre</a></li>
<li><a rel='nofollow' href="#">Parts List</a></li>
<li><a rel='nofollow' href="#">Tool Vibration</a></li>
</ul>
</div>
</li>
<li><a rel='nofollow' href="#">Resource Centre</a></li>
<li><a rel='nofollow' href="#">Media Centre</a></li>
<li><a rel='nofollow' href="#">Register your Tools</a></li>
<li><a rel='nofollow' href="#">About Us</a></li>
<li><a rel='nofollow' href="#">
<button type="button" class="btn btn-default">Where to Buy</button></a></li>
</ul>
</div>
<div class="searchArea">
<input type="text" />
<a rel='nofollow' href="#" class="goBtn">GO</a>
</div>
</div>
</div>
</div>
<div class="mainNavArea">
<div class="container rel">
<div class="logo">
<img src="/SiteFiles/img/logo.png" title="Milwaukee - Nothing but heavy duty" alt="Milwaukee - Nothing but heavy duty" />
</div>
<div class="navi">
<div class="navbar">
<div class="container">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Place everything within .navbar-collapse to hide it until above 768px -->
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav nav-justified">
<li><span class="dropArrow"> </span><span class="topNavPosition">Power Tools</span>
<div class="navDrop">
<div class="navDropInner">
<div class="row">
<div class="hidden-sm col-sm-4 col-lg-4">
<img src="/SiteFiles/img/drill.jpg" alt="" />
</div>
<div class="col-12 col-sm-8 col-lg-8">
<h2>Power Tools</h2>
<div class="row">
<div class="col-6 col-sm-6 col-lg-6">
<a rel='nofollow' href="#">Cutters</a>
<a rel='nofollow' href="#">Levels</a>
<a rel='nofollow' href="#">Pliers</a>
<a rel='nofollow' href="#">Saws</a>
<a rel='nofollow' href="#">Screwdrivers</a>
</div>
<div class="col-6 col-sm-6 col-lg-6">
<a rel='nofollow' href="#">Snips</a>
<a rel='nofollow' href="#">Utility Knives</a>
<a rel='nofollow' href="#">Combo Knives</a>
<a rel='nofollow' href="#">Hand Tool Accessories</a>
</div>
</div>
</div>
</div>
</div>
<a rel='nofollow' href="#" class="closeNav">X</a>
</div>
</li>
<li><span class="dropArrow"> </span><span class="topNavPosition">Hand Tools</span>
<div class="navDrop">
<div class="navDropInner">
<div class="row">
<div class="hidden-sm col-sm-4 col-lg-4">
<img src="/SiteFiles/img/drill.jpg" alt="" />
</div>
<div class="col-12 col-sm-8 col-lg-8">
<h2>Hand Tools</h2>
<div class="row">
<div class="col-6 col-sm-6 col-lg-6">
<a rel='nofollow' href="#">Cutters</a>
<a rel='nofollow' href="#">Levels</a>
<a rel='nofollow' href="#">Pliers</a>
<a rel='nofollow' href="#">Saws</a>
<a rel='nofollow' href="#">Screwdrivers</a>
</div>
<div class="col-6 col-sm-6 col-lg-6">
<a rel='nofollow' href="#">Snips</a>
<a rel='nofollow' href="#">Utility Knives</a>
<a rel='nofollow' href="#">Combo Knives</a>
<a rel='nofollow' href="#">Hand Tool Accessories</a>
</div>
</div>
</div>
</div>
</div>
<a rel='nofollow' href="#" class="closeNav">X</a>
</div>
</li>
<li><span class="dropArrow"> </span><span class="topNavPosition">Test & Measurement</span>
<div class="navDrop">
<div class="navDropInner">
<div class="row">
<div class="hidden-sm col-sm-4 col-lg-4">
<img src="/SiteFiles/img/drill.jpg" alt="" />
</div>
<div class="col-12 col-sm-8 col-lg-8">
<h2>Test & Measurement</h2>
<div class="row">
<div class="col-6 col-sm-6 col-lg-6">
<a rel='nofollow' href="#">Cutters</a>
<a rel='nofollow' href="#">Levels</a>
<a rel='nofollow' href="#">Pliers</a>
<a rel='nofollow' href="#">Saws</a>
<a rel='nofollow' href="#">Screwdrivers</a>
</div>
<div class="col-6 col-sm-6 col-lg-6">
<a rel='nofollow' href="#">Snips</a>
<a rel='nofollow' href="#">Utility Knives</a>
<a rel='nofollow' href="#">Combo Knives</a>
<a rel='nofollow' href="#">Hand Tool Accessories</a>
</div>
</div>
</div>
</div>
</div>
<a rel='nofollow' href="#" class="closeNav">X</a>
</div>
</li>
<li><span class="dropArrow"> </span><span class="topNavPosition">Accessories</span>
<div class="navDrop">
<div class="navDropInner">
<div class="row">
<div class="hidden-sm col-sm-4 col-lg-4">
<img src="/SiteFiles/img/drill.jpg" alt="" />
</div>
<div class="col-12 col-sm-8 col-lg-8">
<h2>Accessories</h2>
<div class="row">
<div class="col-6 col-sm-6 col-lg-6">
<a rel='nofollow' href="#">Cutters</a>
<a rel='nofollow' href="#">Levels</a>
<a rel='nofollow' href="#">Pliers</a>
<a rel='nofollow' href="#">Saws</a>
<a rel='nofollow' href="#">Screwdrivers</a>
</div>
<div class="col-6 col-sm-6 col-lg-6">
<a rel='nofollow' href="#">Snips</a>
<a rel='nofollow' href="#">Utility Knives</a>
<a rel='nofollow' href="#">Combo Knives</a>
<a rel='nofollow' href="#">Hand Tool Accessories</a>
</div>
</div>
</div>
</div>
</div>
<a rel='nofollow' href="#" class="closeNav">X</a>
</div>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.container -->
</div>
<!-- /.navbar -->
</div>
</div>
</div>
</header>
Source: (StackOverflow)
I'm trying to follow a very basic example. Using the starter page and the grid system, I was hoping the following:
<div class="row">
<div class="span12">
<h1>Bootstrap starter template</h1>
<p>Example text.</p>
</div>
</div>
...would produce centered text.
However, it still appears on the far left. What am I doing wrong?
Source: (StackOverflow)