Responsive columns with maximum width in Bootstrap

Currently, I'm working on coding a portion of a single-page responsive Bootstrap layout that features two columns of text placed side by side. The request from the designer is for these columns to have a maximum width, but to be centered until they hit that limit, at which point they will no longer be centered (unlike the other elements that remain responsive).

Is there a known solution to maintain the center alignment of the two text columns, even after reaching their maximum width?

Update: You can view what the code looks like by following this link: http://www.bootply.com/119539

csstwitter-bootstraptext-align

Answer №1

Give this a shot Bootply. Does this meet your needs?

<div class="row">
    <div class="col-lg-12">
            <h2 class="center-block">Our Process</h2>

    </div>
    <div class="col-lg-4 col-lg-offset-2">
        <p class="text-justify center-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis nulla nec lacus condimentum molestie.</p>
    </div>
    <div class="col-lg-4">
        <p class="text-justify center-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
    </div>
</div>

h2.center-block{
    text-align:center;
}

p.text-justify{
 max-width:400px;
}

PLEASE NOTE: You can utilize col-lg-offset-2 to move the div by 2 columns.

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

"Interactive feature allowing users to edit and view the most recently inserted HTML

My approach involves using a contenteditable div as an input field for entering text and inserting icons through a button that adds small HTML pictures within the text. Everything works fine when the text is narrower than the contenteditable field. Howev ...

jqueryhtmlcsscontenteditable

Guide on how to prevent Paste (Ctrl+V) and Copy (Ctrl+C) functionalities in a TextField within MaterialUI

Is there a way to restrict the Paste (Ctrl+V) and Copy (Ctrl+C) functions in a specific TextField within MaterialUI? I am currently working with ReactJs ...

javascripthtmlcssreactjsmaterial-ui

implementing a smooth transition effect for image changes upon hover

I've been working on a React project where I created a card that changes its image when hovered over. I wanted to add a smoother transition effect to the image change using transition: opacity 0.25s ease-in-out;, but it doesn't seem to be working ...

javascriptcssreactjscss-transitions

Space left vacant following an unordered list item

Is there a way to remove unwanted space after an unordered list in IE and Firefox, specifically in the last HTML <li> item? I've tried adjusting the ul width but it didn't work. Any ideas on how to get rid of the space? Thanks. #menubar ...

htmlcss

Adjust the alignment of cells within a table

Excuse my lack of knowledge, but CSS is still new to me. I'm attempting to align two elements next to each other using display: table. However, the element on the right seems to be lower than the one on the left, and I can't figure out why. . ...

cssalignment

Achieving Consistent Aspect Ratios with Images in Flexbox Grid

I'm attempting to utilize flexbox for arranging elements in the layout shown below: -- ------ -- | | | | |--| |--| | | | | -- ------ -- Each corner 'box' contains an image with a square aspect ratio of 1:1. The center ...

htmlcssflexbox

Are the buttons appearing within a pop-up display?

I am having an issue with my Javascript popup buttons. Whenever the popup appears, the buttons that come after the one clicked appear on top of the popup container, and the previous buttons appear behind it. How can I ensure that the popup container displa ...

javascripthtmlcssbuttonpopup

Leverage AngularJS to dynamically load CSS stylesheets using ng-repeat

I have organized my stylesheets into separate modules for each include, and I am trying to dynamically load them. However, I am facing some difficulties as when they are rendered, all I see is the following markup for each sheet that should be loaded: < ...

htmlcssangularjsheaderangularjs-ng-repeat

Tips for clearing out text in a <p> tag with javascript when it exceeds a specific length of 100 characters

Is there a way to automatically truncate text to (...) when it exceeds 100 characters inside a paragraph with the class .class? For instance, if I have a long paragraph like this: <div class='classname'> <p>Lorem ipsum dolor sit ame ...

javascripthtmlcsstypescript

Customize the color of Bootstrap active tabs to have a unique and distinct hue for each tab

I have successfully managed to change the color of both active and non-active tabs as a group, but I am wondering if it is possible for the color to remain the same when moving to the next tab. Here is what I've tried: http://jsfiddle.net/pThn6/2031/ ...

jqueryhtmlcsstwitter-bootstraptabs

Enhancing Responsive Tables with Vertical Alignment in Bootstrap 4

When utilizing Bootstrap 4 and adding table-responsive to a table, the text may no longer be centered vertically. Is this a bug? If not, is there an easy solution available to center the text in the middle? A pure Bootstrap solution would be greatly apprec ...

htmlcssbootstrap-4

Tips for Creating an Animated Progress Bar in a Slider

After implementing jQuery, I managed to create a unique slider on my website. This slider included a thumbnail with captions for each photo. Positioned below the thumbnail was a progress bar fixed in the center between the caption and the image. Users can ...

javascriptjqueryhtmlcss

DOMPDF struggles with rendering a font and instead displays circular shapes

After following the instructions in this guide: github.com/dompdf/dompdf/wiki/UnicodeHowTo I ran the load_font.php script, verified that the font files were successfully copied to /dompdf/lib/fonts, and ensured that the font information was added to the f ...

phpcsspdffontsdompdf

Jade and NodeJS combination: failing to display as intended

For my website, I am using Bootstrap to add style. In the index.jade file, I have included the following code snippet: form.form-inline.pull-right(action='http://localhost:1337/authenticated', method='POST') input.input-small(type=&a ...

node.jstwitter-bootstrappugexpress

What is the best way to modify the underline style of a tab in Material UI?

I'm trying to customize the underline of: https://i.stack.imgur.com/J2R1z.png Currently, I am using material ui version 4.12.3 The code snippet for generating my tabs is below: function renderTabs(): JSX.Element { return ( <Tabs className={cla ...

cssreactjstypescriptmaterial-ui

How to dynamically display a div in Vue.js depending on the attributes of another element

I have a dilemma with my text container. My goal is to collapse the div if the text length exceeds a certain limit, and then display a button that says "...show more". When this button is clicked, the div should expand. Clicking it again should collapse th ...

javascripthtmlcssvue.js

Is there a way to arrange an HTML list in this specific manner using CSS or JavaScript?

I need to arrange a list of items in columns with 5 rows each, as shown in the attached image. This list is generated dynamically using an SQL query with a loop on the li tag. I am looking for a solution to order the list in this way using javascript or ...

javascriptcsshtml-lists

How can I prevent media controls from appearing in fullscreen mode on Microsoft Edge using CSS?

My video code allows for switching the video into fullscreen mode using custom controls. Here's how it looks: fullScreenButton.addEventListener("click", function() { if (video.requestFullscreen) { video.videoContainer.r ...

javascriptcss

Set the text alignment to the left/start inside a div contained within a Material UI Box

Trying to figure out how to make the error handling ui of this field look like another field's error handling ui. Note that in the second example, the error text is aligned to the left. How can I achieve this alignment without considering text color ...

htmlcssreactjsmaterial-uiinline-styles

Determine the Placement of Bootstrap Popover by Utilizing SVG and Mouse Coordinates

Is there a way to dynamically reposition the popover that currently appears to the right of the Circle SVG? I would like to either base its position on the user's mouse click within the CircleSVG or move it to the exact center of the SVG, including bo ...

javascriptcssbootstrap-4