Arrangement of divs using Bootstrap version 3

Currently working on a project using Bootstrap 3 and aiming to create a layout similar to the one shown in the image provided:

Any suggestions on how to achieve this? Any code snippets would be greatly appreciated.

Thank you

Experimenting with something like the following:

       <div class="container-fluid">
                <div class="col-md-3 features">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi esse reiciendis illo expedita voluptatibus consequatur culpa tempore labore eveniet voluptates, rerum, odio vitae quae, impedit et? Ea et culpa veniam?
                </div>
                <div class="col-md-3 features">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi esse reiciendis illo expedita voluptatibus consequatur culpa tempore labore eveniet voluptates, rerum, odio vitae quae, impedit et? Ea et culpa veniam?
                </div>
                <div class="col-md-3 features">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi esse reiciendis illo expedita voluptatibus consequatur culpa tempore labore eveniet voluptates, rerum, odio vitae quae, impedit et? Ea et culpa veniam?
                </div>
                <div class="col-md-3 features">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi esse reiciendis illo expedita voluptatibus consequatur culpa tempore labore eveniet voluptates, rerum, odio vitae quae, impedit et? Ea et culpa veniam?
                </div>
            <div class="row">
                <div class="col-md-12 iphone-bottom">
                    <img src="img/iphone-bottom.png" class="img-responsive center-block" alt="Download Revolut">
                </div>
                <div class="col-md-12 center-block download-btn">
                    <a href="#download" class="btn btn-get-it">
                        Get it
                    </a>
                </div>
            </div>
htmlcsstwitter-bootstrap-3

Answer №1

For more information, please visit: http://jsbin.com/lesud/1/edit?html,css,output

    <div class="col-xs-2">
      <div class="row colblue">
        <div class="col-xs-12"><p>text</div>
      </div>
       <div class="row colblue">
        <div class="col-xs-12"><p>text</div>
      </div>
    </div>
    <div class="black col-xs-8">
      <img src="http://lorempixel.com/g/200/400/">
    </div>
    <div class="col-xs-2">
      <div class="row colblue">
        <div class="col-xs-12"><p>text</div>
      </div>
       <div class="row colblue">
        <div class="col-xs-12"><p>text</div>
      </div>
    </div>
</div>
</div>

Answer №2

Give this a try:

HTML Structure

<div class="row">

    <div class="col1 col-lg-2 col-md-2 col-sm-2 col-xs-2">
      <div class="col-lg-12 bl-box">
      </div>
      <div class="col-lg-12 bl-box">
      </div> 
    </div>
    <div class="col2 col-lg-8 col-md-8 col-sm-2 col-xs-2">
    </div>
    <div class="col3 col-lg-2 col-md-2 col-sm-2 col-xs-2">
      <div class="col-lg-12 bl-box">
      </div>
      <div class="col-lg-12 bl-box">
      </div> 
    </div>

</div>

CSS Styling

 .bl-box {
       margin:50px 0;
       background:blue;
       color:#fff;
    }

.col2 {
       padding:50px 0;
       background:#000;
       color:#fff;
    }

View the result on Fiddle : http://jsfiddle.net/vdyzZ/

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

Client Blocking Issue: ExpressJS encountering problem loading JavaScript file

I recently deployed my express app on a server (specifically, I used Heroku). Everything functions perfectly when I test the app locally. However, when I access the app online, I encounter an issue with a net::ERR_BLOCKED_BY_CLIENT error. This error states ...

javascripthtmlexpressheroku

What is the reason behind the inconsistency of calling a function on click not always functioning properly in Chrome and FF, while working seamlessly in IE?

