Bootstrap colums 1-2 zonder spacing

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Oracle APEX developer

Wat je gaat doen: Als Oracle APEX ontwikkelaar bij DPA werk je samen met collega’s aan de meest interessante opdrachten. Je zult je ervaring met SQL, PL/SQL, JavaScript, HTML en CSS inzetten om wensen van opdrachtgevers te vertalen naar technische oplossingen. Je werk is heel afwisselend, omdat DPA zich niet beperkt tot een specifieke branche. Zo ben je de ene keer bezig binnen de zorgsector, de andere keer is dit bij de overheid. Wat we vragen: Klinkt goed? Voor deze functie breng je het volgende mee: Je hebt een hbo- of universitaire opleiding afgerond Je hebt 2 tot 5 jaar

Bekijk vacature »

Medior PHP Developer

Functie omschrijving Ben jij een getalenteerde PHP Developer en aan de slag in een gemotiveerd team? Lees dan snel verder! Voor onze opdrachtgever in de omgeving van Valkenswaard zijn we op zoek naar een ervaren PHP developer. Jij gaat hier zorg dragen voor het optimaliseren en up-to-date houden van de bestaande applicaties. Je werkt verder aan de applicaties die jij verder ontwikkelt. Dit doe je voornamelijk met PHP en MySQL. Verder ga je je bezig houden met: Het uitbouwen van het E-commerce software platform. Deelnemen aan overleggen met het team. Het ondersteunen van jouw team developers (3 man) en helpen

Bekijk vacature »

Front-end developer Consultancy in teamverband wer

Functie Het team bestaat uit User Experience designers, Data Scientists en Software Engineers. Momenteel zijn ze op zoek naar een ervaren Front-end of Fullstack developer die samen met de consultants aan de slag gaat om de business requirements te vertalen naar technische oplossingen. Los van het finetunen van extenties, help je bij het configureren van bijvoorbeeld een mobiel bankieren app. Hierin ben je van A tot Z betrokken en zie je bijvoorbeeld ook toe op de uitvoering van testen. Je expertise wordt optimaal benut en je krijgt verschillende kansen om deze uit te breiden door met verschillende innovatieve technologieën aan

Bekijk vacature »

Junior Low-code ontwikkelaar gezocht omgeving Arnh

Bedrijfsomschrijving Wij zijn een dynamisch IT-bedrijf dat zich richt op het stroomlijnen van bedrijfsprocessen en het creëren van ondersteunende applicaties. Onze kracht ligt in het combineren van zakelijk inzicht met IT-expertise via gestroomlijnde procesontwerpen en wendbare applicatieontwikkeling met behulp van Low-code technologieën. Als jonge professional krijg je de kans om samen te werken met een team van 15 deskundige collega's, verspreid over nationale en internationale locaties. We bieden je een leerzame omgeving waar je je vaardigheden kunt ontwikkelen en groeien in je rol als Low-code ontwikkelaar. Word jij onze nieuwe Junior Low-code Ontwikkelaar (OutSystems)? Versterk ons team en draag bij

Bekijk vacature »

Junior/medior PHP developer Onderwijssector

Functie Momenteel zijn ze op zoek naar een developer die, veelal fullstack, mee gaat werken aan de ontwikkeling van de producten en zo helpt aan de uitvoering van hun ontwikkelprojecten. Je komt te werken binnen hun development team bestaande uit 6 ontwikkelaars. Ze staan zowel open voor meer junior als medior/senior developers. Je kunt snel veel verantwoordelijkheid krijgen en doorgroeien binnen het bedrijf. Bovendien ben je betrokken bij het bepalen van de product roadmap en de inbreng van (nieuwe) technologieën. De applicaties waaraan je werk worden gebruikt op onderwijsinstellingen door heel Nederland. De tech-stack bestaat voornamelijk uit Laravel (PHP), Vue.js

Bekijk vacature »

Front-end Developer

Do you want to work with the latest technologies on the development of new systems and applications? Create elegant interfaces using VueJS for thousands of users? Get moving and strengthen Nederlandse Loterij as a Front-end Developer. Thanks to your efforts, our services are always presented in style. As a Front-end Developer you are responsible for website development and improving customer experience based on data analyze. In this way, you directly contribute to a happy, healthy and sporty Netherlands. As a Front-end Developer you score by: Writing elegant, testable components without side-effects to provide functionality to the users Website development, adding

Bekijk vacature »

Java (Java EE) Developer

