I am trying to extract the properties of a house and the corresponding values. I am interested in getting {key:{Property type: Commercial property, Purchase price: CHF 475,000, etc. }
I was able to extract the values one by one but not as a loop that is updating my dictionary.
<dl class="row xsmall-up-2 medium-up-3 large-up-4 attributes-grid">
<div class="column">
<dt class="label-text">
Property type
</dt>
<dd>
Commercial property </dd>
</div>
<div class="column">
<dt class="label-text">
Purchase price
</dt>
<dd>
CHF 475,000 </dd>
</div>
<div class="column">
<dt class="label-text">
Floor space
</dt>
<dd>
114 m² </dd>
</div>
<div class="column">
<dt class="label-text">
Floor
</dt>
<dd>
1. floor </dd>
</div>
<div class="column">
<dt class="label-text">
Year of construction
</dt>
<dd>
1989 </dd>
</div>
<div class="column">
<dt class="label-text">
Balcony/ies
</dt>
<dd>
<i class="fa fa-check text-green" aria-hidden="true"></i>
</dd>
</div>
<div class="column">
<dt class="label-text">
Indoor parking
</dt>
<dd>
<i class="fa fa-check text-green" aria-hidden="true"></i>
</dd>
</div>
<div class="column">
<dt class="label-text">
Outdoor parking
</dt>
<dd>
<i class="fa fa-check text-green" aria-hidden="true"></i>
</dd>
</div>
<div class="column">
<dt class="label-text">
Lift
</dt>
<dd>
<i class="fa fa-check text-green" aria-hidden="true"></i>
</dd>
</div>
<div class="column">
<dt class="label-text">
Cable TV
</dt>
<dd>
<i class="fa fa-check text-green" aria-hidden="true"></i>
</dd>
</div>
<div class="column">
<dt class="label-text">
Public transport stop
</dt>
<dd>
150 m </dd>
</div>
<div class="column">
<dt class="label-text">
Motorway
</dt>
<dd>
500 m </dd>
</div>
<div class="column">
<dt class="label-text">
Shops
</dt>
<dd>
300 m </dd>
</div>
</dl>
Considering the html text provided by you, which is stored as a string in table_text.
from bs4 import BeautifulSoup
soup = BeautifulSoup(table_text,"lxml")
temp_dict = {}
for d in soup.find_all("div",{"class":"column"}):
temp_dict[d.find("dt").text.strip()] = d.find("dd").text.strip()
print(temp_dict)
I am guessing the html text you provided was for only one row of the table, if you want this for all the rows, loop over them and keep a parent dictionary where you update row as a key and temp_dict as a value in each iteration. This will give you the structure you wanted.
Related
I have been building a web application using Bootstrap 3. Within that, I used panels to group user elements - displaying data, simple edit forms etc.
I would use a dl with the label as a dt and the value as the dd.
Similarly, I would use forms with the labels inline with the fields
<div class="panel-body">
<dl class="dl-horizontal">
<dt>Name</dt>
<dd>Value</dd>
</dl>
</div>
I could use dl-horizontal just fine within the panel.
Now, however, with Bootstrap 4 panels have become cards, and the dl-horizontal class does not seem to have an effect.
<div class="card-body">
<div class="card-text">
<dl class="dl-horizontal">
<dt>Name</dt>
<dd>Value</dd>
</dl>
</div>
</div>
Update
Removed references to forms. I had initially had issues with form-horizontal as well, Bootstrap4 does horizontal forms differently
Bootstrap 4 no longer supports dl-horizontal. The recommended alternative is to use .row and .col*.
<div class="card-body">
<div class="card-text">
<dl class="row">
<dt class="col-4">Name</dt>
<dd class="col-8">Value</dd>
</dl>
</div>
</div>
worked for me
To get fully responsive behavior, use:
<div class="card-body">
<div class="card-text">
<dl class="row">
<dt class="col-sm-3 text-md-right">Name</dt>
<dd class="col-sm-9">Value</dd>
</dl>
</div>
</div>
Because in Bootstrap 3 the dl-horizontal class only applied to sm+ screens, and it aligned the <dt> to the right.
Use a combination of list-inline and list-inline-item:
<div class="card-body">
<div class="card-text">
<dl class="list-inline">
<dt class="list-inline-item">Name</dt>
<dd class="list-inline-item">Value</dd>
</dl>
</div>
</div>
I'm using Bootstrap 3.3.7 and I have a dl list configured as horizontal. I would like to visualize a full length row inside a <dl> tag.
<dl class="dl-horizontal">
<dt>Label 1</dt>
<dd>Text 1</dd>
<dt>how to display a full length text?</dt>
<dd></dd>
<dt>Label 2</dt>
<dd>Text 2</dd>
</dl>
I would like to obtain something like this:
Try this
Check Demo here
HTML:
<dl class="dl-horizontal">
<dt>Label 1</dt>
<dd>Text 1</dd>
<dt class="fullWidth"> 26 Lakeshore View, Sentosa Cove, Singapore 26 Lakeshore View, Sentosa Cove.</dt>
<dd></dd>
<dt>Label 2</dt>
<dd>Text 2</dd>
</dl>
CSS:
.fullWidth + dd {
margin-left: 0;
width: unset;
}
.dl-horizontal dt.fullWidth {
width: 100%;
text-overflow: unset;
white-space: initial;
text-align: left;
}
This fiddle link may solve your problem.
Codes are as followed.
HTML
<div class="container">
<dl class="dl-horizontal">
<div class="row">
<dt class="col-xs-6">Label 1</dt>
<dd class="col-xs-6">Text 1</dd>
</div>
<div class="row">
<dd class="col-md-12">I guess this is what you are looking. This may help you. in bootstrap each row is devided into 12 columns. For more information you can check bootstrap grid system. </dd>
</div>
<div class="row">
<dt class="col-xs-6">Label 2</dt>
<dd class="col-xs-6">Text 2</dd>
</div>
<div class="row">
<dd class="col-md-12">Defination of lable2 Text2. This contains the defination.</dd>
</div>
</dl>
</div>
You need to add bootstrap.js and bootstrap.css files.
So heres my situtation, after I layed out the correct alignments of this emergency contact details of countries, I tried adding json to it. Unfortunately json scambled up my texts. I tried using another col grid inside "col-md-12" to no avail. I also tried bootstrap pull-right and pull-left but the hotline name and the number still does not align properly. I would like to have some advice to what can be done to position the texts.
Here is what its supposed to do: (imagine the flag is in the left side and the number are supposed to be aligned like a column)
Brunei
Ambulance: 991
Police: 993
Fire and Rescue: 995
Search and Rescue: 998
................................................................................................
Here is the current mess of text:
mess of hotlines
Thank you for the time and cooperation to anyone responding
<div class="module-text" ng-controller="VolunteerAidCtrl">
<p class="services-margin">In an emergency, please contact the appropriate service in their respective ASEAN countries for the proper response. These numbers can be called either on landline and mobile and consist of the Police Department, Fire Department, and the Hospital Ambulance. </p>
<hr>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..." ng-model="search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
<hr>
<div class="row">
<div class="col-md-6 services-margin" ng-repeat="service in services | filter:search">
<img class="flagsize" ng-src="{{service.flagimgurl}}">
<div class="country-title col-md-3" ng-bind="service.country"></div>
<p class="col-md-3" ng-bind="service.hl1"></p>
<span class="pull-right" ng-bind="service.hl1num1"></span>
<span class="pull-right" ng-bind="service.hl1num2"></span>
<span class="pull-right" ng-bind="service.hl1num3"></span>
<p ng-bind="service.hl2"></p>
<span class="pull-right" ng-bind="service.hl2num1"></span>
<span class="pull-right" ng-bind="service.hl2num2"></span>
<span class="pull-right" ng-bind="service.hl2num3"></span>
<p ng-bind="service.hl3"></p>
<span class="pull-right" ng-bind="service.hl3num1"></span>
<span class="pull-right" ng-bind="service.hl3num2"></span>
<span class="pull-right" ng-bind="service.hl3num3"></span>
<p ng-bind="service.hl4"></p>
<span class="pull-right" ng-bind="service.hl4num1"></span>
<span class="pull-right" ng-bind="service.hl4num2"></span>
<span class="pull-right" ng-bind="service.hl4num3"></span>
</div>
</div>
</div>
To align the image to the left and have the content on the right I would use the media object
and for proper alignment to right, why not use tables?
<div class="row">
<div class="col-md-6" ng-repeat="service in services | filter:search">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object flagsize" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Flag_of_Brunei_1906-1959.svg/1000px-Flag_of_Brunei_1906-1959.svg.png" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading country-title" ng-bind="service.country">Brunei</h4>
<table class="table">
<tr>
<td ng-bind="service.hl1">Service 1</td>
<td style="text-align:right">
<div ng-bind="service.hl1num1">111</div>
<div ng-bind="service.hl1num2">222</div>
<div ng-bind="service.hl1num3">333</div>
</td>
</tr>
<tr>
<td ng-bind="service.hl2">Service 2</td>
<td style="text-align:right">
<div ng-bind="service.hl2num1">111</div>
<div ng-bind="service.hl2num2">222</div>
<div ng-bind="service.hl2num3">333</div>
</td>
</tr>
<tr>
<td ng-bind="service.hl3">Service 3</td>
<td style="text-align:right">
<div ng-bind="service.hl3num1">111</div>
<div ng-bind="service.hl3num2">222</div>
<div ng-bind="service.hl3num3">333</div>
</td>
</tr>
<tr>
<td ng-bind="service.hl4">Service 4</td>
<td style="text-align:right">
<div ng-bind="service.hl4num1">111</div>
<div ng-bind="service.hl4num2">222</div>
<div ng-bind="service.hl4num3">333</div>
</td>
</tr>
</table>
</div>
</div>
</div>
https://jsfiddle.net/ktbmLaq8/
I'm having an issue when using Bootstrap's dl with the dl-horizontal class. In the xs, md and lg viewports the dl's descriptions are displayed properly. However, in the sm viewport, the dl's content leaves its parent's boundary.
Here's the xs viewport.
Then the larger ones...
And the problem appears with the md viewport.
Here's the code related to that div:
<div class="col-sm-3">
<div class="panel panel-primary">
<div class="panel-heading text-center">
Stats
</div>
<div class="panel-body">
<ul class="nav nav-tabs">
<li class="active">Basic</li>
<li>Advanced</li>
</ul>
<dl class="dl-horizontal text-muted">
<dt>
Nodes:
</dt>
<dd>
7
</dd>
<dt>
Bandwidth:
</dt>
<dd>
3 kbps
</dd>
<dt>
Average hops:
</dt>
<dd>
3
</dd>
<dt>
Latency:
</dt>
<dd>
100 ms
</dd>
</dl>
</div>
</div>
</div>
</div>
You can add this property to erase the text-align: center property of dt :
.dl-horizontal dt { text-align: left; }
See it here
You need to add dt element's style width: auto;
Create a custom style for dt and dd that resets default behaviour of style as others suggested.
.dl-horizontal > dt.left {
text-align: left;
margin-right: 10px;
width: auto;
}
.dl-horizontal > dd.left {
margin-left:0;
}
I am strugling with a layout in bootstrap.
On normal desktop environment I have this layout
________col1________________col2_________
|firstname + input | Email + input |
|lastname + input | Telephone + input|
|etc | |
-----------------------------------------
When the page is viewed on mobile, I would like column 2 to drop under column 1. At the moment email gets pushed under firstname. The order becomes firstname, email, lastname, telephone, etc
Here is the html I have so far. It's probably simple to solve this, but so far no luck. In the below code my rows are of course a problem, but wrapping it in two col-xx-6 columns doesn't work somehow
<div class="row">
<div class="col-sm-2">
<label class="control-label">Bedrijfsnaam</label>
</div>
<div class="col-sm-4">
<span data-bind="text: name"></span>
</div>
<div class="col-sm-2">
<label class="control-label">Straat</label>
</div>
<div class="col-sm-4" data-bind="with: address">
<span data-bind="text: street"></span>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<label class="control-label">E-mailadres</label>
</div>
<div class="col-sm-4">
<span data-bind="text: email"></span>
</div>
<div class="col-sm-2">
<label class="control-label">Nummer</label>
</div>
<div class="col-sm-4" data-bind="with: address">
<span data-bind="text: number"></span>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<label class="control-label">Website</label>
</div>
<div class="col-sm-4">
<span data-bind="text: website"></span>
</div>
<div class="col-sm-2">
<label class="control-label">Achtervoegsel</label>
</div>
<div class="col-sm-4" data-bind="with: address">
<span data-bind="text: numberext"></span>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<label class="control-label">KvK nummer</label>
</div>
<div class="col-sm-4">
<span data-bind="text: coCnumber"></span>
</div>
<div class="col-sm-2">
<label class="control-label">Postcode</label>
</div>
<div class="col-sm-4" data-bind="with: address">
<span data-bind="text: postalcode"></span>
</div>
</div>
This is easily accomplished with Bootstrap's Grid System. The following will work for you
<div class="row">
<div class="col-sm-6">
<!-- column 1 stuff here -->
</div>
<div class="col-sm-6">
<!-- column 2 stuff here -->
</div>
</div>
What the above does is create two columns that will be floated next to each other on larger displays but will collapse to rows when the resolution becomes less than 750px (the breakpoint Bootstrap has chosen for col-sm-*.
Don't forget that Bootstrap requires you to wrap your content within a .container class. More info here http://getbootstrap.com/css/#overview-container