Consider a scenario where the code below is being used: <HTML> <HEAD> <SCRIPT> function myFunction(atlasTrackingURL) { var atlasURL = atlasTrackingURL; if (!atlasURL) return; //Creating a cache busting mechanism ...

javascripthtml

Transforming a datetime-local Element into a Date Object

I am currently utilizing the HTML5 element datetime-local with the requirement of having two different formats for the date. One format will be stored as a date object in the database, while the other format will be used as a string to set the datetime-loc ...

javascripthtmlformsdatedatetime

What is the best way to incorporate inline css in Angular for various views that share identical content but require distinctive styles?

Below is my HTML code: <p ng-if= "editMode=='edit'" style="margin-left: 1px;margin-top: -2px;">===some messages---</p> <p ng-if= "editMode=='addNew'" style="margin-left: 1px;margin-top: -2px;">===some messages- ...

htmlcssangularjsangularjs-scopeangularjs-ng-repeat

Can the text color in Grid View columns be customized according to the search item entered?

Please note: The need for changes in various columns will depend on the search request. ...

c#asp.net.nethtml

Maintain the vertical alignment of an item at a fixed point, even as the height of the

I'm currently working on a multi-step form project with three tabs, each containing a different section of the form and varying heights. The challenge I'm facing is to center the tallest tab vertically on the page, while aligning the other two ta ...

htmlcssformscss-gridresponsive

Using AJAX to dynamically edit and update PHP data

The information displayed on my index.php page is fetched from a database using the mysqli_fetch_array function. The data is presented in a table format with fields like Name, Age, Email, and Update. An edit button allows users to modify the data. Here is ...

javascriptphpjqueryhtmlajax

Please select the links located beneath the see-through triangular or polygonal shapes

Review the code snippet provided at the following link: http://jsfiddle.net/q8Ycz <div style="background-color: red; width: 200px;" onclick="alert('behind')"> <div><a href="test">test test test test test test test test test ...

htmlcsssvg

Struggling to align elements in the horizontal center using CSS Grid

https://i.stack.imgur.com/y6F74.png I am currently working with a CSS Grid layout and facing an issue where I want to center the child elements horizontally. In the image provided, my goal is to have "Queen" displayed in the center rather than on the left ...

htmlcsssass

What could be causing only certain portions of my CSS to be applied?

I've been struggling to get rid of the gray border around the SIGN UP button in the tbody section. I've tried applying classes (along with the ID) and using pseudo classes like :4th-child {border:none}, but nothing seems to work. The only solutio ...

htmlcss

Utilizing :checked selector and toggle() function in jQuery

I'm facing an issue with my jQuery code where the CSS changes are not working as expected. When I test the code, it doesn't apply the CSS changes. If I remove the :checked and just use $("input"), then the CSS works but only when clicking on an i ...

jquerycsscheckbox

A crisscrossing dashed design running along the edges of the text block

<div class="search"> <p>SEARCH</p> </div> https://i.sstatic.net/yxOga.png I am attempting to incorporate a dashed lateral padding similar to the one shown in the image, but only on the sides of the text. Is there a method I can ...

htmlcss

React-app size has grown larger post-deployment

I recently created my second app clone using React. I have noticed that after deployment, the size of the app increases. Everything looks normal on localhost:3000, but it significantly grows once deployed. Any assistance in resolving this issue would be gr ...

cssnode.jsreactjsfirebasenpm

Invoking a nested function within an array

I need to trigger a function with a button click. The function I want to call is nested within another function, which is part of an array. demo = { volej: function(param) { (new initChartist).users(param); }, initPickColor: function(){ ...

javascripthtml

Mathematics: When the numbers just don't add up

Can you help me figure out this calculation? €70.00 Total VAT €12.6 Total €82.59 I'm puzzled as to why the total jumps from 12.6 to 82.59. Is there a known issue causing this discrepancy? ...

htmlasp.net

Aligning elements in the center vertically using absolute positioning for multiple elements

I have been experimenting with a method to vertically center an element in a div that has unknown height. You can check out the approach I used here: In my case, I am working with anchor tags and this solution was particularly helpful due to the position ...

htmlcsscss-positionvertical-alignment

Increased spacing HTML

Trying to create a footer in HTML, but each time I attempt it ends up with an extra margin on the left side. Here is my current footer code: <div id="footer"> Tester </div> #footer { background-image: url(images/backgroundrpatternf ...

htmlcssmargin

Resize the div blocks by scaling the button placed beneath them

I decided to modify the g-recaptcha widget to fit my specific requirements, and it is working flawlessly. However, I noticed that the ng-click button directly beneath it is no longer responsive. The reason behind this issue eludes me. Here is a snippet of ...

angularjscsscss-transforms

Is it possible to position images in a circular layout around a central

I am struggling to position small planetary images around the main logo in a way that creates a satellite-like effect. Despite my efforts with positioning and margins, I have not been successful in achieving the desired look. Additionally, when I insert th ...

htmlcssparticles.js

What is the best way to include a class with Knockout JS?

After going through the basic Knockout tutorial and examining various examples, I decided to try it out myself on jsFiddle. However, I encountered some issues as my attempts did not quite work. The goal is simple - I just want to add the class open to a d ...

javascripthtmlknockout.js