CSS:
border: 5px solid red;
}
#menu li{
font-size: 25px;
display:inline;
}
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-lg-2" id="menu">
<ul class ="Menuitems">
<li>The Hub</li>
<li>FAQ</li>
</ul>
</div>
I am attempting to move the text in the li tags to the centre of the div. I cannot figure out the CSS to do so and I don't wish to use "position relative" "top: 5px" because it is bad practise and will mess up the responsive design element of the project. Text align is also not possible as the div is not large when it is full screen, see code pen for information
https://codepen.io/mdot700/pen/bGEGwLa
Found this with bootstrap
Source : https://www.codeply.com/go/bp/6COUMfNrEU
<div class="d-flex">
<ul class="list-inline mx-auto justify-content-center">
<li class="list-block-item">Item 1</li>
<li class="list-block-item">Item 2</li>
<li class="list-block-item">Item 3</li>
<li class="list-block-item">Item 4</li>
<li class="list-block-item">Item 5</li>
</ul>
</div>
Related
We have nested unordered lists with product data.
For
<ul class="data_holder">
we want odd/even background colors.
ul.data_holder:odd => background: #ccc
ul.data_holder:even => background: #FFF
Our whole structure looks like this (as you see, our ul.data_holder sits inside an "li" element of the parent unordered list:
<ul class="row_holder">
<li class="row">
<ul class="data_holder">
<li class="data">Data 1</li><li class="data">Data 2</li><li class="data">Data 3</li>
</ul>
</li>
<li class="row">
<ul class="data_holder">
<li class="data">Data 1</li><li class="data">Data 2</li><li class="data">Data 3</li>
</ul>
</li>
<li class="row">
<ul class="data_holder">
<li class="data">Data 1</li><li class="data">Data 2</li><li class="data">Data 3</li>
</ul>
</li>
<li class="row">
<ul class="data_holder">
<li class="data">Data 1</li><li class="data">Data 2</li><li class="data">Data 3</li>
</ul>
</li>
</ul>
Thanks for help
You need to apply a CSS to the li, not to the ul which is inside the li. Try Below CSS:
ul.row_holder li:nth-child(odd) ul{
background-color:red;
}
ul.row_holder li:nth-child(even) ul{
background-color:black;
}
You can use the following CSS structure, nth-child(odd/even). With this code, you'll be able to have different stylings for odd/even objects in a list like this unordered list. Since you have a first <ul> with <li> elements inside, I would suggest you do this selector on the .row elements in your HTML.
.row:nth-child(odd) {
background: #ccc;
}
.row:nth-child(even) {
background: #fff;
}
I am trying to sliding down a sub menu. The reference which I am following is -- https://codepen.io/shshaw/pen/gsFch
But the dropdown doesn't slide. It just appears on hover.
Html code --
<nav id="main-nav" class="clearfix">
<div class="nav-inner clearfix">
<div class="menu-main-navigation-container">
<ul id="nav" class="clearfix page">
<li class="item">
Menu
<ul class="sub-menu">
<li class="item">Sub Menu 1</li>
<li class="item">Sub Menu 2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Demo -- https://jsfiddle.net/squidraj/seqc1w9f/6/
Any help is highly appreciated.
display cannot be animated. This needs to be removed.
ul#nav li ul {
display: none;
I got this problem that when I hover on my dropdown menu, the background changes and the color does also. But i can't get it to white..
What to do?
http://hcl.konggulerodhosting.dk/index.html
<nav>
<div id="topBar" data-toggler="is-active" class=" top-bar row ">
<button type="button" data-toggle="topBar" class="mobile__close hide-for-large"> </button>
<div class="small-12 columns">
<div class="top-bar-left">
<div class="site-logo"><img src="assets/images/logo.svg" alt=""></div>
</div>
<div class="top-bar-right">
<p class="mobile__headline hide-for-large">Menu</p>
<ul data-responsive-menu="drilldown large-dropdown" data-back-button="<li class="js-drilldown-back drilldown-back"><a>Back</a></li>" class="menu">
<li class="active">Forside</li>
<li>Undersøgelser
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</li>
<li>Tilskud</li>
<li>Høreapparat</li>
<li>Information</li>
<li>Om os</li>
<li class="search__toggler">
<button type="button" data-toggle="search" id="search-toggler"></button>
</li>
</ul>
</div>
</div>
</div>
</nav>
.is-dropdown-submenu-item {
color:white;
}
is not working. So i dont know what to do..
Please don't link your site as it's bad for archiving purposes.
You need to change the link colour.
.is-dropdown-submenu-item a:hover {
color:#fff;
}
Check this image.............................................
I have the following html for my page. I'm trying to figure out why the well component has the content not being containing in the element. Its starting outside the element the well.
<div class="row">
<div class="well">
<div class="col-md-6">
<h2>Education</h2>
<ul>
<li>School 1</li>
<li>School 2</li>
</ul>
</div>
<div class="col-md-6">
<h2>Education</h2>
<ul>
<li>School 1</li>
<li>School 2</li>
</ul>
</div>
</div>
</div>
.well {
background-color: #9999FF;
padding: 30px;
margin-top: 50px;
}
Try adding the well class to the outer div. JSFiddle
<div class="row well">
<div class="col-md-6">
<h2>Education</h2>
<ul>
<li>School 1</li>
<li>School 2</li>
</ul>
</div>
<div class="col-md-6">
<h2>Education</h2>
<ul>
<li>School 1</li>
<li>School 2</li>
</ul>
</div>
</div>
In Bootstrap, all col-* elements are floated left, this means that the parent (i.e. the row) doesn't fully surround the children. You should try to keep wells inside the col-* elements. Otherwise you can also make the well surround the entire row which may also achieve what you wish.
I have recently downloaded TB 2, and have started to familiarize myself with it. I am creating a page based on the hero example.
I am creating a page based off the hero example. The page content area is the element with class 'container' in my markup. The layout I am creating is as follows (within the 'container' element), create two columns:
Left hand column (66.66% of page area)
Right hand column (33.33% of page area)
The left hand column will contain two rows, with the top row containing nav pills, and the bottom row containing nav tabs.
This is the HTML in the 'container' element:
<div class="row">
<div id="page-left-column" class="span8">
<div class="row">
<ul class="nav nav-pills pull-right">
<li class="active">Pill 1</li>
<li>Pill 2</li>
<li>Pill 3</li>
<li>Pill 4</li>
<li>Pill 5</li>
</ul>
</div>
<div class="row">
<ul class="nav nav-tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
</div>
<div id="page-right-column" class="span4">
<div class="row">
</div>
<div class="row">
</div>
</div>
</div>
Using Firebug, I find that both the tab and pills have spilt out of their containing element, so in the case of the nav tabs, where content is on a page, the text is no longer lining up on the left handside of the column - i.e. the text is displayed OUTSIDE the column.
Is there something wrong with the markup above?
Solutions:
Each tags such as input, div, table, ul should have a span* class. Not required, but recommended.
In order to implement % rather than px on values: row-fluid, container-fluid should be applied. Child span* will just follow its containers.
The recommended pattern is: container, span, container, span, container, span, etc.
Container may be a (container or row (fluid or not fluid)). Span may be any elements/tags inside a container.
CSS:
.border {
border: 1px solid #afafaf;
}
#page-right-column {
margin:0;
}
HTML:
<div class="container border">
<div class="span12">
<div class="row-fluid">
<div id="page-left-column" class="span8">
<div class="row">
<div class="span12">
<ul class="nav nav-pills pull-right">
<li class="active">Pill 1</li>
<li>Pill 2</li>
<li>Pill 3</li>
<li>Pill 4</li>
<li>Pill 5</li>
</ul>
</div>
</div>
<div class="row">
<div class="span12">
<ul class="nav nav-tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
</div>
</div><!-- End of #page-left-column -->
<div id="page-right-column" class="span4">
<div class="row-fluid border">
<div class="span12">
First row of right column.
</div>
<div class="span12">
Second row of right column
</div>
</div>
</div><!-- End of #page-right-column -->
</div><!-- End of .container-fluid -->
</div>
</div><!-- End of .container -->