Utilize bootstrap to organize ROW's elements from right to left

I'm a beginner in using Bootstrap and I am trying to align the items from left to right. In this example, I want to display 203 users on the right in large screens. I have attempted to use pull-right and text-right classes but they did not work. I would appreciate it if someone could help me resolve this issue. Any advice is welcome.

https://i.sstatic.net/ZhtLt.png

Here is the link to my 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 > a {
  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;
}
...

<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">
          ...
</body>

htmlcssbootstrap-4

Answer №1

Utilize bootstrap's col-md-push-* and col-md-pull-* classes to achieve the desired effect

Revise Your 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" >Welcome, dear user Arman Najahi.</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">Exit</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> Management <small>Manage your Instagram pages.</small></h1>
          </div>
          <div class="col-md-2 navbar-left">
                <div class="dropdown create navbar-left">
                    <button class="btn btn-default">
                        Settings
                    </button>
              </div>
          </div>
        </div>
      </div>
    </header>

    <section id="breadcrumb">
      <div class="container">
        <ol class="breadcrumb">
          <li class="active">Management</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">
                    Information
                </p>
              <p class="list-group-item"><span class="glyphicon glyphicon-usd" aria-hidden="true"></span> Your credit: 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>
                        Buy credit
                    </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>
              </div>
          </div>
        </div>
      </div>
    </section>

    <footer id="footer">
      <p>Copyright AdminStrap, &copy; 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>
</div>

  <script>
     CKEDITOR.replace( 'editor1' );
 </script>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can someone guide me on replicating this design with Bootstrap?

How do I achieve this layout using Bootstrap? https://i.sstatic.net/Ffvog.jpg I have checked my code but can't seem to find the mistake. Can someone please help me out? <div class="row"> <div class="img-5"> <div class="c ...

htmlcsstwitter-bootstrap

angular and node: troubleshooting the $http.get error

I have encountered an issue with the $http.get instruction. Without it on the main page, I receive a result of "random 46" which is correct. However, when I include $http.get, I get a result of "random {{ number }}". How can this problem be resolved? -se ...

javascripthtmlangularjsnode.jsget

The functionality of cloning in jQuery may encounter an issue where the text field remains enabled if the user selects an option labeled "other

Currently, I am working on a jQuery clone with my existing code and everything is functioning well. In the first scenario, if the user selects other from the dropdown menu, the text field becomes enabled. In the second scenario, when the user clicks ...

javascriptjqueryhtmlcss

Exploring Web Tables in Selenium: Extracting specific child elements based on conditions from their parent elements

Seeking assistance in locating web table elements using Selenium. Specifically, I need to identify a row with a certain class before searching for any elements within the row that have another specific class. For example: <tr class="slots tr_mrng"> ...

htmlselenium

Tips for downloading and saving an image in ReactJS

I'm facing an issue with my application that showcases a photo gallery. Each photo has a download button underneath, which should allow users to save the photos on their computers. However, when the photos are downloaded, they are saved as HTML docume ...

javascripthtmlnode.jsreactjs

Improving the Performance of HTML/CSS Animations - Enhanced Animation Speed

I have created an HTML page with CSS animation and transitions. <div class="container-fluid" id="team"> <div class="row first"> <div class="wrapper"></div> </div> <div class="row second"> <div class="wrapper" ...

htmlcsscss-transitionscss-animations

Is there a way to align my two tables next to each other using CSS?

.page { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } .items { float: left; } .secondItem { vertical-align: text-top; float: right; } .page-header table, th, td { border: 1px solid; display: block; background-color: ...

javascripthtmlcss

The CSS ID is being shared throughout the entire website

I'm having some trouble with my website's navigation menu. The style I defined for the id topnav_ubid seems to be applying to other parts of the site, particularly on a:link and a:visited. I only want this style to be applied to the menu itself. ...

phphtmlcss

Dropdown menu featuring a customizable input field

Is it possible to have a drop-down list with an input textbox field for creating new items in the same dropdown menu? ...

javascriptjqueryhtmlcssbootstrap-4

What is the process for utilizing Angular's emulated encapsulation attributes on HTML elements that are dynamically added to an Angular component?

Within my custom Angular component, a third-party library is dynamically adding an HTML element. I am seeking a solution that can apply Angular's encapsulation attributes to these elements regardless of the specific third-party library being used. If ...

cssangularangular-components

When using jQuery, adding a class does not always trigger CSS animation

Currently facing a peculiar issue. I am utilizing jQuery to load articles from JSON and would like to dynamically add a class of 'animate' to each loaded element. $.each(jsonArticles, function (i, article) { var $articleHTML = $( ' ...

javascriptjquerycsscss-animations

Is there a way to convert the structure of HTML/CSS into JSON format?

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .collapsible { background-color: #004c97; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text ...

cssjsonhtml

What steps can I take to ensure that my header remains static while my slides move in fullpagejs?

I need help with fixing the header in my fullpagejs slide. The header currently moves along with the slide, but I want it to stay in place within the background image. When I try taking the header out of the background section, it creates a white space at ...

javascripthtmlcssfullpage.js

Modify THREE.Mesh.position when slider value changes

Hey everyone, I've been tinkering with mesh translations using the Three.js library. I've set up HTML sliders to dynamically update the values within my project through JavaScript. Here's an example of what I'm working on: https://i.s ...

javascripthtmlthree.jsslideronchange

Adjust the vertical position of the image with HTML and CSS

I want to adjust the positioning of the image below the blue navigation bar so that it aligns with the main content area below, creating the appearance of a shaded box around the webpage's content. The image in question is boy_top.png. Is there a way ...

csshtml

Having difficulty deleting a checkbox element using JavaScript

My goal is to have a feature where users can effortlessly add or remove checkbox div elements as needed. The code I have written successfully adds and resets checkboxes, but I am encountering an issue when trying to remove them. I am struggling to identif ...

javascriptjqueryhtml

Tips for using the arrow keys to navigate the cursor/caret within an input field

I am trying to create a function that allows the cursor/caret to move inside an input field character by character using the arrow keys (ArrowLeft, ArrowRight) on a keydown event. Current Approach: const handleKeyDown = (e: KeyboardEvent<HTMLInputEle ...

javascripthtmlreactjstypescriptdom-events

There is no path available for [GET] request at "/users/sign_out" in the Rails 5/Bootstrap 4 application

Recently, I upgraded my existing Rails 5 app to use Bootstrap version 4 alongside Devise. Everything was working fine until I updated Bootstrap. Now, when users try to sign out, they encounter the error message: "No route matches [GET] "/users/sign_out". ...

ruby-on-railsdevisebootstrap-4

How can I create a unique overlay popup for each item in an iterated list using Django template?

Generating an iterated list of titles from context received by the template in Django is simple: {% for instance in object_list %} <li>{{instance.international_title}} </li> {% endfor %} CSS makes it easy to create a popup overlay as well: # ...

cssdjangodjango-templates

Utilize jQuery to dynamically add a CSS class to a button

When using jQuery to create dynamic buttons, is there a way to add a CSS class to the button during creation without needing an extra line of JavaScript to add the class afterwards? Below is a example code snippet: $.each(data, function (index, value) { ...

jqueryhtmlcss