html - बूटस्ट्रैप 3 के साथ लंबवत-संरेखित करें




css css3 (15)

मैं ट्विटर बूटस्ट्रैप 3 का उपयोग कर रहा हूं, और मुझे समस्याएं हैं जब मैं लंबवत दो div को संरेखित करना चाहता हूं, उदाहरण के लिए - JSFiddle लिंक :

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

बूटस्ट्रैप में ग्रिड सिस्टम float: left का उपयोग करता है float: left , display:inline-block नहीं display:inline-block , इसलिए संपत्ति vertical-align काम नहीं करता है। मैंने इसे ठीक करने के लिए margin-top का उपयोग करने का प्रयास किया, लेकिन मुझे लगता है कि यह उत्तरदायी डिजाइन के लिए एक अच्छा समाधान नहीं है।


यह उत्तर एक हैक प्रस्तुत करता है, लेकिन मैं आपको फ्लेक्सबॉक्स का उपयोग करने की अत्यधिक अनुशंसा करता हूं (जैसा कि @Haschem उत्तर में बताया गया है), क्योंकि अब यह हर जगह समर्थित है।

डेमो लिंक:
बूटस्ट्रैप 3
बूटस्ट्रैप 4 अल्फा 6

जब भी आपको इसकी आवश्यकता होती है तब भी आप कस्टम क्लास का उपयोग कर सकते हैं:

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
<div class="row">
    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Bootply

inline-block का उपयोग inline-block बीच अतिरिक्त जगह जोड़ता है यदि आप अपने कोड में वास्तविक स्थान (जैसे ...</div> </div>... ) देते हैं। कॉलम आकार 12 तक बढ़ने पर यह अतिरिक्त स्थान हमारे ग्रिड को तोड़ देता है:

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div>
    <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

यहां, हमारे पास <div class="[...] col-lg-2"> और <div class="[...] col-lg-10"> (एक कैरिज रिटर्न और 2) के बीच अतिरिक्त रिक्त स्थान हैं टैब / 8 रिक्त स्थान)। इसलिए...

आइए इस अतिरिक्त जगह को लातें !!

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

प्रतीत होता है बेकार टिप्पणियां <!-- ... --> ? वे महत्वपूर्ण हैं - उनके बिना, <div> तत्वों के बीच सफेद स्थान लेआउट में जगह ले जाएगा, ग्रिड सिस्टम तोड़ देगा।

नोट: Bootply अद्यतन किया गया है


लचीला बॉक्स लेआउट

सीएसएस फ्लेक्सिबल बॉक्स के आगमन के साथ, वेब डिजाइनरों के कई दुःस्वप्न 1 को हल किया गया है। सबसे हैकी वाले, ऊर्ध्वाधर संरेखण में से एक। अब अज्ञात ऊंचाइयों में भी यह संभव है

"दो दशकों के लेआउट हैक खत्म हो रहे हैं। शायद कल नहीं, लेकिन जल्द ही, और हमारे बाकी के जीवन के लिए।"

- डब्ल्यू 3 कॉनफ 2013 में सीएसएस पौराणिक एरिक मेयर

फ्लेक्सिबल बॉक्स (या संक्षेप में, फ्लेक्सबॉक्स), एक नया लेआउट सिस्टम है जो विशेष रूप से लेआउट उद्देश्यों के लिए डिज़ाइन किया गया है। विनिर्देश कहता है :

फ्लेक्स लेआउट अधिसूचना ब्लॉक लेआउट के समान है। इसमें कई जटिल टेक्स्ट- या दस्तावेज़-केंद्रित गुणों की कमी है जिनका उपयोग ब्लॉक लेआउट, जैसे फ्लोट्स और कॉलम में किया जा सकता है। बदले में यह अंतरिक्ष वितरित करने और सामग्री को संरेखित करने के लिए सरल और शक्तिशाली टूल प्राप्त करता है जिस तरह से वेबपैप्स और जटिल वेब पृष्ठों की अक्सर आवश्यकता होती है।

