What is the best way to align bootstrap col-md-4 and col-md-5 in the center of a webpage?

I am facing an issue with my two bootstrap items, one col-md-5 and the other col-md-4. Despite trying to center them in the middle of the page, they are currently positioned with col-md-4 on the left side and col-md-5 in the middle. Does anyone have a solution to center these two items without relying solely on margins?

<div class="col-md-4">
    <div class="klantcases">
    <h2>Company</h2>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Core Values</a></li>
    <li><a href="#">Mission and Vision</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Blog</a></li>
        <li><a href="#">Development Blog</a></li>
        <li><a href="#">Marketing Blog</a></li>
    <li><a href="#">Development</a></li>
    <li><a href="#">Marketing</a></li>
    <li><a href="#">Join Us></li>
</div>

<div class="col-md-5">
<div class="blogpreview">
    <img src="img/kan.png" alt="kan" /><h1>The Latest from Our</br>
        DEVELOPMENT BLOG</h1>

    <img src="img/bloglaptop.jpg" alt="bloglaptopcode" />

    <div class="bloginfo"><h2>Wednesday April 15, 2015 - 12:05</h2></br></br>
        <h1>CSS Styleable Vector Based Icons on Every Device (Even IE8)</h1>
        <p>Icons play a crucial role in user interface design, allowing users to quickly understand actions at a glance. In this blog post, we explore a comprehensive solution for rendering CSS-styleable icons that are compatible with older browsers while also appearing sharp on modern retina displays.</p>

        <a href="#"><h3 class="readmore">READ MORE</h3></a>

        </div>


    <div class="more">
        <h2>Monday April 13, 2015 - 13:19</h2>
        <h1>Inline Video on the iPhone</h2>
            <p>Video technology has evolved significantly over time, transitioning from analog formats like nitrate film to digital video. This blog discusses the integration of inline videos on mobile devices like the iPhone, highlighting the shift towards portable video consumption.</p>
            <a href="#"><h3 class="readmore">READ MORE</h3></a>
    </div>

        <div class="more">
        <h2>Monday March 30, 2015 - 18:30</h2>
        <h1>Video in Email: Today or Tomorrow?</h2>
            <p>Utilizing video content in email communications can enhance consumer engagement significantly. This blog post shares insights from technical research and development, emphasizing the importance of integrating videos into email marketing strategies.</p>
            <a href="#"><h3 class="readmore">READ MORE</h3></a>
    </div>>



<img src="img/pfoon.png" alt="pfoon" /> <h1>The Latest from Our</br>
        MARKETING BLOG</h1>

    <img src="img/iphone.jpg" alt="iphonehand" />

    <div class="bloginfo2"><h2>Wednesday April 15, 2015 - 12:05</h2></br></br>
        <h1>CSS Styleable Vector Based Icons on Every Device (Even IE8)</h1>
        <p>Icons play a crucial role in user interface design, allowing users to quickly understand actions at a glance. In this blog post, we explore a comprehensive solution for rendering CSS-styleable icons that are compatible with older browsers while also appearing sharp on modern retina displays.</p>

        <a href="#"><h3 class="readmore">READ MORE</h3></a>

        </div>

        <div class="more">
        <h2>Monday April 13, 2015 - 13:19</h2>
        <h1>Inline Video on the iPhone</h2>
            <p>Video technology has evolved significantly over time, transitioning from analog formats like nitrate film to digital video. This blog discusses the integration of inline videos on mobile devices like the iPhone, highlighting the shift towards portable video consumption.</p>
            <a href="#"><h3 class="readmore">READ MORE</h3></a>
    </div>

        <div class="more">
        <h2>Monday March 30, 2015 - 18:30</h2>
        <h1>Video in Email: Today or Tomorrow?</h2>
            <p>Utilizing video content in email communications can enhance consumer engagement significantly. This blog post shares insights from technical research and development, emphasizing the importance of integrating videos into email marketing strategies.</p>
            <a href="#"><h3 class="readmore">READ MORE</h3></a>
    </div>





</div>

Answer №1

If you want to shift columns in bootstrap, it's totally possible. Check out the official documentation. Simply apply a class like col-md-offset-4 to move your columns sideways on the webpage.

In your particular scenario, you'll have to tweak the column sizes to add up evenly - for example, use col-md-4 and col-md-6, then employ col-md-offset-1 to push the first column over by 1 column width.

Answer №2

To center a 9-column grid within the default 12-column Bootstrap grid, you will need to create a custom offset of 1.5 columns (equivalent to a left margin of 12.5%). This offset can be applied to the container with the class .col-md-4:

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-custom">...</div>
        <div class="col-md-5">...</div>
    </div>
    <!-- / .row -->
</div>
<!-- / .container -->

@media(min-width: 992px && max-width: 1199px) {
    .col-md-offset-custom {
        margin-left: 12.5%;
    }
}

Check out the JSFiddle for an example: http://jsfiddle.net/Lq06L4hb/2/

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

Navigate to the editing page with Thymeleaf in the spring framework, where the model attribute is passed

