I have this html5 issue. currently the courses are displaying in 2 different rows. i need for it to be in one like no matter how many i add it keeps going to the left and but yes only 2 at a time.
something like this
1-------2
3-------4
5-------6
the current situation is like
1-------4
2-------5
3-------6
hope you could understand my point? here is the code
<!-- courses Start -->
<section class="section-space-padding">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="section-title">
<h1>Lorem ipsum</h1>
<div class="divider dark"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="courses">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="courses">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- courses End -->
Slightly modified structure to fix order of items and added some CSS rules to get rid of space between columns:
.row {
padding-left: 15px !important;
padding-right: 15px !important;
}
.row .col-md-6,
.row .col-sm-6,
.row .col-xs-6,
.row .col-sm-12 {
padding-left: 0px !important;
padding-right: 0px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- courses Start -->
<section class="section-space-padding">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="section-title">
<h1>Lorem ipsum</h1>
<div class="divider dark"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
<div class="row">
<div class="courses">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum 1</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum 2</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum 3</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum 4</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum 5</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum 6</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- courses End -->
<div class="container">
<div class="row">
<div class="col-md-6">1</div>
<div class="col-md-6">2</div>
<div class="col-md-6">3</div>
<div class="col-md-6">4</div>
<div class="col-md-6">5</div>
<div class="col-md-6">6</div>
</div>
</div>
http://www.bootply.com/NVUPZtxxOy
Related
I've an HTML like below
<div id="PanelLevel" class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-3">
Very Important
<div id="maindiv1" class="ui-widget-vi">
<div class='column'>
<div class='portlet' >
<div class='portlet-header'>Energy_Efficiency</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet' >
<div class='portlet-header'>Maintenance_Ease</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet' >
<div class='portlet-header'>Cold_Weather_Operation</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Important
<div id="maindiv2" class="ui-widget-i">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>First_Cost</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Operating_Cost</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Footprint</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Height</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Sound</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Corrosion_Resistance</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Somewhat Important
<div id="maindiv3" class="ui-widget-si">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Weight</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Installation_Ease</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Redundancy</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Not Important
<div id="maindiv4" class="ui-widget-ni">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Indor_Ducted_Installation</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Water_Usage</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
My desired output is that I need to extract all 'Portlet-header' class contents only from 4 divs like "maindiv1", "maindiv2", "maindiv3", "maindiv4" as below
"maindiv1" - Energy_Efficiency,Maintenance_Ease, Cold_Weather_Operation
"maindiv2" - First_Cost, Operating_cost, Footprint, Height, Corrosion_Resistance
"maindiv3" - Weight, Installation-Ease, Redundancy
"maindiv4" - Indor_Ducted_Installation, Water_Usage
I've tried the below code but not getting the desired result:
$(document).ready(function() {
$('div').each(function () {
var i = $(this).attr('id');
alert(i);
});
var text = $( '.portlet-header' ).map(function() {
return $( this ).text();
})
.get()
.join( ',' );
});
You can use map() to build an array of the output you require:
let output = $('.col-md-3 > div').map((i, c) => ({
[c.id]: $(c).find('.portlet-header').map((i, p) => $(p).text()).get()
})).get();
console.log(output);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="PanelLevel" class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-3">
Very Important
<div id="maindiv1" class="ui-widget-vi">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Energy_Efficiency</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Maintenance_Ease</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Cold_Weather_Operation</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Important
<div id="maindiv2" class="ui-widget-i">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>First_Cost</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Operating_Cost</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Footprint</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Height</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Sound</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Corrosion_Resistance</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Somewhat Important
<div id="maindiv3" class="ui-widget-si">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Weight</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Installation_Ease</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Redundancy</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Not Important
<div id="maindiv4" class="ui-widget-ni">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Indor_Ducted_Installation</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Water_Usage</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Note that the .col-md-3 > div isn't a very robust selector, but it will work in the example HTML. I'd suggest adding another specific common class to all those #maindivN elements to make the selection of them more accurate and reliable.
The following may be easier to convert to json format.
$(document).ready(function() {
var result = {};
$('[id^=maindiv]').each(function () {
var key = $(this).attr('id');
result[key] = $(this).find('.portlet-header').map(function() {
return $( this ).text();
})
.get()
.join( ',' );
});
console.log(result);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="PanelLevel" class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-3">
Very Important
<div id="maindiv1" class="ui-widget-vi">
<div class='column'>
<div class='portlet' >
<div class='portlet-header'>Energy_Efficiency</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet' >
<div class='portlet-header'>Maintenance_Ease</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet' >
<div class='portlet-header'>Cold_Weather_Operation</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Important
<div id="maindiv2" class="ui-widget-i">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>First_Cost</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Operating_Cost</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Footprint</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Height</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Sound</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Corrosion_Resistance</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Somewhat Important
<div id="maindiv3" class="ui-widget-si">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Weight</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Installation_Ease</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Redundancy</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Not Important
<div id="maindiv4" class="ui-widget-ni">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Indor_Ducted_Installation</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Water_Usage</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have three columns inside a section tag in HTML but they sit on top of each other instead of standing next to eachother.
<section class="sec-top">
<div style="background-color:#f4f5f9">
<div class="column">
<h2 style="padding-left: 100px; padding-top:40px; color:#3d7cc9;">Lorem ipsum dolor sit amet.</h2>
<p style="padding-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac pharetra turpis. Sed vitae orci.
</p>
<ul class="checkmark">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis eu lorem ut risus sollicitudin bibendum.</li>
<li>uspendisse malesuada augue sit amet ipsum laoreet, eget consequat purus consequat.</li>
</ul>
</div>
<div class="column">
<img class="gify" src="../../assets/apps.gif" />
</div>
<div class="column">
<div class="backgroundBlue">
<h2 class="ptop">Lorem Ipsum</h2>
<h3>Lorem ipsum dolor sit amet.s</h3>
<iframe width="90%" frameborder="0"></iframe>
</div>
</div>
</div>
</section>
I am not sure what I am doing wrong or why this is happening. Any help is appreciated. Thanks!
A div is a block-level element. That means that even if you reduce it's width it will still cause a new line to be created:
A block-level element always starts on a new line and takes up the
full width available (stretches out to the left and right as far as it
can). https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
See also: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow
You need to either change the display value of .column (or its parent) or remove it from the normal flow with a float.
See examples below.
In the first example, I added float:left to the column class. This removes each column from the normal flow and they are stacked to the left of the screen.
In the second example, I changed the container div to the flexbox model and added flex: 1 1 33% to each column. This will cause each column to always take up 33% of the width of the parent. Here is a great resource on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.column {
width: 33%;
float: left;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.gify {
max-width: 100%;
}
.flex-parent {
display: flex;
flex-direction:row;
}
.flex-parent>.column {
flex: 1 1 33%;
float: none;
}
<section class="sec-top">
<strong>Using Float</strong>
<div style="background-color:#f4f5f9;" class="clearfix">
<div class="column">
<h2 style="padding-left: 100px; padding-top:40px; color:#3d7cc9;">Lorem ipsum dolor sit amet.</h2>
<p style="padding-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac pharetra turpis. Sed vitae orci.
</p>
<ul class="checkmark">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis eu lorem ut risus sollicitudin bibendum.</li>
<li>uspendisse malesuada augue sit amet ipsum laoreet, eget consequat purus consequat.</li>
</ul>
</div>
<div class="column">
<img class="gify" src="https://via.placeholder.com/450" />
</div>
<div class="column">
<div class="backgroundBlue">
<h2 class="ptop">Lorem Ipsum</h2>
<h3>Lorem ipsum dolor sit amet.s</h3>
<iframe width="90%" frameborder="0"></iframe>
</div>
</div>
</div>
</section>
<section class="sec-top" style="margin-top:30px">
<strong>Using FlexBox</strong>
<div style="background-color:#f4f5f9;" class="flex-parent">
<div class="column">
<h2 style="padding-left: 100px; padding-top:40px; color:#3d7cc9;">Lorem ipsum dolor sit amet.</h2>
<p style="padding-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac pharetra turpis. Sed vitae orci.
</p>
<ul class="checkmark">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis eu lorem ut risus sollicitudin bibendum.</li>
<li>uspendisse malesuada augue sit amet ipsum laoreet, eget consequat purus consequat.</li>
</ul>
</div>
<div class="column">
<img class="gify" src="https://via.placeholder.com/450" />
</div>
<div class="column">
<div class="backgroundBlue">
<h2 class="ptop">Lorem Ipsum</h2>
<h3>Lorem ipsum dolor sit amet.s</h3>
<iframe width="90%" frameborder="0"></iframe>
</div>
</div>
</div>
</section>
Is it possible to arrange images in different divs using something similar to display: flex and order?
I want to make a grid 2 rows x 3 columns with an exact order of the images.
Actually, I tried Order with each image but with no results and I don’t know any other method!
Also, I’d want to use only HTML/CSS.
<div class="section-c__container__column2">
<div class="section-c__container__sub-column1">
<div class="block-slack">
<img src="img/logo-slack.png" alt="slack" class="slack">
<div class="sub-block-slack">
<h3 class="section-c__container__sub-heading">Slack</h3>
<p class="section-c__container__sub-par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id varius eros, vel pharetra est.</p>
</div>
</div>
<div class="block-gsuite">
<img src="img/logo-gsuite.png" alt="gsuite" class="gsuite">
<div class="sub-block-gsuite">
<h3 class="section-c__container__sub-heading">GSuite</h3>
<p class="section-c__container__sub-par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id varius eros, vel pharetra est.</p>
</div>
</div>
</div>
<div class="section-c__container__sub-column2">
<div class="block-trello">
<img src="img/logo-trello.png" alt="trello" class="trello">
<div class="sub-block-trello">
<h3 class="section-c__container__sub-heading">Trello</h3>
<p class="section-c__container__sub-par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id varius eros, vel pharetra est.</p>
</div>
</div>
<div class="block-asana">
<img src="img/logo-asana.png" alt="asana" class="asana">
<div class="sub-block-asana">
<h3 class="section-c__container__sub-heading">Asana</h3>
<p class="section-c__container__sub-par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id varius eros, vel pharetra est.</p>
</div>
</div>
</div>
<div class="section-c__container__sub-column3">
<div class="block-salesforce">
<img src="img/logo-salesforce.png" alt="salesforce" class="salesforce">
<div class="sub-block-salesforce">
<h3 class="section-c__container__sub-heading">Salesforce</h3>
<p class="section-c__container__sub-par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id varius eros, vel pharetra est.</p>
</div>
</div>
<div class="block-typeform">
<img src="img/logo-typeform.png" alt="typeform" class="typeform">
<div class="sub-block-typeform">
<h3 class="section-c__container__sub-heading">Typeform</h3>
<p class="section-c__container__sub-par section-c__container__final-
sub">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id varius eros, vel pharetra est.</p>
</div>
</div>
</div>
</div>
</div>
Hey there I'm stuck and I'm looking for someone who's experienced with bootstrap.
This is my current situation:
And that's the corresponding code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<hr class="hrBig yellow" />
<h3 class="yellow">1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<hr class="hrBig lightgreen" />
<h3 class="lightgreen">3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<hr class="hrBig blue" />
<h3 class="blue">5</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<hr class="hrBig orange" />
<h3 class="orange">2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<hr class="hrBig green" />
<h3 class="green">4</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<hr class="hrBig brown" />
<h3 class="brown">6</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
</div>
</div>
My problem is that in tablet mode the tabs should be like this:
12
34
56
But right now they are like that:
And on Mobile they should look like this:
1
2
3
4
5
6
How can I achieve this?
I needed to re-arrange your code a bit and added some wrappers to achieve what you want
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6 col-12">
<hr class="hrBig yellow" />
<h3 class="yellow">1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-md-12 col-sm-6 col-12">
<hr class="hrBig orange" />
<h3 class="orange">2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6 col-12">
<hr class="hrBig yellow" />
<h3 class="yellow">3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-md-12 col-sm-6 col-12">
<hr class="hrBig orange" />
<h3 class="orange">4</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6 col-12">
<hr class="hrBig yellow" />
<h3 class="yellow">5</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-md-12 col-sm-6 col-12">
<hr class="hrBig orange" />
<h3 class="orange">6</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
</div>
</div>
</div>
You can use like this for Bootstrap 3.3.7
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-4 col-xs-12">
<div class="col-sm-12 col-xs-6">
<hr class="hrBig yellow" />
<h3 class="yellow">1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-sm-12 col-xs-6">
<hr class="hrBig orange" />
<h3 class="orange">2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="col-sm-12 col-xs-6">
<hr class="hrBig lightgreen" />
<h3 class="lightgreen">3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-sm-12 col-xs-6">
<hr class="hrBig green" />
<h3 class="green">4</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="col-sm-12 col-xs-6">
<hr class="hrBig blue" />
<h3 class="blue">5</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-sm-12 col-xs-6">
<hr class="hrBig brown" />
<h3 class="brown">6</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
</div>
</div>
</div>
I have a page with navigation menu on left and body on right. Actually body is consist of sections on all long.
I would like to display only this section which I click on the left navigation menu. I try to make something like that:
https://www.virtualbox.org/wiki/VirtualBox
Actually I have:
<div class="intro-body">
<div style="padding-top: 120px;" class="container">
<p class="intro-text">title</p>
<div id="content" class="row">
<div class="col-md-2">
<ul style="list-style-type: none;">
<li> FirstOne </li>
<li> Second </li>
<li> Second2 </li>
</ul>
</div>
<div class="col-md-10">
<section id="FirstOne">
<h2>title title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam est lorem, condimentum sed faucibus ac, aliquam vitae enim.
</p>
</section>
<section id="Second" style="padding-top: 60px;">
<h2>title title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam est lorem, condimentum sed faucibus ac, aliquam vitae enim. Curabitur sit amet velit nibh.
</p>
</section>
<section id="Second2" style="padding-top: 60px;">
<h2>title title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam est lorem, condimentum sed faucibus ac, aliquam vitae enim.
</p>
</section>
</div>
</div>
</div>
</div>
It's just the same design in all pages. You can use include to do ths or copy the code page to page. sorry on my bad english hope you understand.