I'd like to arrange the list element displayed from right to left,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div class="row">
<div class="col-sm-6">
<ul>
<li>Javasript
<ul>
<li>DOM</li>
<li>BOM</li>
<li>Global Objects</li>
</ul>
</li>
<li>jQuery</li>
<li>CSS</li>
<li>HTML</li>
</ul>
</div>
</div>
<script>
</script>
</body>
</html>
I tried to add class="pull-right" to ul element, but found that they were all right-alighned without formatting.
Should I adjust the padding of li one by one?
I want it shown as
- Javascript
- DOM
- BOM
- jQuery
Try this CSS code:
ul{
direction: rtl;
}
You are forgot to add bootstrap css cdn in your file. You can get bootstrap css from here.
Then you can use bootstrap grid. There is row class in bootstrap. It has 12 column. click here for understand grid concept.
pull-right is replaced with float-right.
Similarly pull-leftis replaced with float-left.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<ul>
<li>Javasript
<ul>
<li>DOM</li>
<li>BOM</li>
<li>Global Objects</li>
</ul>
</li>
<li>jQuery</li>
<li>CSS</li>
<li>HTML</li>
</ul>
</div>
<div class="col-sm-4"></div>
</div>
<script>
</script>
</body>
</html>
Update:- As per your question output is updated. In that, There could be multiple solutions come across. One of the solutions is you can use grid concept as I mentioned above. Identify the columns in which you would like to display content as I update in my code. Other than this you could use align-item as well of bootstrap. Other than this you can also use justify-content-center link.
Related
I have chosed jQuery ui tags in my project. And they are named by tabs1 and tabs2.
I can use ui-tabs-panel{background:lightyellow;} to set background, and the background of tabs1 and tabs2 are both lightyellow;Here is css code:
<style>
.ui-tabs .ui-tabs-panel{background: lightyellow;}
</style>
Here is html code:
<div id="tabs" class="div2">
<ul>
<li></li>
<li></li>
</ul>
<div id="tabs1" style="height:60%" >
sdf
</div>
<div id="tabs2" style="height:60%">
Morbi
</div>
</div>
But I want background of tabs1 is lightyellow, and tabs2's blue.
I have tried:
<div id="tabs1" style="height:60%;background:lightyellow;">
sdf
</div>
<div id="tabs2" style="height:60%;background:blue;">
Morbi
</div>
But it works failed.
I don't know how to set css, Who can help me?
used !important
<style>
.ui-tabs .ui-tabs-panel{background: lightyellow;!important}
</style>
To overrule your background you can use:
<div id="tabs1" style="height:60%;background:lightyellow !important;">
Hope it helped
I'm trying to view text under the navBAR, but it just appears straight next to the navBAR buttons. I've tried some margin properties in css, but nothing seemed to work.
Thanks in advance!!
<html>
<title>title</title>
<head>
<img src="img/logo.png">
<meta charset="uft-8">
<link rel="stylesheet" href="css/style.css">
<style>
.narBAR{margin:0 auto; width:1080px;}
.navBAR ul {padding:0px;}
.navBAR ul li {float:left;}
</style>
</head>
<body>
<body background="untitled.png">
<div class="navBAR">
<ul>
<li></li>
<ul>
<li></li>
<li></li>
</ul>
<li></li>
<li></li>
</ul>
</div>
<div class="search">
<form action="file:///C:/Users/Amroo/Desktop/new%201.html/search.php">
<input type="text" name="search" placeholder="Search......"/>
<input type="submit" value="Search"/>
</form>
</div>
<h1>text</h1>
<img src="blog/img/mars.jpeg">
<h3>text</h3>
</body>
Your CSS has a wrong class .narBAR:
.narBAR{margin:0 auto; width:1080px;}
Also there are errors in your code. You can't have <img> in your <head> so place this <img src="img/logo.png"> in your <body>.
And use css background instead of <body background="untitled.png">.
For example:
body{
background-image: url(untitled.png);
}
Although your code should work fine you can get described issue due to images so set overflow: hidden for .navBAR
Something like this https://jsfiddle.net/kdmvxrmx/
If I use a container. For instance
and then I use position relative. Position relative will mess with the container by moving left and right.Wouldn't this cause render issues for devices when i'm specifying the grids and then moving the content around?
What would be the proper way to move the content without messing up the grids I setup with col-md-#/col-sm-#
HTML
<!DOCTYPE html>
<html ng-app='formApp'>
<head>
<title>Bicycle App</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class='row'>
<div class='col-md-12'>
<i class="fa fa-bicycle" aria-hidden="true"><span> {{"Andy's Bike Shop"}}</span></i>
</div>
</div>
</div><!--Header Container-->
</div>
<div class="bikeSelector">
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6"><!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
<div class="col-md-offset-2 col-md-10"><!-- you missed md from offset, end class not needed -->
Test
</div>
</div>
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
CSS
.products {
position :relative;
left: 500px;
}
Your html is wrong in places for what you're trying to achieve.
Try this (not tested but should get you started)
<div class='row'>
<div class='col-md-offset-3 col-md-6'><!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
<div class="col-md-offset-2 col-md-10"><!-- you missed md from offset, end class not needed -->
<div class="products">
{{bike.name}}
</div>
</div>
</div><!--bike controller row-->
Here's a bootply which is a great way to test before you add
I am trying to have my sidebar at full height. I am using bootstrap for my blog and here is a sample page:
http://blog-olakara.rhcloud.com/blog/2013/12/11/welcome-to-jekyll/
I am trying to avoid that white space at the bottom of the screen and have the blue backgound till the bottom . I tried to implement the second solution mentioned in this SO question
But, it spoils the responsive nature for the webpage.
I also found some solution that recommend to modify the base of bootstrap like "row" class.. Is there a solution for bootstrap with responsive retained?
From their sample page:
<!-- Container-->
<div class="container-fluid">
<div class="row">
<!-- sidebar -->
<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> <!-- sidebar -->
<!-- main pane -->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
<p>hello world</p>
</div> <!-- main -->
</div> <!-- .row -->
</div> <!-- .container-fluid -->
You may have to tweak some settings from their custom CSS file
Add style="height:100%;" at your <html> tag. So it will be <html style="height:100%" class="js">
Add height to html tag
html {
height: 100%;
}
I the a MVC4 project with the following index.cshtml:
#{
Layout = null;
}
<script src="~/Scripts/jquery-2.0.3.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<link href="~/Content/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap/bootstrap-theme.css" rel="stylesheet" />
<div class="well">Hmm..</div>
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span8">left</div>
<div class="span4">right</div>
</div>
The output seems to work halve because the div with the well gets a nice background color. But the navbar puts all the divs under each other instead of next to each other:
Title
Home
Link
Link
This also applies for the row. That looks like this:
Left
Right
Does someone has a clue what's going on here?
I think you have to apply span for the Divs.
<div class="span4">
<p>Bruce Wayne</p>
...
</div>
It's some time since I used Bootstrap but I just took a quick look and it seems it's called col now or so. You can check it out further here, link.