I'm using Bootstrap to create a website. I need to create an ordered list that has text then an image next to it. For some reason, the content of the list is shifted by one line so that it looks like this:
1.
text here [ image here ]
2.
text here [ image here ]
How do I get it to align properly?
here is my code:
<ol>
<li>
<div class="span12">
<div class="span6">Test</div>
<div class="span6"><img src="asdfd.png"></div>
</div>
<div class="clearfix"></div>
</li>
<li>
<div class="span12">
<div class="span6">Test</div>
<div class="span6"><img src="asdfds"></div>
</div>
<div class="clearfix"></div>
</li>
</ol>
Related
I have a site that uses Bootstrap 3. In that site, I have a list of items. For each item, I want to show an icon. To the right of the icon, I want to show a blurb of text. Currently, I have this working for small amounts of text. However, when my block of text grows, it eventually gets to a point where the text block appears below the icon instead of beside it.
I've created a fiddle to demonstrate the problem here. The code looks like this:
<div class="container">
<div class="row">
<div class="col-md-4">
<ul class="list-inline">
<li>[icon]</li>
<li><div style="background-color:#ccc; padding:16px;">
This is some text that should appear to the right of the icon.
If this text is longer, it should wrap within this box.
</div></li>
</ul>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4">
<ul class="list-inline">
<li>[icon]</li>
<li><div style="background-color:#ccc; padding:16px;">
Shorter blurbs appear beside like it should.
</div></li>
</ul>
</div>
</div>
</div>
Why isn't the second li always appearing to the right of the first li?
Instead of making lielements appearing side to side. Use the existing component of bootstrap Media object(more info here) to make it happen.
Check Demo Here
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<ul class="list-unstyled">
<li>
<div class="media">
<div class="media-left">
<a href="#">
<span class="media-object">
<i class="fa fa-user fa-2x"></i>
</span>
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4> This is some text that should appear to the right of the icon. If this text is longer, it should wrap within this box.
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
I would like to make a layout where my logo is at the left, and my title and menu are on the right of the logo. When the screen is too small then it should be logo, title and then menu. (On either side there is a col-lg-2)
My attempt was:
<header class="row">
<div id="logo"class="col-xs-12 col-sm-2
col-md-2 col-md-offset-2 col-lg-2 col-lg-offset-2">
</div>
<div id="title_menu" class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div id="title">
Title
</div>
<nav id="navigation_bar" >
Menu
</nav>
</div>
</header>
<div class="row">
<div id="something" class="col-xs-12 col-sm-12
col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
something
</div>
header {
background: #0090e5 !important;
}
#logo {
height:250px;
}
#title_menu {
height:50px;
}
But on an IPhone the title and menu disappear and seem to be behind the element in the row underneath. I am using the height, because I want everything to be align with the bottom of the row.
I'm not sure exactly what you're going for, but there appears to be quite a bit of redundancy in your classes. One thing you should know about Bootstrap is that you only need to specify the number of columns on each size if the number of columns is changing. For instance, if you want a div to take up 2 columns on small, medium and large, you only need to define small, every size above small will automatically use the same number of columns. Similarly, you don't need to specify col-xs-12 because that is already assumed. So you could simplify it to this(notice how I'm only defining the number of columns for sm and everything else is taken care of automatically):
<div class="container">
<header class="row">
<div id="logo" class="col-sm-2">
<img src="http://placehold.it/50x50">
</div>
<div id="title_menu" class="col-sm-5">
<div id="title">
Title
</div>
</div>
<div class="col-sm-5">
<nav id="navigation_bar">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
</ul>
</nav>
</div>
</header>
</div>
This will display the logo, title and menu all on the same line from small up and it will show the logo, title and menu stacked on mobile(xs).
Bootply example
I am using wt-rotator carousel plugin with bootstrap. I have to place a menu on top of the carousel on the top left, in a fixed position. The menu should stay there even as the images fade in and fade out. Is there a way to do it using CSS?
Edit: added the code below.
So far just this code below. it is a bootstrap jumbotron, which has a wt-rotator carousel inside. On top of this carousel, I have to put a menu.
<div class="jumbotron">
<div class="container">
<div id="banner-container">
<div class="wt-rotator">
<div class="c-panel">
<div class="thumbnails">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="buttons">
<div class="prev-btn"></div>
<div class="play-btn"></div>
<div class="next-btn"></div>
</div>
</div>
</div>
</div>
</div>
You can use a outside div with position absolute and z-index superior to the slider, and put that div on front of the slider.
I want to create a template for a project that i am working on using Bootstrap and i have a problem with the behavior of the offcanvas sidebar. I want the sidebar to take all the space below the header and to not be scrollable. I have found two templates, that combined do what i want but i have a problem merging them as i am not very good with css. I have tried a lot to do but i can't figure how to do it. Here is a picture showing the desired functionality/behavior of the template i want to make:
Here are the two templates i have found:
Dashboard
Dashboard (with off-canvas sidebar)
And here is the code (HTML+CSS) of each template (stripped down) so you can easily figure out how they work:
Dashboard - fixed sidebar
HTML
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Overview</li>
<li>Reports</li>
<li>Analytics</li>
<li>Export</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
</div>
</div>
CSS: getbootstrap.com/examples/dashboard/dashboard.css
Dashboard (with off-canvas sidebar) - scrollable
HTML
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-sm-3 col-md-2 sidebar-offcanvas" id="sidebar">
<ul class="nav nav-sidebar">
<li class="active">Overview</li>
<li>Reports</li>
<li>Analytics</li>
<li>Export</li>
</ul>
</div>
<div class="col-sm-9 col-md-10 main">
<h1 class="page-header">Dashboard</h1>
</div>
</div>
CSS: http://textuploader.com/k6ae
I'm laying out a navbar and it's coming out all wrong. I want to have a left and right component so I'm using two span6's. But I'm finding that the first span6 is centered on its own line. Chrome's dev tools show the centered div as having the correct dimensions and 20px left-margin -- it's just centered. As if the container is center it?
Here's the HTML for the navigation view:
<div id="group_and_date_controls" class="container">
<div class="row">
<div id="group_control" class="span12">
<ul>
<span id="new_group">New Group</span>
<li class="controlItem">hi</li>
<li class="controlItem">hi</li>
</ul>
</div>
<div id="date_control" class="span6 navbar pull-right">
<ul id="thing" class="nav pull-right">
<li>Jun 12th</li>
<li>Today, Jun 13th</li>
<li>Jun 14th</li>
</ul>
</div>
</div>
</div>
"I want to have a left and right component so I'm using two span6's."
...Except if your code is the same as the code you posted in your question, you are using one span12, and then one span6. Here's a version that uses two span6 classes.
http://jsfiddle.net/FtPZf/
<div id="group_and_date_controls" class="container">
<div class="row">
<div id="group_control" class="span6">
<ul>
<span id="new_group">New Group</span>
<li class="controlItem">hi</li>
<li class="controlItem">hi</li>
</ul>
</div>
<div id="date_control" class="span6 navbar pull-right">
<ul id="thing" class="nav pull-right">
<li>Jun 12th</li>
<li>Today, Jun 13th</li>
<li>Jun 14th</li>
</ul>
</div>
</div>
</div>