Tips for aligning my divs at the center with bootstrap

Trying to align my divs using bootstrap

HTML code:

<div id="wrapper" class="container-fluid row">
        <div id="left" class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            //content
        </div>
        <div id="right" class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
            //content
        </div>
    </div>

Current display:

 ----------------------------
|                            |
||left  | |       right      |
||      | |                  |
||      | |                  |
|
|

Desired alignment:

 ----------------------------
|
|     |left|  |  right  |
|     |    |  |         | 
|
|

Looking to always center the Left and Right divs within the wrapper. How can this be achieved using only bootstrap classes?

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

achieving this look with an offset

 <div class="container-fluid">
  <div class="row">
    <div class="col-md-offset-4 col-md-4">this particular div</div>
    <div class="col-md-3">the second div</div>
</div>
</div>

Explore the example here

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

Tips for hiding navigation items on mobile screens

I've been learning how to create a hamburger menu for mobile devices. Within a navigation structure, I have three components: Logo, nav-items, and hamburger menu. Utilizing flexbox, I arranged them side by side and initially hid the hamburger menu on ...

javascripthtmlcssmobileresponsive

What is the best way to organize my defaultdict for optimal structure?

I have a defaultdict within my views.py file that looks like this: defaultdict(<class 'list'>, {'List of tubes': ['2324', '98', '7654', 'List of auto:': [147, 10048, 1009, 10050, 10, 1647, 1 ...

pythonhtmldjangolistbutton

Spinner in BlockUI fails to load

I am facing an issue on my webpage where I use 'blockUI' plugin from Malsup to display a modal message with a spinner when a user clicks a button. $('#btnSend').click(function () { $.blockUI({ message: '<h4><img src=" ...

jquerytwitter-bootstrapblockui

I need to remove the mobile view of my Angular application because it is not optimized for smaller screens

I have implemented Angular in my web application, but unfortunately it is not mobile responsive. In order to address this issue, I would like to disable the mobile view and instead display a message informing users that mobile view is not supported for t ...

cssresponsive-design

Tips on how to retrieve the value of the second td in an HTML table when clicking on the first td utilizing jQuery

There is a specific requirement I have where I must retrieve the value of the second td in an HTML table when clicking on the first column. To accomplish this task, I am utilizing jQuery. $('.tbody').on('click','tr td:nth-child(1) ...

javascriptjqueryhtmlcss

Which is Better for Creating DropDown Menus: CSS or JavaScript?

Starting a new project that involves dropdown menus with categories and subcategories within them. I'm curious about the advantages of using CSS3 only menus compared to traditional JavaScript ones. There are several jQuery menu options available as we ...

javascriptjquerycssjquery-ui

Is there a way to delete highlighted text without using execCommand and changing the font color

With my current use of JavaScript, I am able to highlight or bold a selected text range successfully. However, I am unsure how to undo the bold and unhighlight the text if the button is clicked again and the selected range is already bolded or highlighted. ...

javascripthtmlcss

Tips for adjusting the header color in materialize framework?

I've been working on a web template and I'm looking to customize the color displayed in the Android browser (maybe using JS?). The default color is blue. How can I go about changing it? https://i.sstatic.net/RxLbS.jpg Appreciate any help! ...

javascriptcssmaterial-designmaterialize

Creating a JSFiddle with sprites using source and image files from Github with THREE.JS - a step-by-step guide

Greetings! I am currently working on creating a JSFiddle based on the official THREE.js HUD Sprites example. However, I am facing an issue where the sprite images do not seem to load or apply using the URLs specified in the original file:- //... URL' ...

javascripthtmlimagethree.js

Certain browsers do not support CSS animation functionality

I'm currently facing an issue where only Firefox is able to animate the JSFiddle provided below. Although I've included all necessary options for different browsers, it seems like something is not configured correctly :(( FIREFOX 27: WORK ...

htmlcssanimation

Is there a way to align the image next to the form and ensure they are both the same size?

I've been struggling to resize the image to match the form size, but I can't seem to get it right. Can anyone provide me with some guidance on this issue? I have obtained this contact form from a website that I plan to modify slightly, but I need ...

javascripthtmlcss

Tips for aligning an element at the center based on the viewport rather than the parent element

I'm trying to center an element within a header with five elements, consisting of a button on the left, a logo in the middle, and three buttons on the right. I want the logo to be centered based on the viewport. I've created a codepen to demonstr ...

csspositioningdisplay

Using TypeScript and Angular to modify CSS properties

I'm trying to figure out how to change the z-index CSS attribute of the <footer> element when the <select> is open in TypeScript (Angular 10). The current z-index value for the footer is set to 9998;, but I want it to be 0;. This adjustmen ...

htmlcssangulartypescriptfunction

Is there a way to apply -webkit-line-clamp to this JavaScript content using CSS?

i have a random-posts script for my blogger website <div class="noop-random-posts"><script type="text/javascript"> var randarray = new Array(); var l=0; var flag; var numofpost=10; function nooprandomposts(json){ var total = ...

javascriptcssblogger

Maintain the fixed placement of an absolute element by adjusting the browser window size

Seeking assistance here - I currently have a box that occupies the entire window. This box is designed to be responsive with a noticeable red border. Within this box, my goal is to insert tables with specific X and Y coordinates. However, my issue arises ...

htmlcss

Browser stores cached data for images even after they have been removed and then re-added

Our team is currently working on a web application that relies solely on AJAX and Javascript for its interface. One challenge we have encountered involves dynamic images with cache expiration times set to access time plus 15 minutes. Typically, when these ...

javascripthtmlajaxgoogle-chrome

Is it possible for the HTML (source code of a web page) to alter once the page is saved onto a local computer?

Upon opening a webpage at http://www.designova.net/rise/index-01.html, I decided to inspect its source code. Afterwards, I saved the page to my computer and opened it in an editor (sublime text 2). To my surprise, I noticed that the HTML content in the two ...

html

Unlock the navigation tab content and smoothly glide through it in Bootstrap 4

Hey there, I have managed to create two functions that work as intended. While I have some understanding of programming, I lack a background in JavaScript or jQuery. The first function opens a specific tab in the navigation: <script> function homeTa ...

javascripthtmljquerybootstrap-4

Achieving the functionality of making only one list item in the navbar bolded upon being clicked using React and Typescript logic

Currently, in my navigation bar, I am attempting to make only the active or clicked list item appear bold when clicked. At the moment, I can successfully achieve this effect; however, when I click on other list items, they also become bolded, while the ori ...

javascriptcssreactjstypescriptevents

Add a touch of mystery to a triangle SVG with CSS shadows

Is there a way to apply shadows to SVG images, like a triangle? I've tried using polyfill solutions but they didn't give me the desired effect. Check out this JSFiddle where I showcase what I'm trying to achieve. This is my HTML: <div c ...

javascripthtmlcss