In het kort Werken als Java developer betekent werken aan complexe IT projecten bij onder meer een internationaal containeroverslag bedrijf. Zo sturen we apparaten en eindgebruikers aan d.m.v. onze custom-made software oplossing, die dagelijkse vele duizenden containers verwerkt. Denk aan systemen die volautomatische kranen aansturen en op afstand bedienen, de volledige afhandeling van containernummerherkenning bij het laden en lossen van zeeschepen of het tonen van instructies aan de chauffeurs van ruim 300 straddle carriers. En dat allemaal redundant, robuust en in een dynamische 24/7 omgeving! Jij versterkt ons ontwikkelteam en gaat aan de slag met oa. Java i.c.m. Spring (Boot),

Bekijk vacature »

Medior/senior Python developer

Functie Bedrijven komen bij deze organisatie om technische vraagstukken op te lossen en hierin ook tot oplossingen te komen waar ze zelf misschien niet aan gedacht hadden. Jij gaat vanuit je ervaring dus niet alleen hands-on aan de slag met het ontwikkelen, maar zult ook zeker adviseren en proactief meedenken met de klant. Er zijn meerdere lange en/of korte projecten en het type klanten is heel uiteenlopend. Zo kun je terecht komen in een multidisciplinair scrumteam waarin je als Python developer meewerkt, of juist voor een kleiner (Greenfield) project aan de slag gaan waarin je veel breder bezig bent. Door

Bekijk vacature »

Senior Java developer

Als Senior Developer bij Sogeti ben je onderdeel van onze toonaangevende best-gecertificeerde Java community. Deze bestaat uit ruim 100 gepassioneerde professionals. In teamverband lever je mooie prestaties. Daarmee draag je aan bij de meerwaarde die wij leveren aan onze top-opdrachtgevers. Geen werkdag is hetzelfde! Je bent voortdurend bezig met het oplossen van allerlei complexe vraagstukken binnen bedrijfskritische systemen. Een voorbeeld hiervan is een cliënt-volgsysteem bij Reclassering Nederland. Andere klanten waar wij onder andere voor werken: KPN, Philips, Nationale-Nederlanden, Kamer van Koophandel, ABN AMRO, Bovemij, Aval en de Nationale Politie. Natuurlijk krijg jij de mogelijkheid je verder te certificeren in dit vakgebied. We

Bekijk vacature »

.NET Developer Microservices

