Adjusting the layout of columns in Bootstrap 3

I have been attempting to realign columns in bootstrap, but without success so far. In desktop view it looks fine as seen here. However, when the size is condensed, it appears like this tablet view. My goal is to swap the positions of the owner gateway column and the logged in column.

HTML: 

    <div class="col-xs-4 col-sm-4 col-lg-3" id="logo">
    <img src="http://f.cl.ly/items/2B2c3t3d0N0r1F0F1m05/logo-white.png" class="img-responsive">
  </div>
  <div class="col-xs-8 col-sm-4 col-lg-6" id="main-title">
    <h1 class="title">Owner Gateway</h1>
  </div>
  <div class="col-xs-4 col-sm-4 col-lg-3 " id="logged-in">
    <p class="logged">Logged in as Mr Jones</p>
    <p class="log">Log out</p>
  </div>
  </div>

Thank you in advance.

htmlcssresponsive-designalignmenttwitter-bootstrap-3

Answer №1

If you're looking to customize the positioning of elements in your layout, I recommend checking out the column ordering section of Bootstrap's documentation.

To shift the "owner" div to the right, try adding the class col-sm-push-4, and for the "logged in" div, utilize col-sm-pull-4 to move it to the left.

Answer №2

What about trying this one out:

<div class="col-xs-4 col-sm-4 col-lg-4" id="logo">
    <img src="http://f.cl.ly/items/2B2c3t3d0N0r1F0F1m05/logo-white.png" class="img-responsive">
  </div>
  <div class="col-xs-4 col-sm-4 col-lg-4" id="main-title">
    <h1 class="title">Owner Gateway</h1>
  </div>
  <div class="col-xs-4 col-sm-4 col-lg-4" id="logged-in">
    <p class="logged">Currently logged in as Mr Jones</p>
    <p class="log">Click here to log out</p>
  </div>
</div>

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

Embedding external javascript within another javascript file

I have two pieces of code - code 1 and code 2. Code 1 is login.html which I am saving as login.js, and code 2 consists of some jQuery and JavaScript codes. My problem is how to insert the first code into the second code. Code 1: login.html (saved as logi ...

javascripthtml

Simple method for swapping out an HTML string with image tags solely using JavaScript

In our Ionic 2 App, we are displaying content from a backend API in the form of Questions and Answers. The Answers are generated using summernote, allowing us to render raw HTML in the app. However, we need to replace all instances of img tags in the answe ...

javascripthtml

Tips for centering a paragraph vertically within a div element

I'm struggling to achieve automatic vertical alignment for this. While I can manually center it using padding-bottom, I prefer a way to position it vertically on its own. How can I accomplish this while retaining the display: inline-block feature? &l ...

htmlcss

Expanding a CSS div when the content wraps on smaller screens

When viewing the menu on standard screens, everything looks good. However, on smaller screens, the menu items start to wrap which is fine. The only issue is that the containing div #nav does not automatically enlarge along with it. I would like for the div ...

css

Can you explain the purpose and significance of addEventListener()?

class MyController{ public myEntities = ko.observableArray(); constructor(modelData) { var me = this; me.onViewLoaded.addEventListener(() => { me.myEntities.push(modelData); }); } The ...

htmlknockout.jstypescript

What changes do I need to make to improve the responsiveness of my website?

What changes do I need to make to my website's responsiveness for viewing on phones? You can view my website here, and the link to the responsive code here. I'm hoping someone can help me with the correct code so I can update my website's r ...

css

css, align top menu

Is it possible to achieve this using only CSS? Please take a look at my example here. Currently, when I hover over the menu, the submenu appears next to it. I would like to align all submenus' tops with the top of the second level menu. ---------- ...

htmlcssmenuhover

Employees are unable to operate within an HTML page embedded in a WPF project

When running scripts on an HTML page, the page tends to freeze until the script completes. This is why I am considering using workers. However, I have encountered a problem: <html> <head> </head> <body> <button onclick="startWor ...

javascripthtmlwpfmultithreading

Is there a way to deactivate both my input field and its associated content by choosing a specific option?

I have been searching for a solution to my problem without any success. I'm currently learning javascript and jquery, and I want to figure out how to disable the <input> and its data when the option "none" is selected. My first attempt involved ...

javascriptjqueryhtml

Problem with z-index in VueJS: Child div z-index not functioning within v-dialog

I am facing an issue where I have brought a span to display a loading image inside the v-Dialog of a vuejs screen. The problem is that the v-dialog has a z-index of 220 set as inline style, causing my new span (loading image) to appear below the v-dialog. ...

jquerycssvue.jsz-index

Ways to modify the border style of a checkbox using CSS

Is there a way to modify the border style of a checkbox input? I tried using border:1px solid #1e5180, but it doesn't seem to work in FireFox 3.5! ...

htmlcss

Unable to view image stored as a blob

https://i.stack.imgur.com/8v90u.pngI have been studying these examples PHP display image BLOB from MySQL How to display an BLOB image stored in MySql database? They all demonstrate the same method of displaying images saved as blob. In my case, I ha ...

phphtmlmysql

When the main index.html page is accessed, a specific HTML sub-page is dynamically loaded into a div

Is there a way to load a specific sub-page into a div tag when the website is loading? Here's an example of the div: <div id="content-main"> </div> I need to make sure that only a certain sub HTML document is loaded once the main index ...

javascriptjqueryhtmlcss

Measuring values from table data using jQuery

Facing an issue with a jQuery script that involves creating a simple counting loop for each tr. My table structure is as shown below, and I am attempting to select the second td, multiply it by two, add it to the third td, and display the result in the fou ...

javascriptjqueryhtmlhtml-table

How can I customize the appearance of a disabled radio button within spans?

While attempting to make my radio button square using CSS by incorporating spans and before and after elements, I encountered a new client request. The client now wants the radio buttons to be disabled with a unique style when in this state. Unfortunately, ...

htmlcss

Positioning Data Labels Outside of Pie or Doughnut Charts in Chart.js

I am currently working on a large-scale project and I am in need of a way to position the labels outside of pie charts or doughnut charts. I came across a plugin called outerLabels on GitHub which seems to be the perfect solution for what I need, but I am ...

cssangularchart.jspie-chart

Use jQuery to easily update the background of an iFrame

I have implemented this code to store the background image selected from a dropdown menu labeled rds. This function also sets a cookie so that the chosen background persists even after the page is reloaded. The issue lies in the line containing $('da ...

javascriptjqueryhtml

Bootstrap badge is encountering loading issues

My index.html isn't displaying the badge correctly on any browser. The numbers aren't showing up in a colored circle, it looks like the CSS didn't load properly. I've tried using both local and CDN paths for bootstrap and jquery, but t ...

jqueryhtmlcssbootstrap-4

Verify whether the value is in the negative range and implement CSS styling in React JS

I have been developing a ReactJS website where I utilize Axios to fetch prices from an API. After successfully implementing this feature, I am now looking for a way to visually indicate if the 24-hour change percentage is positive by showing it in green, a ...

htmlcssreactjs

Is it possible to have multiple forms on a master page?

Regarding the limitation of having only 1 runat="server" and <form> per master page, I am facing a dilemma with placing my login form on my website. Should I include it all on the master page or distribute some elements to the .aspx form? Currently, ...

htmlasp.netformsmaster-pages