My goal is to redirect the request to the edit page if the server response status is failed. The updated code below provides more clarity with changed variable names and IDs for security reasons. Controller: @Controller @RequestMapping("abc") public clas ...

The current version of HTML5 Context Menus is now available

I'm in need of implementing the HTML5 Context Menu feature. Currently, only Firefox supports it. My main objective is to add some menu options without replacing the existing context menu. How can I achieve the same functionality now? I am aware of va ...

Is there a way to identify all rows that have been styled using CSS in JS?

I am looking to identify the rows that have been selected through CSS using Javascript. I have attempted some approaches with code snippets gathered from various sources. Here is an example below: ... var tableRows = document.getElementsByTagName('tr ...

"Using Mxgraph's getPrettyXml function does not retrieve the value of a custom

I’m having trouble with mxgraph’s getPrettyXml() not capturing the value of Custom elements. In my customized template, it looks like this: <add as="symbol"> <Symbol label="Symbol" description="" href="" data="{[hi :bill]}"> &l ...

Troubleshooting custom fonts not displaying on a .NET website: Importing fonts for web use

https://i.stack.imgur.com/uWSsY.pngI am well-versed in HTML, but my knowledge of VB.NET is limited. In standard CSS, including a font like the one below would typically work, but I have encountered issues when attempting to do so in .NET. @font-face { f ...

Attempting to display an HTML image utilizing data storage

I'm currently working on building a database for animals at an animal shelter. I have created tables containing species information and when a user selects a specific species, all available animals are displayed. Now, I want users to be able to click ...

modifying the appearance of the parent container of an input element

I'm trying to change the style of a parent element when its child input is checked. <div> <!--- this is the parent element ---> <input type="radio" data-dynamic-update="1" name="virtuemart_paymentmethod_id" id="payment_id_3" value= ...

Issue with loading CSS file in Express.js HTML

As a newcomer to express.js, I created a project using express.js where the CSS file is located in the public folder and the HTML files are in the views folder. However, when I started the web server, the HTML file rendered successfully but it failed to lo ...

Create a Dynamic Moving Background Image with Endless Scrolling

Is it possible to make a background image animate infinitely and only move upwards without any jerkiness? I am struggling with setting it up this way. Can anyone provide guidance on achieving this? If you need more context, here is the link to the webpage ...

Offspring component fails to reverse the skew as intended

Is it possible to skew a navigation bar without affecting the text inside it? I tried skewing the main div of the navigation bar and using a negative skew value on the text, but it didn't work as expected. How can I achieve this effect successfully? ...

Toggle the selection of a div by clicking a button in AngularJS with a toggle function

I have several div elements on a webpage. Each div contains a button! When the button is clicked for the first time: The border color of the div will change to blue (indicating the div is now selected). The "ok" button will be hidden (leaving only t ...

Exploring the utilization of CSS host selectors with Angular4 to target direct child elements

Within my app.component.css file, I currently have the following code snippet: * ~ * { margin-top: 24px; } This rule actually adds some top margin to all elements that come after the first one. However, this is not exactly what I intend to achieve. My ...

Seeking assistance with troubleshooting JavaScript code for counting vowels

I am currently trying to debug a piece of code for my class. I have made several adjustments, but for some reason it is still not functioning correctly. The goal is to count the number of vowels in a given phrase and display them in the div element. Howeve ...

How can you center a div at the top of another div?

I am working with a nested div structure and trying to center the inner content of one div within another. Is it possible to achieve this using CSS? <div id="outer"> bla, bla....... <div id="inner"> <p>Test</p> </div> ...

Creating a layout where three divs are lined up next to each other, each with a height that spans

I am currently designing a website layout and I am working on setting up the CSS rules for the layout as shown in the image below: My goal is to have the left and right divs extend to the height of the content div. However, I am not very familiar with the ...

Icon that can be clicked in a div container

Is there a way to prevent the div click event from being triggered when clicking on ion-icon? <div(click)="goNext()"> <ion-icon name="close-circle-outline" size="large" (click)="dissmiss()"></io ...

Using Typescript in React to render font colors with specific styling

Attempting to utilize a variable to set the font color within a react component, encountering an error with my <span>: Type '{ style: "color:yellow"; }' is not assignable to type 'HTMLProps<HTMLSpanElement>' The use of yel ...

Encountering an issue when passing an object during the creation of dynamic HTML

I am dynamically generating HTML for a bootstrap Modal and attaching it to the body element as shown below. Modal HTML function GenerateConfirmationModalHTML(HeaderMessage, Message,YesEvent, Noevent) { var html = '<div id="clearModal"> ...

Transitioning smoothly from mobile to tablet views with the sidebar activated in Semantic-UI

My HTML includes a pointing menu when the screen width exceeds 630px. Below 630px, it switches to a sidebar with a menu button: <nav class="ui inverted sidebar menu vertical slide out" id="m_menu"> <a href="index.php" ...

Struggling to keep up with responsive behavior on a page featuring vertically and horizontally centered content that spans the full height

I'm working on a full-height website and the first section needs to have both vertical and horizontal centered content. The issue I'm facing is that there's an image included, which doesn't scale responsively when the screen size change ...