Dit ga je doen Je taken zullen voornamelijk bestaan uit: Het ontwikkelen van software, inclusief vormgeving, implementaties, integraties en (automatisch) testen (.NET, C#, Azure, Docker, Microservices, Angular); Het in kaart brengen van software requirements; Zorgen dat jouw code kwalitatief hoogstaand is; Het uitvoeren van risico analyses; Een bijdrage leveren aan het continuous quality improvement process. Hier ga je werken Dat kanker een verschrikkelijke ziekte is die de wereld uit geholpen moet worden, is duidelijk. Binnen deze Gelderse organisatie die duizenden ziekenhuizen van producten voorziet, proberen ze daar via technische innovaties aan bij te dragen. Samen met 10 collega .NET developers

Bekijk vacature »

Front-end Developer Angular

Dit ga je doen Jouw taken als Front End Developer bestaan uit: Het ontwikkelen van maatwerkoplossingen voor klanten; Het meedenken over nieuwe tools en technieken; Het begeleiden van junioren; Het meewerken aan diverse projecten; Het meedenken in UX/UI design. Hier ga je werken Als Front-End Developer ga je in een Scrum team aan de slag met de nieuwste digitale technologieën om klanten en overheden over de hele wereld te ondersteunen met het ondersteunen van hun software, veelal op het gebied van watermanagement en infra. Door middel van real-time data in combinatie met voorspellende analyses, AI, Deep Learning en Machine Learning

Bekijk vacature »

Back End Developer

Als Back End developer bij KUBUS houd je je bezig met het ontwikkelen van de (web)applicatie en services van BIMcollab. Je hebt een focus op de back end van onze software, daarvoor werken wij hoofdzakelijk met C# en .NET. Wij hanteren een full-stack benadering, wat betekent dat je naast de back-end ook meehelpt bij andere onderdelen van de code. Als softwarebedrijf bevindt KUBUS zich in een unieke positie. We bouwen aan onze eigen producten die wereldwijd door tienduizenden gebruikers worden gebruikt. Ons bedrijf heeft precies de juiste grootte: groot genoeg om echt impact te maken in de markt, maar klein

Bekijk vacature »

Java developer (remote)

Functie Wat ga je doen als Java Developer? Jij als Java ontwikkelaar komt te werken in 1 van onze SCRUM teams. Momenteel werken er zo’n 30 ontwikkelaars binnen onze organisatie waarbij jij de brug slaat tussen het bouwen van verschillende functionaliteiten binnen onze applicaties en deze vervolgens te integreren in onze centrale hub. Je start je dag om 9 uur met een stand up en dan pak je jouw taken op voor de dag. Hieronder een aantal taken die jij zal uitvoeren: – Het bedenken en uitbouwen van features binnen de verschillende applicaties – Onderhouden van CI/CD pipelines – Bezighouden

Bekijk vacature »

C# .NET Developer

Functieomschrijving Voor dit leuke softwarre bedrijf in de omgeving Vught zijn we per direct op zoek naar een C#/.NET Developer. Is development jouw passie en doe je dit graag met C#/.NET? Lees dan snel verder! Jou werkzaamheden zullen zijn: Zorgen voor de optimalisatie van de huidige software en het automatiseren van bedrijfsprocessen. Naar aanleiding van de wensen van de klant ga je, met je collega's op zoel naar passende oplossingen en je werkt dit uit tot een mooi eindproduct. Je gaat webshops, websites en webapplicaties ontwikkelen door middel van ASP.NET, C# en MVC Framework. Bedrijfsprofiel Deze opdrachtgever houdt zich bezig

Bekijk vacature »

Medior PHP developer

Functie Het team bestaat inmiddels uit zo’n 25 collega’s met specialisten op het gebied van development, data(analyse), marketing, infrastructuur en finance. Ze hebben een supermodern pand en bieden hiernaast veel vrijheid en verantwoordelijkheid. Ze doen er alles aan om jou op te gemak te stellen. Zo kun je je eigen werkplek inrichten naar persoonlijke wensen, maar gaan ze bijvoorbeeld ook jaarlijks met elkaar wintersporten en zijn er andere leuke uitjes. Als onderdeel van één van de scrumteams ga je aan de slag, samen ben je medeverantwoordelijk voor het doorontwikkelen van hun business applicatie waar het traffic team dagelijks mee werkt.

Bekijk vacature »

Pagina: 1 2 volgende »

Jan Graneker

Jan Graneker

05/10/2015 11:07:53
Quote Anchor link
Goedemorgen Allemaal,

Ben nog bezig met bootstrap en zit met het volgende:

[Colum1][spacing][colum2]

Nu wil ik graag [Colum1] en [colum2] tegen elkaar aan zetten, dus zonder de spacing. Ik er een standaard code om de spacing te verwijderen tussen beide?
 
PHP hulp

PHP hulp

24/11/2024 09:16:03
 
Ozzie PHP

Ozzie PHP

05/10/2015 11:12:05
Quote Anchor link
Waarschijnlijk even de margin naar o zetten in je css-bestand.
 
Jan Graneker

Jan Graneker

05/10/2015 11:22:21
Quote Anchor link
Ik heb het volgende gedaan:


[colum1] [colum2 style="margin:0; padding:0;"]

Nu heb ik nog 20px als spacing ipv 40.
Gewijzigd op 05/10/2015 11:45:25 door Jan Graneker
 
Ozzie PHP

Ozzie PHP

05/10/2015 11:24:39
Quote Anchor link
Dan geef je die column in je html een class, bijv. class="nospace" en dan in je css

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
.nospace {
  margin: 0;
}
 
Jan Graneker

Jan Graneker

05/10/2015 11:33:15
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="row">    
                <div class="col-lg-4 nospace">
                    <div style="height:552px; background-color:#77767b;">
                        <img src="images/gear_icon.png" class="img-responsive"/>
                            <div class="col-lg-11" style="margin-left:10px;">
                                <h1>Homepagina</h1>
                                <p>Dit is een tekst</p>
                            </div>    
                    </div>        
                </div>
                
            
            
                <div class="col-lg-8 nospace" >
                    <img src="images/homepage_img.jpg" class="img-responsive" alt="CNC machine" />
                </div>
            
</div>


De nospace wordt wel herkent, alleen gebeurd er niks.
Gewijzigd op 05/10/2015 11:50:10 door Jan Graneker
 
Ozzie PHP

Ozzie PHP

05/10/2015 14:40:04
Quote Anchor link
Dan zal je even een online voorbeeld moeten plaatsen. Kan er zo weinig van zeggen.
 
Pieter R

Pieter R

05/10/2015 14:52:03
Quote Anchor link
Of deze?
table {
border-spacing: 0px;
}
Gewijzigd op 05/10/2015 14:52:18 door Pieter R
 
Jan Graneker

Jan Graneker

05/10/2015 14:59:09
Quote Anchor link
Bedankt dat jullie de moeite willen nemen om te kijken. Dit is de eerste keer dat ik alles in BS probeer te zetten. Kom er alleen met de spacing niet uit.


Ik wil graag de afbeelding etgen het [homepagina] blok plakken. Wat is de beste manier?
Gewijzigd op 05/10/2015 15:23:59 door Jan Graneker
 
Ozzie PHP

Ozzie PHP

05/10/2015 15:16:58
Quote Anchor link
Verander nospace maar eens in dit:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
.nospace {
  padding: 0;
}
Gewijzigd op 05/10/2015 15:17:20 door Ozzie PHP
 
Jan Graneker

Jan Graneker

05/10/2015 15:26:26
Quote Anchor link
Ozzie PHP op 05/10/2015 15:16:58:
Verander nospace maar eens in dit:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
.nospace {
  padding: 0;
}


Bedankt Ozzie. Weet jij toevallig ook waarom margin:0 niet werkt en ik in plaats hiervan de padding moet gebruiken?
 
Ozzie PHP

Ozzie PHP

05/10/2015 15:37:01
Quote Anchor link
Margin is de buitenkant van je box. Padding zit in je box. Even op Google het verschil opzoeken tussen margin en padding ;)
 

