I'm trying to have my container divs background color extend to the full width of the browser. Right now I am unable to bypass the container styling set up by default in bootstrap, despite adding my own class to the container. The only styling that works is the background-color. I have also tried the following CSS, but it didn't make any change.
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
background-color: #FDDC00;
Here is my HTML:
<div class="container selection-section">
<div class="row pattern-choice">
<div class="col-md-12">
<h2><i>Choose a pattern</i></h2>
<ul>
<li class="button-border">
<h3 class="button-choice" >SOLID</h3>
</li>
<li class="button-border">
<h3 class="button-choice" id="stripe-choice">STRIPE</h3>
</li>
<li class="button-border">
<h3 class="button-choice" id="plaid-choice">PLAID</h3>
</li>
</ul>
</div>
</div>
</div>
Here is my CSS:
.selection-section {
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
background-color: #FDDC00;
}
Use container-fluid instead of container if you want the container to extend to the full-width of your webpage.
If it's only the color that's a concern surrounding the container with another div might work for you.
.selection-section {
background: #FDDC00;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="selection-section">
<div class="container">
<div class="row pattern-choice">
<div class="col-md-12">
<h2><i>Choose a pattern</i></h2>
<ul>
<li class="button-border">
<h3 class="button-choice">SOLID</h3>
</li>
<li class="button-border">
<h3 class="button-choice" id="stripe-choice">STRIPE</h3>
</li>
<li class="button-border">
<h3 class="button-choice" id="plaid-choice">PLAID</h3>
</li>
</ul>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="well">Outside Div</div>
</div>
Related
My HTML code is like below
<div class="col-lg-4">
<ul>
<div class="area" id="div_1">
<li class="category" id="1">Hair</li>
</div>
<div class="area" id="div_3">
<li class="category" id="3">Skin Care</li>
</div>
<div class="area" id="div_4">
<li class="category" id="4">Makeup</li>
</div>
<div class="area" id="div_5">
<li class="category" id="5">Body Treatments</li>
</div>
<div class="area" id="div_6">
<li class="category" id="6">Sports Massage</li>
</div>
<div class="area" id="div_7">
<li class="category" id="7">Physiotherapy</li>
</div>
<div class="area" id="div_8">
<li class="category" id="8">Intensive Healing Pedicure</li>
</div>
<div class="area" id="div_9">
<li class="category" id="9">Pedicure Refresher</li>
</div>
<div class="area" id="div_10">
<li class="category" id="10">Therapeutic Pedicure</li>
</div>
</ul>
</div>
My CSS code is like below
.col-lg-4 > ul {
overflow-x: scroll;
width: 100%;
display:flex;
}
.category {
border:0;
padding: 0;
margin-right: 30px;
font-size: 15px;
}
I would like to put div side by side with full width of their content and some margin right side.
I am getting output like below
I need output text will be in one line.
"I need output text will be in one line." Here's everything in one line. Basically, all you needed was white-space: nowrap. I removed the extra HTML of the divs wrapping each li since that was invalid HTML and wasn't necessary. If you need divs, put them inside the lis. I'd make them spans though.
.col-lg-4>ul {
overflow-x: scroll;
width: 100%;
display: flex;
}
.category {
border: 0;
padding: 0;
margin-right: 30px;
font-size: 15px;
display: inline-block;
white-space: nowrap;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<div class="col-lg-4">
<ul>
<li class="category" id="1">Hair</li>
<li class="category" id="3">Skin Care</li>
<li class="category" id="4">Makeup</li>
<li class="category" id="5">Body Treatments</li>
<li class="category" id="6">Sports Massage</li>
<li class="category" id="7">Physiotherapy</li>
<li class="category" id="8">Intensive Healing Pedicure</li>
<li class="category" id="9">Pedicure Refresher</li>
<li class="category" id="10">Therapeutic Pedicure</li>
</ul>
</div>
In a grid layout, content must be placed inside columns (.col and .col-*) and only columns may be the immediate children of rows (.row). Rows should be placed inside a .container or .container-fluid for proper padding and alignment.
<div class="container">
<!--Row with two equal columns-->
<div class="row">
<div class="col-md-6">Column left</div>
<div class="col-md-6">Column right</div>
</div>
</div>
The width of col-lg-4 is only 25% of the page. The text is getting cramped because of this. You can change it to col-lg-12 to occupy the whole page.
.col-lg-12>ul {
overflow-x: scroll;
width: 100%;
display: flex;
}
.category {
border: 0;
padding: 0;
margin-right: 30px;
font-size: 15px;
}
try this instead,
First of all remove all div inside the ,
Then,add this style,
.col-lg-4 > ul {
overflow-x: scroll;
white-space:nowrap;
margin:0;
}
.category {
margin-right: 30px;
font-size: 15px;
display:inline-block;
}
white-space:nowrap makes the inline. More info about white-space
All <li> makes inline by display:inline-bock. More info about display
.col-lg-4 > ul {
overflow-x: scroll;
white-space:nowrap;
margin:0;
}
.category {
margin-right: 30px;
font-size: 15px;
display:inline-block;
}
<div class="col-lg-4">
<ul>
<li class="category" id="1">Hair</li>
<li class="category" id="3">Skin Care</li>
<li class="category" id="4">Makeup</li>
<li class="category" id="5">Body Treatments</li>
<li class="category" id="6">Sports Massage</li>
<li class="category" id="7">Physiotherapy</li>
<li class="category" id="8">Intensive Healing Pedicure</li>
<li class="category" id="9">Pedicure Refresher</li>
<li class="category" id="10">Therapeutic Pedicure</li>
</ul>
</div>
I have a small issue. I am trying to create a Treeview of a number of categories pulled out of the database. These categories should be placed next to each other (with a little space between them). Have been trying quite some css styling etc, but always get those categories underneath each other, no matter what I try it seems. Also cleared my cache several times without success. Does anyone have an idea on how to get this done ? It is dynamically, so it can be that there are 2, 3 or more categories to be displayed next to one other. Those categories should have a Treeview of corresponding subcategories and documents which is not yet coded.
My relevant code so far :
<div class="d-flex two-column-wrapper" id="twocols-wrapper">
<main class="instruments-wrapper">
<div class="card bg-light col-md-6 offset-md-3">
<div class="card-header row align-items-center">
<h3 class="text-center"><?=$this->instrument->name?></h3>
</div>
<div class="content-wrapper">
<div class="content">
<?php foreach ($this->categories as $category):?>
<div class="category">
<li class='active'><?=$category->name?></li>
</div>
<?php endforeach;?>
</div>
</div>
</div>
</main>
</div>
And in CSS :
content{
width: auto;
position: fixed;
overflow: visible;
}
.category{
width: 200px;
display: inline-block;
float: left;
}
Any help is much appreciated !
You need to use the display: inline-block; CSS property on the <li> element. Like so...
<div class="d-flex two-column-wrapper" id="twocols-wrapper">
<main class="instruments-wrapper">
<div class="card bg-light col-md-6 offset-md-3">
<div class="card-header row align-items-center">
<h3 class="text-center">Drum</h3>
</div>
<div class="content-wrapper">
<div class="content">
<div class="category">
<li class='active'>Snare</li>
<li class='active'>High-hat</li>
<li class='active'>Base</li>
<li class='active'>Cymbal</li>
</div>
</div>
</div>
</div>
</main>
</div>
CSS
.category li {
display: inline-block;
margin-right: 1em;
}
Working version here: https://jsfiddle.net/fraggley/wrox5198/7/
If you are using bootstrap 4, you can use d-display-block class:
content{
width: auto;
position: fixed;
overflow: visible;
}
.category{
width: 200px;
display: inline-block;
float: left;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="d-flex two-column-wrapper" id="twocols-wrapper">
<main class="instruments-wrapper">
<div class="card bg-light col-md-6 offset-md-3">
<div class="card-header row align-items-center">
<h3 class="text-center"><?=$this->instrument->name?></h3>
</div>
<div class="content-wrapper">
<div class="content">
<div class="category">
<li class='active d-inline-block'>AAA</li>
<li class='active d-inline-block'>BBBB</li>
<li class='active d-inline-block'>CCCC</li>
<li class='active d-inline-block'>DDDD</li>
</div>
</div>
</div>
</div>
</main>
</div>
my html page has this unwanted white patch in the bottom and I don't know why. I don't want to be able to scroll down that long. It stays there regardless by default. it dissapears when I hover on the left(front) element but reappears when I hover on the right(behind) element.
here is the codepen : https://codepen.io/aronnora/pen/ExjJrag
<nav class="nav_bar">
<img src="580b57fcd9996e24bc43c4f8.png" alt="logo" class="logo" id="logo">
<div class="trans" id="trans"> trans energy solutions </div>
<ul class="ul">
<li class="li1">Home</li>
<li class="li2">About Us</li>
<li class="li3">Products</li>
<li class="li4">Services</li>
<li class="li5">Facility</li>
<li class="li6">Testing</li>
<li class="li7">Clients</li>
<li class="li8">Contact</li>
</ul>
</nav>
<div class="white">
</div>
<div class="pro">
<div class="text">
PRODUCTS
</div>
</div>
<div class="total">
<div class="one">
<img src="liquid-immersed-distribution-transformers-768x784.png" alt="kakashi" class="Kakashi" height="300rem"></img>
<div class="downtextone">
時メユ郎護ヲテ写藤くクッル起稲ロチ製資ヌ米更ナ池天ワア由時テ栃94探容ケニ災逮はぴ氷可難智む。能ざラくな静盟ごぼじ不注更ルモト点究サトケ別意マワ抜博写ミ元
</div>
</div>
<div class="two">
<img src="transtech-2.png" alt="madara" class="Madara" height="300rem"></img>
<div class="downtexttwo">
時メユ郎護ヲテ写藤くクッル起稲ロチ製資ヌ米更ナ池天ワア由時テ栃94探容ケニ災逮はぴ氷可難智む。能ざラくな静盟ごぼじ不
</div>
</div>
</div>
your div takes a default height as it's content. so just add overflow:hidden; to class (.tow)
.two {
height: 58.29rem;
width: 45rem;
transition: opacity 1s;
background-color: black;
position: absolute;
z-index: 10;
overflow: hidden;
}
So I have this navbar made with materialize
My code is:
<nav class="light-blue lighten-1 " role="navigation">
<div class="nav-wrapper container "><a id="logo-container" href="#" class="brand-logo">Treasure Hunt</a>
<ul id="navbarUl" class="right hide-on-med-and-down">
<li class="active">Misiuni</li>
<li>NewsFeed</li>
<li>Clasament</li>
<li> </li>
<li id="navbarLi">
<div class="row">
<div class="col s6"><a id="navbarImg" href="#"><img src="img/asd.jpg" class="circle responsive-img small"/></a></div>
<div class="col s6">Adyzds</div>
</div>
</li>
<li >
<div class="row">
<div class="col s4">Level:
<span>Value</span>
</div>
<div class="col s4">XP:
<span>Value</span>
</div>
</div>
</li>
</ul>
</div>
</nav>
My mouse is over the profile pic. I would like the hover effect to cover the name too. Also, I would like the Level value to be near Level.
Can anyone help me?
CSS:
.icon-block {
padding: 0 15px;
}
.icon-block .material-icons {
font-size: inherit;
}
#navbarImg{
padding-top: 10px;
max-width: 70px;
max-height: 64px;
}
#navbarLi{
max-height: 64px;
}
Your columns are too narrow for Level: + value. Instead of creating a row with 2 columns inside, try using seperate <li> for each:
<li >
Level: <span>7</span>
</li>
<li>
XP:<span>105</span>
</li>
As for your name, just nest it in a <a> element and materialize will know what to do with it.
Check out this fiddle: https://jsfiddle.net/pwxa6e80/3/ ... hope it helps :)
I having problems trying to centralize a bootstrap standard nav in a row.
<footer id="page_footer">
<div class="container">
<div class="row">
<div class="col-md-8">
<ul id="page_footer_links" class="nav nav-pills nav-center">
<li role="presentation">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
</div>
<div class="col-md-4">
<p id="page_footer_wordpress" class="text-center">Orgulhosamente movido com WordPress!!!</p>
</div>
</div>
</div>
Here the complete fiddle: http://jsfiddle.net/vpontin/bkpnrLo0/
I tried putting text-center and center-block. None worked. Even putting margin 0 auto or text-align: center didn't work.
What i need to do?
The .nav-pills list items have default floating behavior to left. So change it to none and display them in one line using display: inline-block.
Updated JSfiddle
#page_footer {
background-color: #f5f5f5;
width: 100%;
}
#page_footer .container {
padding: 20px;
}
#page_footer_links {
margin: 0 auto;
text-align: center;
}
#page_footer_wordpress {
margin: 0px;
height: 40px;
line-height: 40px;
}
.nav-pills > li {
float: none !important;
display: inline-block !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<footer id="page_footer">
<div class="container">
<div class="row">
<div class="col-md-8">
<ul id="page_footer_links" class="nav nav-pills nav-center">
<li role="presentation">Home
</li>
<li role="presentation">Profile
</li>
<li role="presentation">Messages
</li>
</ul>
</div>
<div class="col-md-4">
<p id="page_footer_wordpress" class="text-center">Orgulhosamente movido com WordPress!!!</p>
</div>
</div>
</div>