I want to change the bg-color of .circle.icon if posts-item is hovered. Any idea how to accomplish that, possibly without Javascript?
<div id="scr1" class="large-6 columns timeline">
<div class="line"></div>
<ul class="posts">
<li class="posts-item">
<div class="circle icon"></div>
<h2 class="posts-item-title">
</h2>
<p class="summary"></p>
</li>
</ul>
</div>
Like so.
.posts-item:hover .circle.icon {
background: green;
}
No jQuery - Everyone's happy :)
Related
I am trying to place Bootstrap breadcrumb navigation in a template.
What I would like is a full-width 100% with a background color, and then within that place a col-lg-12 but I can't figure it out.
This image might help:
<div class="container-fluid darkgrey">
<div class="row">
<div class="col-lg-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Section</a></li>
<li class="breadcrumb-item active" aria-current="page"><?php the_title();?></li>
</ol>
</nav>
</div>
</div>
</div>
I think I might need to "nest" columns but I can't figure it out.
Am I on the right path? Thanks
Read the docs, Luke :-)
Use .container-fluid for a full width container, spanning the entire width of the viewport.
You are using .container-fluid, so you get a fluid, 100% width container. Use .container to get a fixed with container.
Here's a workig JSFiddle.
Also note you have an unbalanced </a> after Section, maybe just a copy-paste error here on SO.
To align the contents to .content width while keeping section background full-page width, you could nest a .container inside your .container-fluid:
.darkgrey {
background-color: #e9ecef;
}
.darkgrey .breadcrumb {
background-color: transparent;
margin-bottom: 0;
padding: .75rem 0;
}
.darkgrey + .container {
padding-top: .75rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid darkgrey">
<div class="container">
<div class="row">
<div class="col-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href>Home</a></li>
<li class="breadcrumb-item">Section</li>
<li class="breadcrumb-item active" aria-current="page">
Test Post 3
</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2>Test Post 3</h2>
<p> Lorem ipsum dolor sit amet... </p>
</div>
</div>
Important note: .containers can be placed inside .container-fluids but should not be placed inside another .container.
Another note: you probably don't need the CSS (from the screenshot it looks like your theme already handles that part, but I needed it on SO).
I'm making a navbar in bootstrap 3 and I found something weird.
<nav className="navbar navbar-inverse">
<div className="container-fluid">
<div className="container">
<div className="row">
<div className="col-sm-3">
<a href="#">
Home
</a>
</div>
<div className="col-sm-3">
<a href="#">
About us
</a>
</div>
<div className="col-sm-3">
<a href="#">
Surveys
</a>
</div>
<div className="col-sm-3">
<a href="#">
Statistics
</a>
</div>
</div>
</div>
</div>
This is structure of this component and here is CSS, where I try to make <a> attribute larger on :hover
a:hover {
text-decoration: none;
color: inherit;
transform: scale(1.1);
}
And I can't help wondering why despite others attributes working, transform shows no effect. Not sure if it changes anything, but maybe I'll add that I use React for this application.
Only elements positioned by the box model can be transformed. As a rule of thumb, an element is positioned by the box model if it has display: block. Source
You can also use display: inline-block;.
I have a newbie question; I have this code, using framework7.
<div class="list-block">
<ul>
<li>
<a href="" class="external item-content" >
<div id="div1" class="item-media" style="display:block" ><img ></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title" ><></div>
</div>
<div class="item-subtitle"></div>
</div></a></li>
</ul>
</div>
The color of the item-title is blue. I want to make it red, bold and override any previous rule? I can't get it done, the CSS code included in the framework is too complicated for me.
i just added style="color: #FFFF00;"
Following the example of TB, I have a navbar that is marked up as follows:
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<!-- nav bar items here -->
</div>
</div>
</div>
I'd like this to span the full width of the screen and not have any rounded corners -- similar to static top styling of the navbar.
I can't seem to find how to do this in TB. If there isn't a way, what CSS would I need to override TB and not break responsiveness?
Just change the class container to container-fullwidth like this :
<div class="container-fullwidth">
Not sure if the navbar-static-top class was available prior to version 2.2.2 but I think you can accomplish your goal with the following:
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<ul class="nav">
<li class="active">Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</div>
</div>
<div class="container">
...
</div>
I put together a jsFiddle as an example.
Put the navbar out of your container:
<div class="navbar">
<div class="navbar-inner">
<!-- nav bar items here -->
</div>
</div>
<div class="container">
</div>
EDIT:
Here is one that I did with responsive navbar. The code fits the document body:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>Link</li>
<li class="divider-vertical"></li>
<li>Link</li>
</ul>
<ul class="nav pull-right">
<li>Log out</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
</div>
</div>
</div> <!-- end container -->
<script type="text/javascript" src="/assets/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>
I'm very late to the party but this answer pulls up top in Google search results.
Bootstrap 3 has an answer for this built in, set your container div in your navbar to container-fluid and it'll fall to screen width.
Like so:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>More Stuff</li>
</ul>
</div>
</div>
</div>
Put your <nav>element out from the <div class='container-fluid'>.
Ex :-
<nav>
......nav content goes here
<nav>
<div class="container-fluid">
<div>
........ other content goes here
</div>
</div>
You need to push the container down the navbar.
Please find my working fiddle here http://jsfiddle.net/meetravi/aXCMW/1/
<header>
<h2 class="title">Test</h2>
</header>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active">Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</div>
</div>
<div class="container">
</div>
Just replace <div class="container"> with <div class="container-fluid">, which is the container with no margins on both sides.
I think this is the best solution because it avoids some useless overriding and makes use of built-in classes, it's clean.
You can override some css
body {
padding-left: 0px !important;
padding-right: 0px !important;
}
.navbar-inner {
border-radius: 0px !important;
}
The !important is needed just in case you link the bootstrap.css after your custom css.
And add your nav html out of a .container
To remove the border-radius on the corners add this style to your custom.css file
.navbar-inner{
-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
}
I know I'm a bit late to the party, but I got around the issue by tweaking the CSS to have the width span 100%, and setting l/r margins to 0px;
#div_id
{
margin-left: 0px;
margin-right: 0px;
width: 100%;
}
You have to add col-md-12 to your inner-navbar. md is for desktop .you can choose other options from bootstrap's list of options . 12 in col-md-12 is for full width .If you want half-width you can use 6 instead of 12 .for e.g. col-md-6.
Here is the solution to your question
<div class="container">
<div class="navbar">
<div class="navbar-inner col-md-12">
<!-- nav bar items here -->
</div>
</div>
</div>
I want to create fluid layout using LESS and without using Bootstrap grid clasess like .span6 on html code. How can I do this?
When I wrote without LESS I create layout like this:
<div class="container-fluid">
<div class="row-fluid" id="header">
<div class="span4 block">
<h1 class="title">Sample Site</h1>
<h2 class="sub-title">Powered by Twitter Bootstrap</h2>
</div>
<div class="span6 block">
<ul class="nav nav-pills">
<li class="active">Home</li>
<li>Pages</li>
<li>Typography</li>
<li>UI</li>
<li>Calendar</li>
<li>Tables</li>
</ul>
</div>
<div class="span2 block">
<div class="btn-group open">
<button class="btn">Dropdown</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Change password</li>
<li>Log in with another user</li>
<li>Change token</li>
<li>Log out</li>
</ul>
</div>
</div>
</div>
<div class="row-fluid" id="slider">
<div class="span12 block">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
Now, my layout looks next way:
<div id="wrap">
<div id="header">
<div id="logo">SiteLogo</div>
<div id="top-menu">
<ul>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
<div id="logout">
Logout
</div>
</div>
<div id="slider">
and what I should write on my .less file if I want to make div#wrap -> .container-fluid,
div#header -> .row-fluid, div#logo -> .span4, div#top-menu -> .span6, div#logout -> .span2
without writting this clasess on html code?
First, this wouldn't really be semantic, at least, no more so.
The semantic form of <div id="top-menu"> is <nav> or <nav id="top">
The semantic form of <div id="header"> is <header>
In any case, there are instructions on doing this here:
Please stop embedding Bootstrap classes in your HTML
Honestly, though, it's not as simple as the author makes it look. Just because you have a <nav> inherit the styles of .nav from Bootstrap doesn't mean its children will inherit inherited styles as well.
So if I define a style from .nav ul, a <ul> element will not receive this style if it's in a <nav>.
This worked for me.. posting in case it helps anyone else.
Mixins for semantic fluid grid:
.makeFluidRow(){
width: 100%;
.clearfix();
}
.makeFluidCol(#span:1,#offset:0){
float: left;
#grid > .fluid .span(#span);
#grid > .fluid .offset(#offset);
&:first-child {
margin-left: 0;
.offsetFirstChild(#offset);
}
}
Use them just like the non-fluid mixins:
div#header{
.makeFluidRow();
div#logo {
.makeFluidCol(4); //Spans 4 cols
}
div#top-menu {
.makeFluidCol(6); //Spans 6 cols
}
div#logout {
.makeFluidCol(2); //Spans 2 cols
//Or you could have span1, offset1 using .makeFluidCol(1,1);
}
}