इस मामले में यह कैसे मदद कर सकता है? अच्छा चलो देखते हैं।

लंबवत गठबंधन कॉलम

ट्विटर बूटस्ट्रैप का उपयोग करके हमारे पास कुछ है .col-* s। हमें बस वांछित .row 2 को एक फ्लेक्स कंटेनर बॉक्स के रूप में प्रदर्शित करना है और उसके बाद संरेखित align-items संपत्ति द्वारा लंबवत सभी फ्लेक्स आइटम (कॉलम) को align-items है।

यहां उदाहरण लें (कृपया देखभाल के साथ टिप्पणियां पढ़ें)

<div class="container">
    <div class="row vertical-align"> <!--
                    ^--  Additional class -->
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>
.vertical-align {
    display: flex;
    align-items: center;
}

उत्पादन

रंगीन क्षेत्र कॉलम के पैडिंग-बॉक्स को प्रदर्शित करता है।

align-items: center पर align-items: center स्पष्ट align-items: center

align-items

फ्लेक्स आइटम को फ्लेक्स कंटेनर की वर्तमान रेखा के क्रॉस अक्ष में गठबंधन किया जा सकता है, जो justify-content समान justify-content लेकिन लंबवत दिशा में। align-items अज्ञात फ्लेक्स आइटम समेत सभी फ्लेक्स कंटेनर आइटमों के लिए डिफ़ॉल्ट संरेखण सेट करता है।

align-items: center; केंद्र मूल्य से, फ्लेक्स आइटम का मार्जिन बॉक्स लाइन के भीतर क्रॉस अक्ष में केंद्रित होता है।

बिग अलर्ट

महत्वपूर्ण नोट # 1: ट्विटर बूटस्ट्रैप अतिरिक्त छोटे उपकरणों में कॉलम की width निर्दिष्ट नहीं करता है जब तक आप कॉलम में .col-xs-# कक्षाओं में से कोई एक नहीं देते।

इसलिए इस विशेष डेमो में, मैंने मोबाइल मोड में कॉलम को ठीक से प्रदर्शित करने के क्रम में .col-xs-* कक्षाओं का उपयोग किया है, क्योंकि यह कॉलम की width को स्पष्ट रूप से निर्दिष्ट करता है।

लेकिन वैकल्पिक रूप से आप display: flex; बदलकर फ्लेक्सबॉक्स लेआउट को बंद कर सकते display: flex; display: block; करने के display: block; विशिष्ट स्क्रीन आकार में। उदाहरण के लिए:

/* Extra small devices (767px and down) */
@media (max-width: 767px) {
    .row.vertical-align {
        display: block; /* Turn off the flexible box layout */
    }
}

या आप केवल विशिष्ट स्क्रीन आकारों पर .vertical-align निर्दिष्ट कर सकते हैं :

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .row.vertical-align {
        display: flex;
        align-items: center;
    }
}

उस स्थिति में, मैं @KevinNelson के approach साथ @KevinNelson ।

महत्वपूर्ण नोट # 2: ब्रेवटी के कारण विक्रेता उपसर्ग छोड़े गए। उस समय के दौरान फ्लेक्सबॉक्स वाक्यविन्यास बदल दिया गया है। नया लिखित वाक्यविन्यास वेब ब्राउज़र के पुराने संस्करणों पर काम नहीं करेगा (लेकिन इंटरनेट एक्सप्लोरर 9 के रूप में पुराना नहीं है! फ्लेक्सबॉक्स इंटरनेट एक्सप्लोरर 10 और बाद में समर्थित है)।

इसका मतलब है कि आपको विक्रेता-प्रीफिक्स्ड गुणों का उपयोग करना चाहिए जैसे display: -webkit-box और इसी तरह उत्पादन मोड में।

यदि आप डेमो में "टॉगल संकलित दृश्य" पर क्लिक करते हैं, तो आपको सीएसएस घोषणाओं का उपसर्ग संस्करण दिखाई देगा ( Autoprefixer के लिए धन्यवाद)।

ऊर्ध्वाधर गठबंधन सामग्री के साथ पूर्ण ऊंचाई कॉलम

जैसा कि आप पिछले डेमो में देखते हैं, कॉलम (फ्लेक्स आइटम) अब उनके कंटेनर (फ्लेक्स कंटेनर बॉक्स यानी .row तत्व) के रूप में उच्च नहीं होते हैं।

यह align-items संपत्ति के लिए center मान का उपयोग करने के कारण है। डिफ़ॉल्ट मान stretch ताकि आइटम मूल तत्व की पूरी ऊंचाई को भर सकें।

इसे ठीक करने के लिए, आप display: flex; जोड़ सकते हैं display: flex; स्तंभों के साथ-साथ:

यहां उदाहरण लें (फिर, टिप्पणियों को ध्यान में रखें)

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;     /* Align the flex-items vertically */
  justify-content: center; /* Optional, to align inner flex-items
                              horizontally within the column  */
}

उत्पादन

रंगीन क्षेत्र कॉलम के पैडिंग-बॉक्स को प्रदर्शित करता है।

आखिरी, लेकिन कम से कम , ध्यान दें कि लक्ष्य प्राप्त करने के लिए आधुनिक दृष्टिकोण प्रदान करने के लिए यहां डेमो और कोड स्निपेट आपको एक अलग विचार देने के लिए हैं। यदि आप वास्तविक दुनिया की वेबसाइटों या अनुप्रयोगों में इस दृष्टिकोण का उपयोग करने जा रहे हैं तो कृपया " बिग अलर्ट " अनुभाग पर ध्यान दें।

ब्राउज़र समर्थन सहित आगे पढ़ने के लिए, ये संसाधन उपयोगी होंगे:

1. उत्तरदायी ऊंचाई 2 के साथ एक div के अंदर एक छवि को लंबवत रूप से संरेखित करें । ट्विटर बूटस्ट्रैप के डिफ़ॉल्ट को बदलने के लिए अतिरिक्त कक्षा का उपयोग करना बेहतर है।


आप इसे करने के कई तरीके हैं

1।

display: table-cell;
vertical-align: middle;

और कंटेनर के सीएसएस करने के लिए

display:table;
  1. स्क्रीन आकार के सापेक्ष पैडिंग को बदलने के लिए मीडिया-स्क्रीन के साथ पैडिंग का उपयोग करें। अधिक जानने के लिए Google @media स्क्रीन

  2. सापेक्ष पैडिंग का प्रयोग करें यानी% के संदर्भ में पैडिंग निर्दिष्ट करें

आशा करता हूँ की ये काम करेगा


इसे इस्तेमाल करे,

.exe {
  font-size: 0;
}

.exe > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row  exe">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid grey">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid red">Small</div>
   </div>
 </div>


टेबल और टेबल-सेल की कोई ज़रूरत नहीं है। इसे आसानी से ट्रांसफॉर्म का उपयोग करके हासिल किया जा सकता है। उदाहरण: http://codepen.io/arvind/pen/QNbwyM

कोड:

.child {
  height: 10em;
  border: 1px solid green;
  position: relative;
}
.child-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row parent">
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:4em;border:1px solid #000">Big</div>
    </div>
  </div>
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
  </div>
</div>


ठीक है, गलती से मैंने कुछ समाधान मिश्रित किए हैं, और यह अंततः मेरे लेआउट के लिए काम करता है जहां मैंने छोटे संकल्प पर बूटस्ट्रैप कॉलम के साथ 3x3 तालिका बनाने की कोशिश की।

/* required styles */

#grid a {
  display: table;
}

#grid a div {
  display: table-cell;
  vertical-align: middle;
  float: none;
}


/* additional styles for demo: */

body {
  padding: 20px;
}

a {
  height: 40px;
  border: 1px solid #444;
}