05/10/2015 16:39:48
Quote Anchor link
@jan, kan je je algehele voorbeeld uitleggen of wellicht tekenen?
Ik werk dagelijks met Bootstrap en heb zelf soms ook wat dingetjes.

Wat wel belangrijk is is dat je het grid systeem van Bootstrap als richtlijn gebruikt en niet alles erop wilt zetten.

Bekijk deze websites, deze zijn met Bootstrap in elkaar gezet.
http://lemon-internet.nl
http://dezaal.nl
http://tvmoordrecht.nl
 
Jan Graneker

Jan Graneker

05/10/2015 17:01:47
Quote Anchor link
Rickert Bombaklats op 05/10/2015 16:39:48:
@jan, kan je je algehele voorbeeld uitleggen of wellicht tekenen?
Ik werk dagelijks met Bootstrap en heb zelf soms ook wat dingetjes.

Wat wel belangrijk is is dat je het grid systeem van Bootstrap als richtlijn gebruikt en niet alles erop wilt zetten.

Bekijk deze websites, deze zijn met Bootstrap in elkaar gezet.
http://lemon-internet.nl
http://dezaal.nl
http://tvmoordrecht.nl


Ik design bijna alles in de BS grid. Ook kom er aardig uit met de colums probeer niet veel op de spacing te zetten. Ik ben nu alles gebaseeerd op het LG-screen. Als je me zou willen uitleggen hoe ik nu goed alles kan aanpassen voor MD en S zou het super zijn.
Gewijzigd op 05/10/2015 17:03:41 door Jan Graneker
 
Joni Fleischer
Moderator

Joni Fleischer

06/10/2015 08:29:51
Quote Anchor link
Als het goed is heeft elke column een padding left en een padding right.
Er wordt gekeken of het de eerste of laatste column is. (:first-child of last-child).

Alles wat er tussen zit heeft dus links en rechts padding. (Geen idee hoeveel, maar ga uit van 40 px)

.col-lg-4:last-child {
padding-right: 20px;
}
.col-lg-4 {
padding: auto 0;
}
.col-lg-4:first-child {
padding-left: 20px;
}
 
Eschwin Moerkerken

Eschwin Moerkerken

06/10/2015 10:36:15
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
<div id="mySelector">
    <div class="row">
        <div class="col-md-6">
        ...
        </div>
        <div class="col-md-6">
        ...
        </div>
    </div>
</div>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
#mySelector .col-md-6:first-of-type {
padding-right:0;
}

#mySelector .col-md-6:last-of-type {
padding-left:0;
}


Vergeet ze alleen voor mobiel niet weer op de standaard 15 pixels te zetten in je media queries, anders krijg je scheve kolommen onder elkaar ;).

Edit: Op deze manier kun je trouwens ook de spacing vergroten of verkleinen.
Gewijzigd op 06/10/2015 10:40:19 door Eschwin Moerkerken
 
Jan Graneker

Jan Graneker

06/10/2015 11:16:16
Quote Anchor link
Eschwin Moerkerken op 06/10/2015 10:36:15:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
<div id="mySelector">
    <div class="row">
        <div class="col-md-6">
        ...
        </div>
        <div class="col-md-6">
        ...
        </div>
    </div>
</div>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
#mySelector .col-md-6:first-of-type {
padding-right:0;
}

