css - How to make right/left icons/text lists in Bootstrap? -

-

i'm converting old site responsive site using bootstrap, want find general solution converts old layout format uses tables show icons on left , text on right.

so need show texts regardless of length next icons in list this:

enter image description here

but if width gets small, should show this:

enter image description here

the icon can either graphic, font awesome character, or word, , should stay same width.

but right text width should able vary in length , wrap stay left aligned right of icon.

so far, have this:

<div class="row">   <div class="col-xs-1">icon</div>   <div class="col-xs-11">this longer text.</div>   <div class="clearfix"></div>   <div class="col-xs-1">icon</div>   <div class="col-xs-11">this longer text.</div>   <div class="clearfix"></div> </div>

but on width "lg" breaks up:

enter image description here

and on width "xs" wraps under:

enter image description here

how can make that:

  • icon column has constant width
  • text column stays right of icon column wraps text according width keeps left margin addition lines
  • text column stays left aligned icon column

i recommend bootstrap media object.

.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>  <div class="media">    <div class="media-left">      <a href="#">        <img class="media-object" src="https://placehold.it/100x100" alt="...">      </a>    </div>    <div class="media-body">      <h4 class="media-heading">media heading</h4>      here longer text first list item.    </div>  </div>  <div class="media">    <div class="media-left">      <a href="#">        <img class="media-object" src="https://placehold.it/100x100" alt="...">      </a>    </div>    <div class="media-body">      <h4 class="media-heading">media heading</h4>      here longer text first list item. holy moly, long text. keeps going , going.    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12:test (default-test) on project.Error occurred in starting fork -

-
i searched on internet provided answers did not in building project. the error starting fork. tried following methods: mvn clean install -u when searched, people said because of java 7 , should work java 6. using java 6 only. some said set surefire plugin this: <groupid>org.apache.maven.plugins</groupid> <artifactid>maven-surefire-plugin</artifactid> <version>2.5</version> <configuration> <skiptests>false</skiptests> <testfailureignore>true</testfailureignore> <forkmode>once</forkmode> </configuration> the actual error is: [error] failed execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12:test (default-test) on project junitcategorizer.instrument: error occurred in starting fork, check output in log -> [help 1] org.apache.maven.lifecycle.lifecycleexecutionexception: failed execute goal org.apache.maven.plugins:maven-surefire-plugin:2...
Read more

windows - Debug iNetMgr.exe unhandle exception System.Management.Automation.CmdletInvocationException -

-
i fired windows 7 machine today , attempting start intemgr.exe process terminates immediately. started process under debugger. seems process terminating following exception: system.management.automation.cmdletinvocationexception . dumping exceptions on heap yields following results. heap has few more exception listed below. so based on research exception happens when cmdlet encounters terminating error. method call before processrecord(). provides record-by-record processing functionality cmdlet. windows powershell runtime calls method multiple times each instance of cmdlet in pipeline. how can inspect pipeline debugger? exception object: 0000000002702940 exception type: system.management.automation.itemnotfoundexception message: cannot find path 'c:\windows\system32\windowspowershell\v1.0\modules\applicationserver\applicationserver.dll' because not exist. innerexception: <none> stacktrace (generated): sp ip function 000000001...
Read more

configurationsection - activeMq-5.13.3 setup configurations for wildfly 10.0.0 -

-
hi new work on activemq, trying access messages send activemq in mdb onmsg() method unable things done here sample standalone-full.xml configuration. <subsystem xmlns="urn:jboss:domain:messaging-activemq:1.0"> <jms-queue name="favouritesqueue" entries="queue/favouritesqueue"/> </server> </subsystem> mdb configuration <mdb> <resource-adapter-ref resource-adapter-name="activemq-ra.rar"/> <bean-instance-pool-ref pool-name="mdb-strict-max-pool"/> </mdb> <subsystem xmlns="urn:jboss:domain:resource-adapters:4.0"> <resource-adapters> <resource-adapter id="activemq-ra.rar"> <archive> activemq-rar-5.13.3.rar </archive> <transaction-support>xatr...
Read more