a > div {
  width: 100%;
  text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div id="grid" class="clearfix row">
  <a class="col-xs-4 align-center" href="#">
    <div>1</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>2</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>3</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>4</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>5</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>6</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>7</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>8</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>9</div>
  </a>
</div>


फ्लेक्स व्यवहार मूल रूप से बूटस्ट्रैप के बाद समर्थित हैं 4. row div में d-flex align-items-center जोड़ें। अब आपको अपने सीएसएस को संशोधित करने की आवश्यकता नहीं है।

सरल उदाहरण: http://jsfiddle.net/vgks6L74/

<!-- language: html -->    
<div class="row d-flex align-items-center">
  <div class="col-5 border border-dark" style="height:10em">  Big </div>
  <div class="col-2 border border-danger" style="height:3em"> Small </div>
</div>

आपके उदाहरण के साथ: http://jsfiddle.net/7zwtL702/

<!-- language: html -->
<div class="row d-flex align-items-center">
    <div class="col-5">
        <div class="border border-dark" style="height:10em">Big</div>
    </div>
    <div class="col-2">
        <div class="border border-danger" style="height:3em">Small</div>
   </div>
</div>

स्रोत: https://getbootstrap.com/docs/4.0/utilities/flex/


बूटस्ट्रैप 4 के साथ (जो वर्तमान में अल्फा में है) आप .align-items-center class .align-items-center उपयोग कर सकते हैं। तो आप बूटस्ट्रैप के उत्तरदायी चरित्र को रख सकते हैं। मेरे लिए सीधे ठीक काम करता है। बूटस्ट्रैप 4 दस्तावेज़ीकरण देखें।


मैं इस मुद्दे में भाग गया। मेरे मामले में मुझे बाहरी कंटेनर की ऊंचाई नहीं पता था, लेकिन इस तरह मैंने इसे ठीक किया:

सबसे पहले अपने html और body तत्वों की ऊंचाई निर्धारित करें ताकि वे 100% हों। यह महत्वपूर्ण है! इसके बिना, html और body तत्वों को बस अपने बच्चों की ऊंचाई का वारिस होगा।

html, body {
   height: 100%;
}

तब मेरे पास एक बाहरी कंटेनर वर्ग था:

.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

और अंत में कक्षा के साथ आंतरिक कंटेनर:

.inner-container {
  display: table-cell;
  vertical-align: middle;
}

एचटीएमएल उतना सरल है जितना:

<body>
   <div class="container">
     <div class="inner-container">
        <p>Vertically Aligned</p>
     </div>
   </div>
</body>

यह सब आपको लंबवत सामग्री को संरेखित करने की आवश्यकता है। इसे बेवकूफ में देखें:

Jsfiddle


मैं उसी स्थिति में भाग गया जहां मैं पंक्ति में लंबवत कुछ div तत्वों को संरेखित करना चाहता था और पाया कि बूटस्ट्रैप कक्षाएं col-xx-xx div को शैली के रूप में फ्लोट के रूप में लागू करती है: बाएं।

मुझे शैली तत्वों जैसे शैली = "फ्लोट: कोई नहीं" पर शैली लागू करना पड़ा और मेरे सभी div तत्व लंबवत रूप से गठबंधन शुरू हो गए। यहां कामकाजी उदाहरण है:

<div class="col-lg-4" style="float:none;">

जेएसफ़ील्ड लिंक

बस अगर कोई फ्लोट संपत्ति के बारे में अधिक पढ़ना चाहता है:

डब्ल्यू 3 स्कूल्स - फ्लोट


मैंने अभी यह किया है और यह वही करता है जो मैं करना चाहता हूं।

.align-middle {
  margin-top: 25%;
  margin-bottom: 25%;
}

और अब मेरा पृष्ठ दिखता है

<div class='container-fluid align-middle'>
    content

 ----------------------------------
 |                                |
 |   --------------------------   |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |   --------------------------   |
 |                                |
 ----------------------------------

मैंने विभिन्न स्क्रीन आकारों पर विभिन्न कॉलम आकारों को मिलाते समय उपयोग करना आसान बनाने के लिए ज़ेसेक्स के उत्तर पर थोड़ा सा विस्तार किया।

यदि आप Sass उपयोग करते हैं, तो आप इसे अपनी स्कैस-फ़ाइल में जोड़ सकते हैं:

@mixin v-col($prefix, $min-width) {
    @media (min-width: $min-width) {
        .col-#{$prefix}-v {
            display: inline-block;
            vertical-align: middle;
            float: none;
        }
    }
}

