twitter-bootstrap-3 interview questions
Top twitter-bootstrap-3 frequently asked interview questions
How would I go about modifying the CSS to change the color of the navbar in Twitter Bootstrap 3?
Source: (StackOverflow)
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)
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 two files included in the CSS folder with .map file extensions. They are:
bootstrap-theme.css.map
bootstrap.css.map
They appear to be minified files but I don't know what they are for.
Source: (StackOverflow)
I downloaded bootstrap 3.0 and can't get the glyphicons to work. I get some kind of "E003" error. Any ideas why this is happening? I tried both locally and online and I still get the same problem.
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)
Just downloaded 3.1 and found in the docs...
Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid.
Looking in bootstrap.css, it appears that .container-fluid is identical to .container. Both have the same CSS, and every instance of .container-fluid is paired with .container, and all column classes are specified in percentages.
When twiddling with examples I could not see any difference, as everything seemed fluid.
As I'm new to Bootstrap, I assume I'm missing something. Could someone take a minute and enlighten me?
Source: (StackOverflow)
I want to use the Bootstrap 3 default navbar with an image logo instead of text branding. What's the proper way of doing this without causing any issues with different screen sizes? I assume this a common requirement, but I haven't yet seen a good code sample. A key requirement other than having acceptable display on all screen sizes is the menu collapsibility on smaller screens.
I tried just putting an IMG tag inside the A tag that has the navbar-brand class, but that caused the menu not to function properly on my android phone. I also tried increasing the height of the navbar class, but that screwed things up even more.
By the way, my logo image is larger than the height of the navbar.
Source: (StackOverflow)
I am creating an App with AngularJS and Bootstrap 3. I want to show a table/grid with thousands of rows. What is the best available control for AngularJS & Bootstrap with features like Sorting, Searching, Pagination etc.
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 have a simple demo here:
http://jsfiddle.net/HdeZ3/1/
<ul>
<li>One <input class="btn pull-right" value="test"></li>
<li>Two <input class="btn pull-right" value="test2"></li>
</ul>
I have an unordered list and for each list item I wish to have text on the left and then a right aligned button. I have tried to use pull-right but this completely messes up the alignment. What am I doing wrong?
Source: (StackOverflow)
In version two I could use
badge badge-important
I see that the .badge element no longer has contextual (-success,-primary,etc..) classes.
How do i achieve the same thing in version 3?
Eg. I want warning badges and important badges in my UI
Source: (StackOverflow)