I have a list of items with different width that I would like to display in two columns.
Is it possible to do it only with css?
HTML:
<div class="row-fluid custom-row-margin-30">
<div class="span12">
<ul class="thumbnails custom">
<li class="span6 box1">
<p>hola</p>
<p>hola</p>
</li>
<li class="span6 box2">
<div>hola</div>
</li>
<li class="span6 box3">
<div>hola</div>
</li>
</ul>
</div> <!-- span12 -->
</div>
CSS:
.box1 {background-color: green}
.box2 {background-color: blue}
.box3 {background-color: red}
Please note, the box1 has a bigger width than box2, for that reason box3 is not displayed in column1 but it moves to column2. Please see a plunker example.
https://plnkr.co/edit/ne2h4wD41vM3d61it6fN?p=preview
Add these styles
.thumbnails {
display: flex;
flex-wrap: wrap;
}
.row-fluid .span6 {
margin-left: 0 !important;
}
This should work as you asked
Related
I'm trying to achieve a solution where a horizontal line appears to the left of the text but the text remains centre aligned. Please see image below.
I've also added my mark-up below. I'm currently using Bootstrap 4.
<div class="text-center nav-items">
<ul>
<div class="pb-5">
<li>
<h2 class="sidebar-first-item">About</h2>
</li>
<p>Behind the brand // Meet the team</p>
</div>
<div class="pb-5">
<li>
<h2>Our Work</h2>
</li>
<p>Take a look at our marvelous creations</p>
</div>
<div class="pb-5">
<li>
<h2>Services</h2>
</li>
<p>Learn more about what we can do for you</p>
</div>
<div class="pb-5">
<li>
<h2 class="sidebar-last-item">Contact</h2>
</li>
<p>Get in touch today. Let's make some magic</p>
</div>
</ul>
</div>
Use pseudo-elements to do so:
.sidebar-first-item {
position: relative;
}
.sidebar-first-item:before {
content: '';
position: absolute;
width: 45%;
height: 5px;
background-color: red;
top: 50%;
left: 0%;
}
CodePen: https://codepen.io/manaskhandelwal1/pen/xxEaQYg
First cleanup your html, a <ul> list may not have children other than <li>, <script> or <template> elements (see The Unordered List element). Hence remove the div's inside the <ul> and add their classes to the <li>.
A solution to your design problem is to add a element before and after your anchor elements, size them (width) with a percentage you like and set a min-width for the anchor, so you have a nice responsive layout also on small devices. This creates an equal width red line
If you want the red line to align with the width of the text, you can make your anchor non-breaking white space and a set a padding, so the red line comes as close as defined in the padding towards the text.
.redline,
.spacer {
width: 100%;
height: 3px;
display: inline;
background-color: red;
}
.spacer {
height: 0px;
}
li {
display: flex;
align-items: center;
}
li a {
margin: 0 auto;
border: 0px solid gold;
padding: 0 20px;
white-space: nowrap;
}
li p {
width: 100%; margin:-50px 0 50px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="text-center nav-items">
<ul>
<li class="pb-5">
<span class="redline"></span>
<a href="#">
<h2 class="sidebar-first-item">About</h2>
</a>
<span class="spacer"></span>
</li>
<li>
<p>Take a look at our marvelous creations</p>
</li>
<li class="pb-5">
<span class="redline"></span>
<a href="#">
<h2>Our Work</h2>
</a>
<span class="spacer"></span>
</li>
<li>
<p>Behind the brand // Meet the team</p>
<li>
</ul>
</div>
This is where a CSS pseudo element can come into play! A pseudo element can be used to place designs before or after an element.
I added a class called horizontal-line to your h2.
<div class="text-center nav-items">
<ul>
<div class="pb-5">
<li>
<h2 class="horizontal-line sidebar-first-item">About</h2>
</li>
<p>Behind the brand // Meet the team</p>
</div>
<div class="pb-5">
<li>
<h2>Our Work</h2>
</li>
<p>Take a look at our marvelous creations</p>
</div>
<div class="pb-5">
<li>
<h2>Services</h2>
</li>
<p>Learn more about what we can do for you</p>
</div>
<div class="pb-5">
<li>
<h2 class="sidebar-last-item">Contact</h2>
</li>
<p>Get in touch today. Let's make some magic</p>
</div>
</ul>
The CSS will look like this.
.horizontal-line {
position: relative;
}
.horizontal-line::before {
content: "";
display: block;
width: 60px;
height: 2px;
position: absolute;
top: 50%;
left: 35%;
border-radius: 30px;
background-color: #DE657D;
}
By adding the pseudo element it will know to place it before any content with that class name. In this case, we are leaving content blank and placing in
https://jsfiddle.net/rc463gb8/1/
I have a li item and then a div which follows after it. Inside this div its like a hr tag, just a line with contents to separate. This is the desktop version.
When viewing in mobile version, I want to bring this li item below the div.
I tried with margin-top, the li item moves, but the div also move along with it, to further down.
How to achieve this ?
<li class="ser" s><a href="javascript:void(0);" title="" alt="" ><img src="/con.svg">
</li>
<div class="hbar row row-no-gutters">
<div class="col-sm-4 visible-tablet visible-desktop"> Content1
</div>
<div class="col-sm-4 visible-tablet visible-desktop"> Content2
</div>
<div class="col-sm-4 visible-tablet visible-desktop"> Content3
</div>
</div>
You could try reversing the order of the outer container with flexbox.
<ul class="container">
<li>list item</li>
<div>some content</div>
</ul>
.container{
display: flex;
flex-direction: column-reverse;
}
I cant seem to move the image inside a div. It can only be moved with absolute positioning, which I am not okay with. Can someone point out why the below given code isnt working. I want all 3 divs to be in one line . Image seems to be stuck in the top left corner. Applying padding doesnt change anything either.Please help
<div class="container" style="display:table">
<div style="display:table-cell">
<div class="emblem" style="padding:0 0 0 20px ;display:table-cell"></div>
<div class="logo" style="display:table-cell" Software Solutions</div>
</div>
<div class="header" style="">
<nav>
<ul style="display:flex;justify-content">
<li> Home</li>
<li>
<a href="{% url 'aboutus' %}" target="ifr" onclick="setTitle2()">
<title>RCE-About</title>About Us</a>
</li>
<li>Products</li>
<li>Solutions</li>
<li>Support</li>
</ul>
</nav>
</div>
</div>
It's maybe something like this you need to do..
EDIT:edited snippet code, navbar is under logo but take 100% width
.container{
display:flex;
justify-content: flex-start;
flex-wrap:wrap;
background:gray;
padding:5px;
}
.navbar-container{
width:100%
}
.container > div{
display:block;
height: 50px;
background: red;
margin-right: 15px;
padding:15px;
text-align:center;
}
ul{
margin:0;
padding:0;
}
ul li{
display:inline-block;
}
<div class="container">
<div class="1">Some text</div>
<div class="logo">LOGO</div>
<div class="navbar-container">
<div class="navbar">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
</div>
</div>
Hi I am trying to create simple slider for displaying latest product on the page using Bootstrap 3 at This DEMO. I have 6 thumbnails in a gallery div which I would like to display only 4 of them in front view and slide to left to see two more. I used bootstrap
<ul class="list-inline">
<li>...</li>
</ul>
css to render a display: inline-block; list of my <li>s but I do not know why they are not fitting in one line and 2 last items displays at the buttom of the gallery box. BESIDES the first <li> looks taller (Even if I have only 4 <li>).
Now my questions are:
1 - Why The First item Looks taller than the rest?
2 - Why Items are not displaying in a line?
3 - Finally why the overflow: hidden; property in .gallery is not performing properly?
and here is my code:
.gallery {
margin: 0 auto;
overflow: hidden;
width: 100%;
position: relative;
max-height:325px;
}
<!-- About Section -->
<section id="ft" class="cbp-so-section cbp-so-init">
<div class="container cbp-so-side cbp-so-side-top">
<h4>Latest Features</h4>
<div class="row">
<div class="well gallery col-lg-12 col-md-12 col-sm-2 col-xm-1">
<ul class="list-inline">
<li class="col-sm-3">
<div class="well"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></div>
</li>
<li class="col-sm-3">
<div class="well"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></div>
</li>
<li class="col-sm-3">
<div class="well"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></div>
</li>
<li class="col-sm-3">
<div class="well"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></div>
</li>
<li class="col-sm-3">
<div class="well"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></div>
</li>
<li class="col-sm-3">
<div class="well"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></div>
</li>
</ul>
</div>
</div>
</div>
</section>
Playing a bit with Firebug, I found that the issue here is because of the following rule:
.list-inline > li:first-child {
padding-left: 0;
}
All the .list-inline > li elements have a padding-left:5px rule, expect the first child. Because of that missing padding in the first child, the img inside has 5px more width (because of the max-width:100%; rule).
If you set the width of the img in pixels, you will not have this issue.
Regarding the (2) question, the bootstrap grid system requires that in one row the number sum of the col-sm-* is 12. You need to change in from col-sm-3 to col-sm-2 to have all 6 items in one line.
Regarding the (3) question, I am not sure what exactly you are expecting to see.
EDIT 2: See this link for a CSS fix http://bootply.com/111878
.gallery {
margin: 0 auto;
overflow: hidden;
width: 100%;
position: relative;
max-height:310px;
}
.list-inline img.img-responsive {
height: 233px;
width: 233px;
}
I've tried a few option but i can't manage to get 4 links to span across the navbar. I thought it would be quite easy to add the span3 class to each <li>.
Here's my HTML:
<div class="navbar center">
<div class="navbar-inner">
<div class="container row">
<ul class="nav span12">
<li class="active span3">
Home
</li>
<li class="span3">Link</li>
<li class="span3">Link</li>
<li class="span3">Link</li>
</ul>
</div>
</div>
</div>
To center the links I've used the solution described here: Modify twitter bootstrap navbar
Here's the CSS:
.navbar-inner {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.center.navbar .nav,
.center.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.center .navbar-inner {
text-align:center;
}
All I've managed to get is this:
How can I get those four links spanned on the same row?
Using spanX is not the best solution here (unless you're using bootstrap-resonsive.css, see below). You can uses percentages, as long as you're willing to modify you CSS when the number of items in the navbar changes.
You can make this work with default navbar markup:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</div>
And two CSS rules. The first removes the margin on the <ul class="nav">, removes the float and sets its width to be 100% of its container (in this case, the <div class="container"> within <div class="navbar-inner">.
The second rule sets the width of each <li> to be a certain percentage of the width of the <ul>. If you have four items, then set it to 25%. If you have five, it'd be 20%, and so on.
.navbar-inner ul.nav {
margin-right: 0;
float: none;
width: 100%;
}
.navbar-inner ul.nav li {
width: 33%;
text-align: center;
}
jsFiddle DEMO
UPDATE
If you are using the responsive bootstrap CSS, you CAN use the built-in spanX classes, like so:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav row-fluid">
<li class="span4">Home</li>
<li class="span4">Link</li>
<li class="span4">Link</li>
</ul>
</div>
</div>
</div>
Then, all the CSS you need is:
.navbar-inner ul.nav li {
text-align: center;
}
jsFiddle DEMO
You did a good start but your markup doesn't reflect the real grid :
You don't put .spanX in a .span12
.container and .row might have conflicting properties
It seems to work with this :
<div class="navbar center">
<div class="navbar-inner">
<div class="container">
<div class="row">
<ul class="nav">
<li class="active span3">
Home
</li>
<li class="span3">Link</li>
<li class="span3">Link</li>
<li class="span3">Link</li>
</ul>
</div>
</div>
</div>
</div>
Demo (jsfiddle) and fullscreen