Databases
StackOverflow2013
Postsdbo
POUsing Bootstrap how do I layout elements horizontally?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing Bootstrap how do I layout elements horizontally?
    primarykey
    data
    text
    <p>I have the below that I am trying to replicate this mock-up --> <img src="https://i.stack.imgur.com/vD0w8.jpg" alt="DoorPanelImage"></p> <p>I am stuck on how to make my elements display horizontally? Would I need to make a list or another "table"? Was able to accomplish it using <code>style</code> but it seems like I shouldn't need to.</p> <p>Here's what I have so far --></p> <pre><code>&lt;div id="Row1" class="row"&gt; &lt;div id="Door1" class="col-md-2 panel panel-primary" &gt; &lt;div id="Door1Head" class="panel-heading"&gt; &lt;span class="badge"&gt;1&lt;/span&gt; &lt;h3 class="panel-title"&gt;RE031159&lt;/h3&gt; &lt;span class="glyphicon glyphicon-arrow-up"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="panel-body"&gt; &lt;ul class="list-group"&gt; &lt;li class="list-group-item"&gt; 12315 Carregeenan WG-16 4000 lbs &lt;/li&gt; &lt;li class="list-group-item"&gt; 1063545 Carp meal spread 1042 lbs &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="Door2" class="col-md-2"&gt; &lt;span class="badge"&gt;2&lt;/span&gt; &lt;/div&gt; &lt;div id="Door3" class="col-md-2"&gt; &lt;span class="badge"&gt;3&lt;/span&gt; &lt;/div&gt; &lt;div id="Door4" class="col-md-2"&gt; &lt;span class="badge"&gt;4&lt;/span&gt; &lt;/div&gt; &lt;div id="Door5" class="col-md-2"&gt; &lt;span class="badge"&gt;5&lt;/span&gt; &lt;/div&gt; </code></pre> <p></p> <pre><code>&lt;div id="Row2" class="row"&gt; &lt;div id="Door6" class="col-md-2"&gt; &lt;span class="badge"&gt;6&lt;/span&gt; &lt;/div&gt; &lt;div id="Door7" class="col-md-2"&gt; &lt;span class="badge"&gt;7&lt;/span&gt; &lt;/div&gt; &lt;div id="Door8" class="col-md-2"&gt; &lt;span class="badge"&gt;8&lt;/span&gt; &lt;/div&gt; &lt;div id="Door9" class="col-md-2"&gt; &lt;span class="badge"&gt;9&lt;/span&gt; &lt;/div&gt; &lt;div id="Door10" class="col-md-2"&gt; &lt;span class="badge"&gt;10&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>For bigger picture, I am using Bootstrap 3 within an MVC 5 app. I will be populating the info in the mock-up from a SQL DB using EF6. I am imagining that I will be using some <code>@foreach</code> loops to build each "card".</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. UStereško
    1. USRefracted Paladin
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POUsing Bootstrap how do I layout elements horizontally?
      1. This table or related slice is empty.
      1. VTUpMod
    1. CONote: each `div` with class `row` has to have columns adding up to 12. Your `col-lg-2` only add up to 10
      singulars
      1. POUsing Bootstrap how do I layout elements horizontally?
      1. USRobb
    2. COI actually changed to `col-md-2`, does that change anything?
      singulars
      1. POUsing Bootstrap how do I layout elements horizontally?
      1. USRefracted Paladin
    3. COIt will still need to add up to 12, per row.
      singulars
      1. POUsing Bootstrap how do I layout elements horizontally?
      1. USRobb
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload