html - Sort from right to left of ROW using bootstrap -
i'm new bootstrap. want sort items left right.i want show 203 user in right in large screen in example. try using pull-right , text-right didn't work. thankful if can me fix problem.please advice accordingly
here link of code:
body{ background:#f4f4f4; } @font-face { font-family: 'google'; src: url('/fonts/google.eot?#') format('eot'), /* ie6–8 */ url('/fonts/google.woff') format('woff'), /* ff3.6+, ie9, chrome6+, saf5.1+*/ url('/fonts/google.ttf') format('truetype'); /* saf3—5, chrome4+, ff3.5, opera 10+ */ } *{ font-family: google, arial, helvetica, sans-serif; direction: rtl; } /* navbar */ .navbar{ min-height: 33px !important; margin-bottom:0; border-radius:0; } .navbar-nav > li > a, .navbar-brand{ padding-top:6px !important; padding-bottom:0 !important; height: 33px; } .navbar-default { background-color: #e74c3c; border-color: #c0392b; } .navbar-default .navbar-brand { color: #ecf0f1; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #ffbbbc; } .navbar-default .navbar-text { color: #ecf0f1; } .navbar-default .navbar-nav > li > { color: #ecf0f1; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #ffbbbc; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #ffbbbc; background-color: #c0392b; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #ffbbbc; background-color: #c0392b; } .navbar-default .navbar-toggle { border-color: #c0392b; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #c0392b; } .navbar-default .navbar-toggle .icon-bar { background-color: #ecf0f1; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #ecf0f1; } .navbar-default .navbar-link { color: #ecf0f1; } .navbar-default .navbar-link:hover { color: #ffbbbc; } /* custom */ .main-color-bg{ background-color: #e74c3c !important; border-color: #c0392b !important; color:#ffffff !important; } /* header */ #header{ background:#333333; color:#ffffff; padding-bottom: 10px; margin-bottom: 15px; } #header .create{ padding-top: 20px; } /* breadcrumb */ .breadcrumb{ background:#cccccc; color:#333333; } .breadcrumb a{ color:#333333; } /* progress bars */ .progress-bar{ background:#333333; color:#ffffff; } .dash-box{ text-align:center; } #login{ margin-top:30px; } /* footer */ #footer{ background:#333333; color:#ffffff; text-align:center; padding:30px; margin-top:30px; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > { color: #ecf0f1; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #ffbbbc; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #ffbbbc; background-color: #c0392b; } } .loginlink{ margin-top:10px; padding-top:10px; } .linkcolorfont{ color: #000000; text-decoration: none; } a:hover{ text-decoration: none; color: #555555; } img { display: block; margin: 0 auto; } .page-right { float: right; }<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <body> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header navbar-right"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <p class="navbar-brand" >کاربر گرامی آرمان نجاحی خوش آمدید.</p> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="login.html">خروج</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <header id="header"> <div class="container"> <div class="row"> <div class="col-md-10 pull-right"> <h1><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> مدیریت <small>صفحات اینستاگرام خود را مدیریت نمایید.</small></h1> </div> <div class="col-md-2 navbar-left"> <div class="dropdown create navbar-left"> <button class="btn btn-default"> تنظیمات </button> </div> </div> </div> </div> </header> <section id="breadcrumb"> <div class="container"> <ol class="breadcrumb"> <li class="active">مدیریت</li> </ol> </div> </section> <section id="main"> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="list-group"> <p class="list-group-item active main-color-bg"> اطلاعات </p> <p class="list-group-item"><span class="glyphicon glyphicon-usd" aria-hidden="true"></span> اعتبار شما : 125</p> <p class="list-group-item"><button class="btn btn-default text-center pagination-centered"><span class="glyphicon glyphicon-credit-card text-center pagination-centered"></span> خرید اعتبار </button></p> </div> </div> <div class="col-md-9"> <!-- website overview --> <div class="panel panel-default"> <div class="panel-heading main-color-bg"> <h3 class="panel-title">website overview</h3> </div> <div class="panel-body "> <div class="row .text-right"> <div class="col-md-6 "> <div class="well dash-box"> <div class="row"> <div class="col-sd-6"> <img src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-circle pull-center" alt="cinque terre" width="100px" height="100px"> </div> <div class="col-sd-6"> <h2 class="pull-center">shikkhooneh</h2> </div> </div> <h2><span class="glyphicon glyphicon-user" aria-hidden="true"></span> 203</h2> <h4>users</h4> </div> </div> <div class="col-md-6"> <div class="well dash-box"> <div class="row"> <div class="col-sd-6"> <img src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-circle pull-center" alt="cinque terre" width="100px" height="100px"> </div> <div class="col-sd-6"> <h2 class="pull-center">shikkhooneh</h2> </div> </div> <h2><span class="glyphicon glyphicon-user" aria-hidden="true"></span> 204</h2> <h4>users</h4> </div> </div> </div> <div class="col-md-6"> <div class="well dash-box"> <h2><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> 12</h2> <h4>pages</h4> </div> </div> <div class="col-md-6"> <div class="well dash-box"> <h2><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 33</h2> <h4>posts</h4> </div> </div> <div class="col-md-6"> <div class="well dash-box"> <h2><span class="glyphicon glyphicon-stats" aria-hidden="true"></span> 12,334</h2> <h4>visitors</h4> </div> </div> </div> </div> </div> </div> </div> </section> <footer id="footer"> <p>copyright adminstrap, © 2017</p> </footer> <!-- modals --> <!-- add page --> <div class="modal fade" id="addpage" tabindex="-1" role="dialog" aria-labelledby="mymodallabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <form> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="mymodallabel">add page</h4> </div> <div class="modal-body"> <div class="form-group"> <label>page title</label> <input type="text" class="form-control" placeholder="page title"> </div> <div class="form-group"> <label>page body</label> <textarea name="editor1" class="form-control" placeholder="page body"></textarea> </div> <div class="checkbox"> <label> <input type="checkbox"> published </label> </div> <div class="form-group"> <label>meta tags</label> <input type="text" class="form-control" placeholder="add tags..."> </div> <div class="form-group"> <label>meta description</label> <input type="text" class="form-control" placeholder="add meta description..."> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> <button type="submit" class="btn btn-primary">save changes</button> </div> </form> </div> </div> </div> <script> ckeditor.replace( 'editor1' ); </script> <!-- bootstrap core javascript ================================================== --> <!-- placed @ end of document pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body>
make use of bootstrap col-md-push-* , col-md-pull-* achive desired effect
modify html code
html
<body> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header navbar-right"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <p class="navbar-brand" >کاربر گرامی آرمان نجاحی خوش آمدید.</p> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="login.html">خروج</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <header id="header"> <div class="container"> <div class="row"> <div class="col-md-10 pull-right"> <h1><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> مدیریت <small>صفحات اینستاگرام خود را مدیریت نمایید.</small></h1> </div> <div class="col-md-2 navbar-left"> <div class="dropdown create navbar-left"> <button class="btn btn-default"> تنظیمات </button> </div> </div> </div> </div> </header> <section id="breadcrumb"> <div class="container"> <ol class="breadcrumb"> <li class="active">مدیریت</li> </ol> </div> </section> <section id="main"> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="list-group"> <p class="list-group-item active main-color-bg"> اطلاعات </p> <p class="list-group-item"><span class="glyphicon glyphicon-usd" aria-hidden="true"></span> اعتبار شما : 125</p> <p class="list-group-item"><button class="btn btn-default text-center pagination-centered"><span class="glyphicon glyphicon-credit-card text-center pagination-centered"></span> خرید اعتبار </button></p> </div> </div> <div class="col-md-9"> <!-- website overview --> <div class="panel panel-default"> <div class="panel-heading main-color-bg"> <h3 class="panel-title">website overview</h3> </div> <div class="panel-body "> <div class="row .text-right"> <div class="col-md-6 col-md-push-6 "> <div class="well dash-box"> <div class="row"> <div class="col-sd-6"> <img src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-circle pull-center" alt="cinque terre" width="100px" height="100px"> </div> <div class="col-sd-6"> <h2 class="pull-center">shikkhooneh</h2> </div> </div> <h2><span class="glyphicon glyphicon-user" aria-hidden="true"></span> 203</h2> <h4>users</h4> </div> </div> <div class="col-md-6 col-md-pull-6"> <div class="well dash-box"> <div class="row"> <div class="col-sd-6"> <img src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-circle pull-center" alt="cinque terre" width="100px" height="100px"> </div> <div class="col-sd-6"> <h2 class="pull-center">shikkhooneh</h2> </div> </div> <h2><span class="glyphicon glyphicon-user" aria-hidden="true"></span> 204</h2> <h4>users</h4> </div> </div> </div> <div class="col-md-6 col-md-push-6"> <div class="well dash-box"> <h2><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> 12</h2> <h4>pages</h4> </div> </div> <div class="col-md-6 col-md-pull-6"> <div class="well dash-box"> <h2><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 33</h2> <h4>posts</h4> </div> </div> <div class="col-md-6 col-md-push-6"> <div class="well dash-box"> <h2><span class="glyphicon glyphicon-stats" aria-hidden="true"></span> 12,334</h2> <h4>visitors</h4> </div> </div> </div> </div> </div> </div> </div> </section> <footer id="footer"> <p>copyright adminstrap, © 2017</p> </footer> <!-- modals --> <!-- add page --> <div class="modal fade" id="addpage" tabindex="-1" role="dialog" aria-labelledby="mymodallabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <form> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="mymodallabel">add page</h4> </div> <div class="modal-body"> <div class="form-group"> <label>page title</label> <input type="text" class="form-control" placeholder="page title"> </div> <div class="form-group"> <label>page body</label> <textarea name="editor1" class="form-control" placeholder="page body"></textarea> </div> <div class="checkbox"> <label> <input type="checkbox"> published </label> </div> <div class="form-group"> <label>meta tags</label> <input type="text" class="form-control" placeholder="add tags..."> </div> <div class="form-group"> <label>meta description</label> <input type="text" class="form-control" placeholder="add meta description..."> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> <button type="submit" class="btn btn-primary">save changes</button> </div> </form> </div> </div> </div> <script> ckeditor.replace( 'editor1' ); </script> <!-- bootstrap core javascript ================================================== --> <!-- placed @ end of document pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body>
Comments
Post a Comment