@include v-col(lg, $screen-lg);
@include v-col(md, $screen-md);
@include v-col(sm, $screen-sm);
@include v-col(xs, $screen-xs);

जो निम्न सीएसएस उत्पन्न करता है (यदि आप सास का उपयोग नहीं कर रहे हैं, तो आप सीधे अपने स्टाइलशीट में उपयोग कर सकते हैं):

@media (min-width: 1200px) {
    .col-lg-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 992px) {
    .col-md-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 768px) {
    .col-sm-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 480px) {
    .col-xs-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

अब आप इसे अपने उत्तरदायी कॉलम पर इस तरह उपयोग कर सकते हैं:

<div class="container">
    <div class="row">
        <div class="col-sm-7 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div><div class="col-sm-5 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div><div class="col-md-5 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div>
    </div>
</div>

यदि आप बूटस्ट्रैप के Less संस्करण का उपयोग कर रहे हैं, और स्वयं सीएसएस में संकलित कर रहे हैं, तो आप बूटस्ट्रैप कक्षाओं के साथ उपयोग करने के लिए कुछ उपयोगिता कक्षाओं का उपयोग कर सकते हैं।

मैंने इन्हें शानदार रूप से अच्छी तरह से काम करने के लिए पाया है जहां मैं बूटस्ट्रैप ग्रिड सिस्टम (जैसे -md या -sm का उपयोग करना) की प्रतिक्रिया और कॉन्फ़िगरेशन को संरक्षित करना चाहता हूं, लेकिन मैं चाहता हूं कि किसी दिए गए पंक्ति में सभी कॉलम सभी समान ऊर्ध्वाधर ऊंचाई ( ताकि मैं उनकी सामग्री को लंबवत रूप से संरेखित कर सकूं और पंक्ति में सभी कॉलम एक आम बीच साझा कर सकें)।

सीएसएस / कम:

.display-table {
    display: table;
    width: 100%;
}
.col-md-table-cell {
    @media (min-width: @screen-md-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.col-sm-table-cell {
    @media (min-width: @screen-sm-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.vertical-align-middle {
    vertical-align: middle;
}

HTML:

<div class="row display-table">
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
</div>

स्वीकृत उत्तर के बाद, यदि आप चिंताओं को अलग करने के लिए मार्कअप को कस्टमाइज़ नहीं करना चाहते हैं या केवल इसलिए कि आप सीएमएस का उपयोग करते हैं, तो निम्न समाधान ठीक काम करता है:

.valign {
  font-size: 0;
}

.valign > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row valign">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid #000">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid #F00">Small</div>
   </div>
 </div>

यहां सीमा यह है कि आप मूल तत्व से फ़ॉन्ट आकार का उत्तराधिकारी नहीं प्राप्त कर सकते हैं क्योंकि पंक्ति सफेद स्थान को हटाने के लिए फ़ॉन्ट आकार को 0 पर सेट करती है।


    div{
    border:1px solid;
    }
    span{
    display:flex;
    align-items:center;

    }
    .col-5{
    width:100px;
    height:50px;
    float:left;
    background:red;
    }
    .col-7{
    width:200px;
    height:24px;
    

    float:left;
    background:green;

    }
   


    <span>
    <div class="col-5">
    </div>
    <div class="col-7"></div>
    </span>







twitter-bootstrap-3