#mySelector .col-md-6:last-of-type {
padding-left:0;
}


Vergeet ze alleen voor mobiel niet weer op de standaard 15 pixels te zetten in je media queries, anders krijg je scheve kolommen onder elkaar ;).

Edit: Op deze manier kun je trouwens ook de spacing vergroten of verkleinen.



Ik maak nu gebruik van alleen de col-LG om hem op de desktop goed te krijgen.
Stel dat ik een col-lg-12 heb. Kan ik deze dan voor de mobiel zo laten, of moet ik in dezelfde class een col-xs-12 meegeven?
 
Jan de Laet

Jan de Laet

06/10/2015 11:53:46
Quote Anchor link
Volgens mij kun je bij bootstrap werken van klein naar groot.
Wat je bij md opgeeft is ook geldig voor lg (tenzij het overruled wordt), wat je bij sm opgeeft is ok geldig voor md en lg, enz.
 

06/10/2015 12:08:08
Quote Anchor link
Jan, ik snap niet waar je heen wilt met je code of iets.
Normaal doe je met Bootstrap aangeven hoeveel kolommen je wilt hebben op een bepaalt formaat van het scherm.

col-lg-12 is 12 kolommen naast elkaar op een groot scherm
col-md-12 is 12 kolommen naast elkaar op een middel scherm

Als je nu met een mobiel of tablet naar de website zal gaan zullen de 12 kolommen onder elkaar weergegeven worden ivm het "mobile-first".

Als je op een mobiel ook naast elkaar wilt hebben zet je op dezelfde div col-xs-12, mits je wilt dan hij maar 6 kolommen naast elkaar is o.i.d dan geef je col-xs-6.

Na een paar keer vragen weet ik nog steeds niet wat Jan wilt bereiken...?

Je hoort normaliter de padding o.i.d van Bootstrap niet aan te passen.
 
Eschwin Moerkerken

Eschwin Moerkerken

06/10/2015 12:10:05
Quote Anchor link
Als je hem alleen een col-lg-12 meegeeft, zal hij altijd 12 kolommen breed zijn op kleinere devices (dus MD, SM en XS). In jouw geval geef je hem 12 kolommen mee (100%) dus maakt het in dit geval niets uit.

Stel je hebt twee kolommen naast elkaar van col-lg-6 en je zou die op een kleiner scherm (laptop bijvoorbeeld) ook naast elkaar willen hebben (mits er ruimte is) dan zou je ook een col-md-6 moeten toekennen en zou je in principe de col-lg-6 kunnen weg laten.

Zoals Jan de Laet al zei, je kan van klein naar groot werken. Dus heb je iets kleins gespecificeerd dan zal de grote deze altijd overnemen.

Stel je maakt gebruik van een col-md-6 dan zal deze op zowel MD ans LG 6 kolommen zijn, daar onder (SM en XS) 12 kolommen (standaard).

Toevoeging op 06/10/2015 12:12:47:

Rickert Bombaklats op 06/10/2015 12:08:08:
Je hoort normaliter de padding o.i.d van Bootstrap niet aan te passen.


Deze kun je prima aanpassen. De 15 pixels per kolom die zij hanteren is standaard.
Als je precies weet wat er gebeurd als je ze aanpast en wat de .row dan doet dan zou je dit zonder problemen prima kunnen aanpassen als je meer ruimte nodig hebt.

Normaliter zou je ook .col-md-offset-1 kunnen gebruiken bijvoorbeeld. Helaas is dat soms net weer iets teveel ruimte. Nadeel daarvan is dat je dan met 11 kolommen werkt in plaats van 12.
 
Randy vsf

Randy vsf

06/10/2015 12:40:47
Quote Anchor link
Eschwin Moerkerken op 06/10/2015 12:10:05:

Normaliter zou je ook .col-md-offset-1 kunnen gebruiken bijvoorbeeld. Helaas is dat soms net weer iets teveel ruimte. Nadeel daarvan is dat je dan met 11 kolommen werkt in plaats van 12.


.col-md-offset-1 haalt aan allebei de kanten 1 eraf.
Je houd dus 10 kolommen over.
 
Eschwin Moerkerken

Eschwin Moerkerken

06/10/2015 13:06:58
Quote Anchor link
@randy je weet kennelijk niet wat een offset inhoudt. Een offset betekent dat iets wordt overgeslagen. Dus er wordt een kolom over geslagen.

Toevoeging op 06/10/2015 13:14:50:

@Jan Graneker: http://codepen.io/anon/pen/dYWRbr
 

Pagina: 1 2 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.